ShowTable of Contents
This Application Pattern overview article discusses the generation of Tab Layout user interfaces with Web Experience Factory.
For more detailed information on how to build models using the builders listed here, please refer to the articles referenced in the Resources section below.
|Page Tabs||Generate a set of page navigation tabs and place them on each of a set of specified WEF pages|
|Dojo Tabs|| Leverage the Dojo Tab widget to split a page into a set of tabbed sections, such that only one section is visible at a time|
|Tab builder|| Low level WEF control builder that Page Tabs is built on. In general, this one is not used directly in UI models|
|Model Container|| Add UI from a separate model, to a tab page. As of 7.0.1, Model Container now has a Load When Visible input that wraps use of the Lazy Load builder for you.|
|Lazy Load|| Specify that an area of a page should NOT be rendered/loaded until it is visible (useful for tab areas not initially visible on a page).|
- Use a separate model container per tab page, to load the sub-page from a separate model, into each tab.
- Use Dojo Tabs if you just want to split a single page into a set of tab navigable sections where only one section is visible at a time.
- Use the Page Tabs builder if you have distinct complex pages that you want to navigate between.
- Avoid Dojo Tabs if each tab area has a complex UI (that may not be visited) that may take a while to generate and render, since Dojo Tabs combine all the markup in one html page.
- If you must use Dojo Tabs for multiple complex sub-pages of data, use the Lazy Load builder to tell those sub-pages not to load until they're selected and made visible.
Samples and Resources
WEF Enablement Videos
Rich Web User Interface Samples
Page Tabs with close buttons
Tab Examples for Dojo Tabs and Page Tabs
|Orders View Dojo Tabs||Rich Web User Interface sample Orders View, using the Dojo Tab builder|
|Employee Details Dojo Hover Tab||Rich Web User Interface sample Employee Details, using the Dojo Hover Tab builder|