Difference between revisions of "TabView Sections"
Yvonne.milne (Talk | contribs) (→Custom WebView Sections) |
Yvonne.milne (Talk | contribs) |
||
| Line 1: | Line 1: | ||
''Under Construction'' | ''Under Construction'' | ||
| + | ==See Also== | ||
| + | [[TabView Section Attributes]] | ||
| + | |||
| + | ==Overview== | ||
A Tabview is a Section made up of other Sections, each one selectable using its tab. | A Tabview is a Section made up of other Sections, each one selectable using its tab. | ||
| + | To add a Tabview to a Page, choose Tabview from the Sections menu in the Form Tools. | ||
| + | It will already contain one tab placeholder. | ||
| + | Content sections can be created as normal then added into the Tabview, or this can be done in one operation using the '''+''' icon in the tab bar. | ||
| + | ==Creating a TabView Content Section== | ||
| + | Note: for related sections, create the sections outside the TabView. This allows you to set up the relations using the Relationship Builder. See [[#Related Sections|below]]. | ||
| − | ===Custom WebView Sections | + | Click the '''+''' icon in the tab bar and select the Section type: |
| + | |||
| + | ... | ||
| + | |||
| + | ==Related Sections== | ||
| + | Instead of having a vertical column of sections for Customers, their orders and and the order details, we can use a Tabview and tab to choose the information we want to see. | ||
| + | |||
| + | Customers form | ||
| + | Orders grid | ||
| + | Order Details grid | ||
| + | |||
| + | Set up the relations: | ||
| + | |||
| + | Once you're ready, add the content Sections to the TabView. | ||
| + | |||
| + | ==Adding Content Sections== | ||
| + | Drag the header of the free section you want to add over an existing tab caption | ||
| + | |||
| + | It doesn't matter which tab you drop on - the section will be added as the last tab | ||
| + | |||
| + | ==Removing Content Sections== | ||
| + | Just click on the x to remove the section from the tabview and make it a free section again. | ||
| + | |||
| + | ==Reordering Content Section Tabs== | ||
| + | To reorder the tabs, select a section by its tab and drag and drop. | ||
| + | |||
| + | ==Accessing TabView Section and Content Section Attributes== | ||
| + | Click the section header to access the attributes for the tabview container in the [[App Inspector]]. | ||
| + | |||
| + | If the [[App Inspector]] is closed, double-click the section header to open the [[Lianja_5_Getting_Started_1#Attributes_Dialog|Attributes dialog]]. | ||
| + | |||
| + | Click the tab icon to access the attributes for the currently selected section in the tabview. | ||
| + | |||
| + | ==Placeholder Tab== | ||
| + | Once you no longer need the tab placeholder, it can be deleted. | ||
| + | |||
| + | ==Custom WebView Sections== | ||
If a Section in the TabView is a [[:Category:Developing_Custom_WebViews|custom WebView Section]], double-click its tab to open its source code base in the [[Script Editor]] (from v5.3). | If a Section in the TabView is a [[:Category:Developing_Custom_WebViews|custom WebView Section]], double-click its tab to open its source code base in the [[Script Editor]] (from v5.3). | ||
[[{{ns:file}}:l5_tab_customcode.png|800px|left|border|link={{filepath:l5_tab_customcode.png}}|Custom WebView Tab: Source Code]] | [[{{ns:file}}:l5_tab_customcode.png|800px|left|border|link={{filepath:l5_tab_customcode.png}}|Custom WebView Tab: Source Code]] | ||
<br clear=all> | <br clear=all> | ||
| + | |||
| + | [[Category:Built-in Sections]] | ||
| + | [[Category:Sections]] | ||
Revision as of 06:57, 21 May 2020
Under Construction
Contents
See Also
Overview
A Tabview is a Section made up of other Sections, each one selectable using its tab.
To add a Tabview to a Page, choose Tabview from the Sections menu in the Form Tools. It will already contain one tab placeholder.
Content sections can be created as normal then added into the Tabview, or this can be done in one operation using the + icon in the tab bar.
Creating a TabView Content Section
Note: for related sections, create the sections outside the TabView. This allows you to set up the relations using the Relationship Builder. See below.
Click the + icon in the tab bar and select the Section type:
...
Related Sections
Instead of having a vertical column of sections for Customers, their orders and and the order details, we can use a Tabview and tab to choose the information we want to see.
Customers form Orders grid Order Details grid
Set up the relations:
Once you're ready, add the content Sections to the TabView.
Adding Content Sections
Drag the header of the free section you want to add over an existing tab caption
It doesn't matter which tab you drop on - the section will be added as the last tab
Removing Content Sections
Just click on the x to remove the section from the tabview and make it a free section again.
Reordering Content Section Tabs
To reorder the tabs, select a section by its tab and drag and drop.
Accessing TabView Section and Content Section Attributes
Click the section header to access the attributes for the tabview container in the App Inspector.
If the App Inspector is closed, double-click the section header to open the Attributes dialog.
Click the tab icon to access the attributes for the currently selected section in the tabview.
Placeholder Tab
Once you no longer need the tab placeholder, it can be deleted.
Custom WebView Sections
If a Section in the TabView is a custom WebView Section, double-click its tab to open its source code base in the Script Editor (from v5.3).
