Tab Panel
Overview
The TabPanel component is a tabbed container that can hold one or more forms. But only one of them is visible at a time. The active/visible form can be changed using the tab buttons or from code. At runtime, tabs can be added from code, and can be removed either from code or from the UI. Tabs can optionally show related data.
It can be used in both responsive and anchored layouts.
Get Started
Creating a Tab Panel
Here are the steps for creating a Tab Panel:
Open the Form Editor of the form where you need to place an Accordion Panel
Find TabPanel in Form Containers section in the components' pallet
Drag and drop the TabPanel component in the desired place of the form
Set the tabs; this can be done via wizard or in the properties panel
Edit other TabPanel properties if needed
It is recommended to set a specific name
in the Tab Panel properties in order to make it easier to use it later in scripting.
Example: "tabpanel_orders"
.
It is recommended to set a specific name
in the Tab Panel tab properties in order to make it easier to use them later in scripting.
Example: "tab_customers"
.
Setting the tabs property via the wizard
After dragging the container in the form, the Property configurator for tabs
wizard appears. In order to set the tabs using the wizard, you need to do the following steps:
Find in the left side of the wizard the contained form you need: it can have a related or unrelated datasource
Click on the form name
The selected form will appear on the right side of the wizard, showing some of the tab properties:
CONTAINEDFORM
: the form shown in the tabRELATIONNAME
: the name of the relation between datasources of main and contained forms; this field will be empty if the relation doesn't existTEXT
: the tab's title text (i18n and custom HTML supported)delete
icon : you can remove a tab by clicking the icon
Click
OK
button after all tabs have been added
Setting the tabs property in the properties panel
After dragging the container in the form, the Property configurator for tabs
wizard appears. Close the editor without setting anything here, find the Accordion Panel in the form editor, click it and proceed with the following steps:
Add a tab. There are 2 ways of adding a tab:
Select the
tabs
property and click the+
button in order to add a tab. Next tabs can be added the same way or by clicking the+
button (insert a new array item below
) of another tab. You can change the tabs' order by dragging them into the desired placed inside the TabPanel (in the form editor).Drag and drop
tab
component (of an TabPanel in Form Containers section in the components' pallet) into the TabPanel container (in the form editor)
Expand the
tabs
property to see the list of tabs. They are also shown in the TabPanel container (in the form editor)In order to edit each tab, expand it or click the tab name in the TabPanel container (in the form editor) and set the properties:
containedForm
: the form shown in the tabdisabled
: whether that tab is enabled or nothideCloseIcon
: whether a close icon is shown or not (only applicable whenshowTabCloseIcon
is set totrue
)iconStyleClass
: style class for the tab's iconimageMedia
: image to be drawn in tab headername
: a name for this tabrelationName
: optional relation for the form to be showntoolTipText
: the text message when a user hovers their cursor (i18n and custom HTML supported)
Using a relation
The contained form of the tabs can show related data. In order to do this, you need to have the following:
Set the
datasource
property on the main formSet the
datasource
property on the contained formMake sure that the relation from datasource table of the main form to datasource table of the contained form exists, otherwise it needs to be created
Set the above relation in the
relationName
property of the corresponding tab
Once everything is set, the contained form will show related data according to the selected record in the main form. When the selected record changes in the main form, so will the related data from the contained form.
Customizing the Tabs
Setting the tab text
Tab's title text property can be set by entering a value in the property field or by entering the Text Property Editor. Usually this will be plain text or it can contain data from table columns, aggregations, calculations, relations or from and scopes variables, all of them can be combined, as well. i18n is also supported.
Examples:
Setting the tooltip text
Tab's tooltip text property can be set by entering a value in the property field or by entering the Text Property Editor. Most often, this will just be plain text that describes what will happen on-click. It can also contain data from table columns, aggregations, calculations, relations or from and scopes variables - all of them can be combined. i18n is also supported.
Closable Tabs
TabPanel component can also have closable tabs, when needed.
Enabling/Disabling Tab Close
In order to enable the option to have closable tabs, the user must check showTabCloseIcon property of the TabPanel component. This applies to all tabs, so in case when not all tabs should be closable, the user can check hideCloseIcon property of the tab; this will remove the close icon of the tab.
Setting the close Icon
The close icon can be set by editing the closeIconStyleClass property of the TabPanel.
Custom Tab Markup
Tab's title text property supports custom HMTL content.
Example:
In order for the custom HTML content to be correctly displayed we need to make sure that it will not be sanitized by using .putClientProperty(UICONSTANTS.TRUST_DATA_AS_HTML,true)
Only enable this setting if the data shown can always be trusted and is never composed of data from an external system or user.
Scripting a Tabpanel
TabPanel properties can be also set in the Scripting Editor. You can find a list of AccordionPanel API methods here.
Changing Selected Tab
Here is an example of how to programmatically set the active tab in the Scripting Editor of the main form:
Adding a Tab
Here is an example of how to programmatically add a tab in the Scripting Editor of the main form:
Removing a Tab
Here is an example of how to programmatically remove a tab in the Scripting Editor of the main form:
Handling Tab Change Event
Here is an example of how to use the onChange
event of an TabPanel in the Scripting Editor of the main form:
Saving the active tab index in the onChange
event(fired after a different tab is selected) of the TabPanel container:
Checking if there is a saved previous active tab index and set it in the onShow
main form event:
Blocking a tab change
Here is an example of how to block a tab change using the onTabClicked
event of an TabPanel in the Scripting Editor of the main form:
Handling a Tab Close Event
Here is an example of how to use the onTabClose
event of an TabPanel in the Scripting Editor of the main form:
Blocking a tab close
Here is an example of how to block a tab close using the onTabClose
event of an TabPanel in the Scripting Editor of the main form:
Last updated