Difference between revisions of "TabView Sections"
Yvonne.milne (Talk | contribs) (Created page with "''Under Construction'' A Tabview is a Section made up of other Sections, each one selectable using its tab. ===Custom WebView Sections=== If a Section in the TabView is...") |
Yvonne.milne (Talk | contribs) (→See Also) |
||
(18 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | ==See Also== | |
− | + | [[TabView Section Attributes]], [[Working with Forms in Lianja]] | |
+ | ==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. | ||
+ | [[{{ns:file}}:l5_tabviews_mob.png|800px|left|border|link={{filepath:l5_tabviews_mob.png}}|Example Related Tabs: Phone App View]] | ||
+ | <br clear=all> | ||
+ | ==Creating a TabView Section== | ||
+ | To add a Tabview to a Page, choose Tabview from the Sections menu in the Form Tools. | ||
+ | It will already contain one tab placeholder. | ||
+ | [[{{ns:file}}:l5_tabviews_create.png|800px|left|border|link={{filepath:l5_tabviews_create.png}}|Add a new TabView Section]] | ||
+ | <br clear=all> | ||
− | ===Custom WebView Sections | + | Content sections can be created as normal then added into the Tabview, or (from v5.3) this can be done in one operation using the '''+''' icon in the tab bar. |
− | 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]]. | + | |
+ | ==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]]. | ||
+ | |||
+ | Click the '''+''' icon in the tab bar and select the Section type: | ||
+ | |||
+ | [[{{ns:file}}:l5_tabviews_content_create1.png|800px|left|border|link={{filepath:l5_tabviews_content_create1.png}}|Add a new Section to the TabView]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Once the new section has been added (using the [[Section Wizard]] or as a blank Section), it is automatically added to the TabView section. | ||
+ | |||
+ | [[{{ns:file}}:l5_tabviews_content_create2.png|800px|left|border|link={{filepath:l5_tabviews_content_create2.png}}|Add a new Section to the TabView]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Note: drag on the blue handle at the bottom of the TabView section to change its height. | ||
+ | |||
+ | ==Related Sections== | ||
+ | Here, we have a Customers form, Orders grid and Order Details grid along with a TabView Section with its placeholder tab. Instead of having a vertical column of sections, we can use a Tabview and tab to choose the information we want to see. | ||
+ | |||
+ | Before adding the content sections to the TabView, [[Getting_Started_Part_1#Relating_sections_together|set up the relations]]: | ||
+ | |||
+ | [[{{ns:file}}:l5_reltabs1.png|800px|left|border|link={{filepath:l5_reltabs1.png}}|Related Sections]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Once you're ready, [[#Adding Content Sections|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 | ||
+ | |||
+ | [[{{ns:file}}:l5_reltabs2.png|800px|left|border|link={{filepath:l5_reltabs2.png}}|Related Sections]] | ||
+ | <br clear=all> | ||
+ | |||
+ | 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 if required. | ||
+ | |||
+ | [[{{ns:file}}:l5_reltabs3.png|800px|left|border|link={{filepath:l5_reltabs3.png}}|Related Sections]] | ||
+ | <br clear=all> | ||
+ | |||
+ | ==Reordering Content Section Tabs== | ||
+ | To reorder the tabs, select a section by its tab and drag and drop. | ||
+ | |||
+ | [[{{ns:file}}:l5_reltabs4.png|800px|left|border|link={{filepath:l5_reltabs4.png}}|Related Sections]] | ||
+ | <br clear=all> | ||
+ | |||
+ | ==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. | ||
+ | |||
+ | [[{{ns:file}}:l5_reltabs5.png|800px|left|border|link={{filepath:l5_reltabs5.png}}|Related Sections]] | ||
+ | <br clear=all> | ||
+ | |||
+ | ==Placeholder Tab== | ||
+ | Once you no longer need the tab placeholder, it can be deleted. | ||
+ | |||
+ | Click the '''x''' in the tab: | ||
+ | |||
+ | [[{{ns:file}}:l5_reltabs6.png|800px|left|border|link={{filepath:l5_reltabs6.png}}|Related Sections]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Then delete the free section as normal: | ||
+ | |||
+ | [[{{ns:file}}:l5_reltabs6a.png|800px|left|border|link={{filepath:l5_reltabs6a.png}}|Related Sections]] | ||
+ | <br clear=all> | ||
+ | |||
+ | ==Custom and Custom WebView Sections== | ||
+ | If a Section in the TabView is a [[:Category:Developing_Custom_Sections|Custom Section]] or 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> | ||
+ | |||
+ | ==Convert Page to TabView== | ||
+ | This new menu option available from Lianja v6.3 allows a new TabView section to be created and all the existing sections to be automatically added to the TabView section. | ||
+ | |||
+ | It is particularly useful for tablet and phone App layouts. | ||
+ | |||
+ | [[{{ns:file}}:convert_page_tabview1.png|800px|left|border|link={{filepath:convert_page_tabview1.png}}|Convert Page to TabView]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Result: | ||
+ | |||
+ | [[{{ns:file}}:convert_page_tabview2.png|800px|left|border|link={{filepath:convert_page_tabview2.png}}|Convert Page to TabView]] | ||
+ | <br clear=all> | ||
+ | |||
+ | ==Convert Form to TabView== | ||
+ | This new menu option available from Lianja v6.3 allows a new TabView section to be created and each column of FormItems from the selected Form section to be added as a separate Form section to the TabView section. | ||
+ | |||
+ | Make sure the Form section is selected: | ||
+ | |||
+ | [[{{ns:file}}:convert_section_tabview1.png|800px|left|border|link={{filepath:convert_section_tabview1.png}}|Convert Section to TabView]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Result: | ||
+ | |||
+ | [[{{ns:file}}:convert_section_tabview2.png|800px|left|border|link={{filepath:convert_section_tabview2.png}}|Convert Section to TabView]] | ||
+ | <br clear=all> | ||
+ | |||
+ | |||
+ | [[Category:Built-in Sections]] | ||
+ | [[Category:Sections]] | ||
+ | [[Category:Lianja v6.3]] |
Latest revision as of 06:36, 12 April 2024
Contents
- 1 See Also
- 2 Overview
- 3 Creating a TabView Section
- 4 Creating a TabView Content Section
- 5 Related Sections
- 6 Adding Content Sections
- 7 Removing Content Sections
- 8 Reordering Content Section Tabs
- 9 Accessing TabView Section and Content Section Attributes
- 10 Placeholder Tab
- 11 Custom and Custom WebView Sections
- 12 Convert Page to TabView
- 13 Convert Form to TabView
See Also
TabView Section Attributes, Working with Forms in Lianja
Overview
A Tabview is a Section made up of other Sections, each one selectable using its tab.
Creating a TabView Section
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 (from v5.3) 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:
Once the new section has been added (using the Section Wizard or as a blank Section), it is automatically added to the TabView section.
Note: drag on the blue handle at the bottom of the TabView section to change its height.
Related Sections
Here, we have a Customers form, Orders grid and Order Details grid along with a TabView Section with its placeholder tab. Instead of having a vertical column of sections, we can use a Tabview and tab to choose the information we want to see.
Before adding the content sections to the TabView, 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 if required.
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.
Click the x in the tab:
Then delete the free section as normal:
Custom and Custom WebView Sections
If a Section in the TabView is a Custom Section or a custom WebView Section, double-click its tab to open its source code base in the Script Editor (from v5.3).
Convert Page to TabView
This new menu option available from Lianja v6.3 allows a new TabView section to be created and all the existing sections to be automatically added to the TabView section.
It is particularly useful for tablet and phone App layouts.
Result:
Convert Form to TabView
This new menu option available from Lianja v6.3 allows a new TabView section to be created and each column of FormItems from the selected Form section to be added as a separate Form section to the TabView section.
Make sure the Form section is selected:
Result: