Sign in

Tab Control

2 min read

Tab control allows you to create multiple tabs which are bound to panels in the template. Tab control inherits ‘Associated Type’ set on container controls like Group or Section. If the ‘Associated Type’ on the container is set as ‘Context Type’, it can render data related to the ItemType associated with template. If the ‘Associated Type’ is set as ‘Type’, based on the ItemType selected, Tab control can render the data related to that selected ItemType. In order to bind a panel with a tab, panel must be created with same ‘Associated Type’ as the Tab control. At runtime, while rendering the Tab control, it must have itemId available in the context, otherwise Tab control will be hidden. Tab control context itemId can be set programmatically by handling event from other collection control like Table row selection.

  • Name: It is used to uniquely identify control inside the template.
  • Label: It is used to show title on the control. It can be localized by defined Languages and Locales inside innovator.
  • Tabs: Tab can be created by entering the tab name. Each tab should be associated with a panel by selecting the existing panel from the template under ‘On Click’ column.
  • Access: It allows you to define the roles which can access control. You can configure Roles (in the form group identities) to whom this control should be shown.
  • Read Only: Based on the option selected for Read Only, control can become read-only even if you can edit the properties used inside the page with lock. You can select one of the options like ‘Yes’, ‘No’, ‘Expression’, or ‘Script’. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally make the control read-only if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If returned value is true, the control will be read-only.
  • Display Condition: Based on the option selected for Display Condition, the control will be shown or hidden in the wizard at runtime. You can select one of the options like ‘Always Show’, ‘Always Hide’, ‘Expression’, or ‘Script’. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally display the control if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If returned value is false, the control will be hidden.
  • Font: It allows you to set the required font and size for the control.
  • Margin: It allows you to set the required top, right, bottom, left margins with respect to adjacent controls.
  • OnLoad: OnLoad event allows you to write custom logic that will be executed after the data in the control is loaded. Please refer to the Template Customization section for more details.