Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: imported a missing graphic


The Tab Layout is a relatively simple layout type. Tabs run along the top of the layout. You can configure and select a distinct embedded view, container, or component in each tab. The tab headers themselves can be configured to show text or even embedded views. A menuType property on the tab container offers two basic appearances for the tabs: classic and modern

Critically, each element in a Tab Layout has only a single position property, tabIndex. The edges of the enclosed element will be stretched to fill the entire tab, allowing easy dragging and dropping of different subviews. Of course, you can nest containers inside of a tab layout to provide whatever functionality you'd like.


On_this_page

 



Iulink
URLhttps://www.inductiveuniversity.com/videos/tab-container/8.0
NameTab Container




Tab Navigation

The Tab Layout is a way to allow your users to swap between several views easily. However, this is not a navigation strategy that works for anything other than a very small project. This navigation strategy is intrinsically limited. You cannot use a tab layout to navigate to a new page, only to cycle between different views on the same page. As such, the page URL will never change, and the forward and back buttons on your browser will not navigate through the tabs.

For complex pages, this type of layout can work very well. When we talk about using tabs to organize a page, we are talking about a single page that has a lot of information on it. A good example is an customer details screen. You may need to know all about your own customers, location, contacts, order information, payment, and more. If each of these items is a new tab on a single page, you can show much more information in a smaller space. If this sort of tab structure suits your page's organizational needs, the tab layout can integrate that structure without complicated scripting or bindings.

Nested Tabs

If you're after a nested tab structure, all this requires is nesting another tab container inside of each of the tabs in a parent container:

  1. Create a new view with a Tab container type, and create a Page URL

    Editor_notes

    replace image above with the following at 8.0.8 release. no banner needed.



  2. The Tab container will have a couple tabs preconfigured. If you'd like to add or remove tabs, you can do so by interacting with the tabs themselves, or by adding or removing elements in the tabs array.
  3. If you'd like to add headers to your tabs, select the root container, and add strings to the entries in the tabs array. We labeled our two tabs "Region" and "Events".



  4. Select a tab (i.e., Region) where you'd like to configure some nested tabs.
  5. Double click to deep select the Tab Container component for the nested tabs.
  6. From the Perspective component palette, drag a Tab Container component (or another view you created that has a tab layout) onto the View. 
  7. Configure the number of tabs and the headers using the same means we discussed in steps 2 and 3. For this example, we made four tabs and labeled them North, South, East and West.



  8. Select the tab you want to add a component to (i.e., West). 
  9. Drag a component onto the tab. In this example, we added a Map component on the tab labeled West. When you drag a component into a tab, the component fills up the entire space. If you want to add multiple components on a sub-container/nested tab, go to Step 11.
  10. The example now shows the Map component when the West tab is selected. 



  11. To add multiple components on a sub-container, let's use a different tab (i.e., East) from our example above.
  12. Double click to deep select the Tab component (i.e., East) and drag a Coordinate container from the component palette into the sub-container. 
  13. Now you can drag multiple components into the container. This example drags in a Map and Table components. You can resize and organize the components within the tab. Here's what the components look like within the tab.



  14. Now, lets open it up in a Perspective Session by clicking on the Page Configuration icon. Right click on your Page URL for your Tab View to launch a Perspective Session. 



  15. Here's what your Tab container layout will look like in a Perspective Session.