MetaLocator supports the display of tabs in the results cards as shown below:
Watch this video to see how to setup results tabs
Notice the "Address" and "Products" tabs in the List and the "Button" and "Another Button" example in the Map Popup in the screenshot above. These are examples of Tab Controls.
A single tab display is created by 3 separate fields:
Tab Button - This is the button which represents the clickable label of the tab itself.
Tab Container Start - This is the field which delineates the start of the content contained within the tab.
Tab Container End - This is the field which delineates the end of the content contained within the tab.
In the example below, we have 2 Tab Buttons, 2 Tab Container Start controls and 2 Tab Container End controls.
Notice how the Full Address, Street View and Phone fields are between the Start and End Container controls. This is how the system knows they will be displayed within that tab container.
Add a Tab Control
To add a tab control to your interface
Click Results and the name of the results area where you'd like to place the tab control (E.g. List, Details or Map Popup)
Click Add Field, and choose Tab Control as shown below
Drag the Tab Container Start and End controls so they are above and below the fields that should display in the tab.
Repeat the process above for multiple tabs. For the second and further tab controls, a unique ID should be specified in each tab control . Label them as Button2, Button3 and so forth. This ensures the system knows which tab to expand when a given tab button is clicked.
The Tab Buttons may include CSS icons, as shown in the Products tab. The Tab Container Start may also include Styles, mostly to allow for the application of padding within the tab as shown below:
When the Tab Buttons are displayed in the Header container, the tabs align as shown below:
Tab Control Ordering
Tab start and end controls should be organized according to same ordering as the tab buttons. The first tab button will be displayed as active, and the first tab container set will also be displayed as active. Therefore, when multiple tabs are present the order should be consistent, as in this example:
Correct:
Tab Button 1
Tab Button 2
Tab 1 Start
tab 1 contents
Tab 1 End
Tab 2 Start
tab 2 contents
Tab 2 End
Incorrect:
Tab Button 1
Tab Button 2
Tab 2 Start
tab 2 contents
Tab 2 End
Tab 1 Start
tab 1 contents
Tab 1 End
The End Control should always appear after the Start Control, the Tab 1 End shown in bold is incorrect since it appears before (higher than) the Tab 1 Start control.
Incorrect:
Tab Button 1
Tab Button 2
Tab 1 End
tab 1 contents
Tab 1 Start
Tab 2 Start
tab 2 contents
Tab 2 End