Tabs can be used when you need multiple containers within a single window. Tab-based navigation provides an easy and powerful mechanism to handle a huge amount of content within a limited area through separating content into different panes where one pane is viewable at a time. The user can quickly access the content by switching between the panes without leaving the page.
In interface design, a tabbed document interface (TDI) or Tab is a graphical control element that allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with a web browser, web application and text-editor, and preference panes.
When you drag and drop a Tab widget, it comes with three default three panes. Each pane can have a separate header and content.
Basic Features – Tabs
- Add Tab Pane.
- Tabs Position to change where the tab header will be displayed, with respect to the content.
- Default Pane Index – to set the tab to be opened by default.
- Set Tab order for the display order.
Basic Features – Tab Pane
- Title – Provide title to the tab
- Disabled – Not allowing users to view or perform any operation on the tab
When to use tabs:
- To organize content at a high level
- To alternate between views within the same context
- To logically chunk the content behind the tabs
- When users don’t need to see content from multiple tabs simultaneously
See below for usage example
- to navigate to previous tab pane:
- to navigate to next tab pane:
- to navigate to a specific tab pane:
- to select to a specific tab pane:
Step 1:- (Prepare data and widgets)
- Create three variables of type ‘Employee’ entity and for 1st variable from variables tab select the variable and go to data tab and for deptid keep value as 1, do the same for others also as deptid 4, 2 for respective variables, name these variables as ‘EngineeringEmployeesData’, ‘SalesEmployeesData’, ‘MarketingEmployeesData’. Learn how to create variables from here.
- Drag n Drop Tab widget. By default, you will see a tab with 3 tab panes.
- Name ‘Tab’ widget as ‘EmployeesTab’ and name tab panes as ‘engineeringEmpPane’, ‘salesEmpPane’, ‘marketingEmpPane’.
- Change tab panes titles to ‘Engineering’, ‘Sales’, ‘Marketing’.
- Drop ‘List’ widget in each of these tabs and bind to respective variables and map template widgets to respective fields.
- Drop three buttons and name the first button as ‘previousBtn’, the second one as ‘nextBtn’ and last one as ‘goToSalesBtn’ and also change the titles to ‘Previous’, ‘Next’, ‘Go To Sales’.
Step 2:- (Scripting with tabs)
Step 3:- (Run)
- Run the application by default first tab pane is opened by default.
- Click on ‘nextBtn’ and see the ‘salesPane’ will be opened.
- Click on ‘previousBtn’ and see the ‘engineeringPane’ will be opened.
- Click on ‘goToSalesBtn’ and see the ‘salesPane’ will be opened.
|Name||The name is a unique identifier for tab.|
|Add Tab Pane||This action allows one to add multiple panes to the Tab.|
|Height||The height of tab can be specified in px or % (i.e 50px, 75%).|
|Tab Position||This property determines if the tabs should be displayed on the
|Default Pane Index||This property sets the default active pane on a load of the widget based on the provided index. The tab index is an integer starting from 0, 1, 2 and so on. That is, setting this property to 0 will display the first tab pane; setting to 1 will display the second tab pane.|
|Show||Showing determines whether or not a component is visible. It is a bindable property.|
|Load on Demand
(visible only when show property is bound to a variable)
|When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.|
|Transition||This property defines the transition effect to be applied when switching tabs. You can choose from none or slide. When the transition property is
|Horizontal Align||Set text alignment horizontally, can be left, center or right.|
|Tab Order||The order of the Tabs can be changed using the arrow icons next to the tab names.|
SubWidget of Tabs, to hold the tab content
|Title||This property defines the heading or title for the tab panes.|
|Name||The name is a unique identifier for tab pane.|
|Badge Value||Value to be displayed in the badge span for the tab pane|
|Badge Type||The property controls the color of the badge. These values are:
|Tab Index||The tab index attribute specifies the tab order of an element. You can use this property to change the default tabbing order for widget access using the tab key. The value can range from 0 to 32767. The default is 0 and -1 makes the element non-focusable.
NOTE: In Safari browsers, by default, Tab highlights only text fields. To enable Tab functionality, in Safari Browser from Preferences -> Advanced -> Accessibility set the option “Press Tab to highlight each item on a webpage”.
|Content||Inline content or Partial page’s content to be included in the widget.|
|Show||Showing determines whether or not a component is visible. It is bindable.|
|Disabled||If the disabled property is true (checked) the value of the editor cannot change. The widget becomes display-only. It is bindable.|
|Title Icon Class||This property can assign an icon for the pane.|
|On load||This event handler is called when the widget is loaded.|
|On select||This event handler is called when the tab is selected.|
|On deselect||This event handler is called when the tab is deselected.|