Documentation Home

• Documentation Home
• SeedCode Home

SeedCodeComplete

How Can I Create New Tabs?

Types of tabs.

There are two kinds of tabs in SeedCode Calendar; there are the Main Navigation tabs at the top of the screen, things like “Calendar” and “Admin”, and then there are the Native tabs within each section; the tabs “Appointments” and “To-Do List” on the Daily view are Native tabs.

Adding New Native Tabs

This is pretty easy. Enter layout mode and double click near the tab’s border to edit it. You’ll see the Tab Control Setup dialog for the tab. If the options in that dialog are dimmed, you may need to unlock the tab by selecting “unlock” from FileMaker’s Arrange menu. Once unlocked, simply double click on the tab control area to bring up its editor. There you can change the name of the tabs, change their order, or add and delete tabs.

The only thing you want to be careful of is that you don’t accidentally move the tab area itself (this is why we lock it in layout mode—to prevent accidental nudging). If part of an object is in the tab and part is out, you can see some unexpected behavior in browse mode.

Adding New Navigation Tabs

Select “Admin” and then “Tabs & Navigation” from the main navigation tabs to reach the Tab Editor (or navigate to the Admin Navigation layout in layout mode. On this screen you’ll see three columns in which you can create new tabs.

Editing Tabs & “Additional Layouts”.

Select an existing tab and you’ll see its details described in the Selected Tab section at the bottom of the screen. Here you can change the destination layout or object for each record. You can also record “Additional Layouts” that will also cause the selected tab to be highlighted. You’ll see an example of this on the Calendar / List View record, where we have a bunvch of layouts (ToDo List, ToDoTable, etc.) alll using the “List View” tab.

Remember, when you navigate by clicking on the List View tab described above, you’ll go to the “go to layout” listed on the navigation record’s Tab Information screen. But you don’t have to click on these navigation tabs to get to your layouts- you can use the status area, Go To Related Record, or even navigate in layout mode- and your destination layout will determine which of the navigation tabs “light up”. The “additional layouts” listed for each tab are layouts that will also cause a given tab to “light up”.

Once you’ve made your changes click “Apply Changes” at the bottom of the screen. SeedCode stores its tabs as global variables, so unless you Apply Changes you won’t see your navigation changes until you log back in (actually until the Upon Opening script runs again). In a multi-user environment, clicking Apply Changes only applies the navigation changes to your session; other logged in users would have to quit the file and come back in (or run theUpon Opening script again) to see the changes in their session.

Moving & Sorting Tabs.

In the Selected Tab section click the Tools tab to see options for moving and sorting the selected tab. If you want to move an existing tab to be the child of another tab but there is no child already there, you’ll need to create a new tab in the same level as where you’d like to move your tabs. You need this record in order to have some place to select as your destination for moving the tabs; once you’ve moved them you can delete this temporary tab.

Including Layouts from Other Files.

You can easily add layouts from other files to the tab menus in SeedCode. It helps to have your other file open when you make records for its layouts on the Tab Editor. Create a new record for your tab as described above and then in the Selected Tab section, enter the name of your external file (leaving off the .fp7) You’ll now see the Go To Layout and Go To Object pop up lists reflecting the layouts and objects from your external file.

Create the tabs you need and then save your changes.

You’ll need to make two other changes in order to get external files & layouts to work here. First, you’ll need some kind of “arrival” script in your file that can go to the correct layout and object based on some script parameters. You may want to add the custom function SeedCode_GetScriptParameter to your file to make it easier to make user of multi-part script parameters. You’ll be sending a script parameter like this...

"Layout = " & $$DestinationLayoutName & " ; Object = " & $DestinationObject & " ; HideStatusArea = " & $DestinationHideStatusArea

... so write a simple arrival script that goes to layout by layout name where the layout name is (for example) SeedCode_GetScriptParameter ( “Layout” ). Do the same with Go to Object and with the status area (if necessary). Once your arrival script is written in our destination file, you’ll need to edit the script “Tab Navigation ( Tab ) { Level }” in SeedCode. Towards the end of this script you’ll see a number of sample “IF” branches for external files, grab one of these and use it to If the $$DestinationFileName is your file name (without the .fp7) perform the arrival script you wrote above. Don’t forget to send the destination information as a script parameter like we described above.

Changing the Size or Number of Navigation Tabs

Note that in most cases, if you’re adding just a few tabs, you won’t need to do anything outside creating the tab on the Tab Editor as described above and clicking “Apply Changes”. If you need to add more tabs than we’ve set the layouts to show (for example the top level will show 10 tabs without modification), then the following instructions are for you.

The navigation tabs in SeedCode (the rectangular tabs like “Calendar” and “Admin”) are drawn using field instead of simple buttons. So, in order to change the size or number of tabs shown, you’ll need to move these fields around. The only trick here is that there are several objects stacked on top of each other and you want to make sure you manipulate them all.

You’ll likely want to read through everything that follows before you get to work. This isn’t difficult, but it can be tricky the first time.

Changing the Number of Tabs Shown.

The dynamic navigation engine in SeedCode supports up to 99 tabs per level. Of course you can’t really fit that many on a layout. The calendar ships with 10 tabs showing in the first level; if you create additional Tabs on the Tab Editor layout as described above, the first 10 of these will just show up- you don’t have to do anything else. If you want to show more than 10 tabs in the first level you’ll need to change the size of the tabs or you’ll need to make your layout wider. See the section below on changing the size of these tabs.

Once the tabs or layout are the right size, you can increase the number of tabs shown as follows;

1. Working with the left most tab, click on it in layout mode and you’ll likely have clicked on a button: that is the top most of the 3 stacked objects making up the tab. Use your arrow keys to nudge that first button 4 px down so you can get at the objects beneath it.

2. Now double clicking on the first tab should bring up an instance of the field z_TabImageCalc. This is the field that displays the tab as a rectange. You’ll see this is a repeating field set to show repetition 1 through 10. If you want to show a few more tabs, just change the 10 to add a few more repetitions. (Note that if you’re working in the second level of tabs, these show repetitions beginning at 201, so increasing those tabs would me showing repetitions form 201 through say 218.

3. Now nudge this instance of z_TabImageCalc down 4 px using your arrow keys so you can get at the field below it.

4. At this point double clicking on the first tab should bring up an instance of the field z_TabNamesCalc. You’ll do the same thing here, increasing the number of repetitions show to match that show for z_TabImageCalc.

5. Now select the instance of z_TabImageCalc that you’d nudged down and nudge it 4 px back up using your arrow keys. Do that same with that button we nudged in step 1.

6. We’re almost done except that our new repetitions of these tab fields don’t have buttons over them. Drag select the button on top of the last tab that was visible before you started adding tabs- that was probably tab number 10. (Not that if you’re having trouble seeing these buttons you can use FileMaker’s View menu, selecting “Show Buttons” and/or “Show Tooltips” to make these buttons stand out from the fields below them.

7. Drag-copy this button to the right so it now covers your next tab field. Double click on the button and you’ll see it is running a script with a parameter something like "Tab = 8". Change this to reflect the number of the tab now below this button (likely 11 as you get started). You’ll repeat this, drag-copying the button one tab to the right and changing the script parameter until all your new tabs are covered by buttons.

Changing the size of the tabs.

Changing the size of these navigation tabs is pretty easy, but you do have to make sure you change the size of each of he 3 objects we use to make up a tab. Taking the first row of tabs as an example here is how you’d go about it...

Note that you might want to try this on a duplicate layout first so you get the hang of it.

1. Working with the left most tab, click on it in layout mode and you’ll likely have clicked on a button: that is the top most of the 3 stacked objects making up the tab. Use your arrow keys to nudge that first button 4 px down so you can get at the objects beneath it.

2. Now double clicking on the first tab should bring up an instance of the field z_TabImageCalc. Nudge this field down two pixels and then hold down the shift key as you click right above it so that you’ve now selected both z_TabImageCalc and z_TabNamesCalc.

3. These are repeating fields so any manipulations you make to the first tab are made to all of them. So, with both fields selected, drag the tabs to any size or shape you wish. Then nudge the z_TabImageCalc field back up two pixels. And nudge that first button back up 4 px.

4. At this point you’re all set except that the buttons which lie on top of these tabs are still their original size. Unlike the repeating fields, these buttons don’t all resize and space out together; they’ll resize together but will then all overlap so you’ll need to space them out by hand. The easiest way to do this is to select all the buttons one by one and, when they are all selected, assign a stroke (line) color to them temporarily. Then, with them all still selected, drag the first one until it is the right size relative to the tab below it.

5. All the buttons will resize with this first one, but they’ll overlap. So now select them one by one and position them over the relevant tabs beneath them, turning off their stroke color as you go.

That’s it!

Changing the Color or Tab Image.

The color and rectangle surrounding each tab is drawn from a container field in our interface table. Actually there are two fields: IntTabHighlightGlob is the image we use for the active tab, and IntTabLowlightGlob is used for inactive tabs. Feel free to experiment with replacing these to suit your own look and feel.

Keep in mind that our IntTabLowlightGlob image is partially transparent so that it can “dim” the tab names below it. You’ll want to preserve that transparency in any images you create.