TabView Sections

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: