Tabs

Tabs are designed to consolidate multiple pages into a single screen, allowing users to navigate easily. Each tab holds associated screens and navigation information. Clicking on a different tab enables users to transition to a different screen within the same browser window.

• How to Create:

1. Choose Tabs type in New Component Popup Screen, and then click Next button. (Step1)
2. Enter the Component Name, the name displayed on the Screen (Symbolic String or Custom Name) and then choose the created Business Object,then click Next button.

INFO

Since data connection is not required, the Business Object selection in Step2
and the Field Mapping in Step4 are skipped.

• Applicable List of Component Attributes

  1. Style - Text Color: Set the Tab Control's text font color.
  2. Style - Background Color: Set the background color for the Component.
  3. Style - Flat Appearance: Configures the size and color of the bord

• Available List of Services

  Name	Platform	Description
  Tab-click	Web	Event that occurs when clicking on Tab Component

  Tab Service is actually rarely used. However, sometimes a Tab-click Service is registered to indicate the event of click on a tab.

  1. Tab-click: Event that occurs when clicking on the Tab Component.

  INFO

  The characteristics of the Tab-click Event Service and Action Design involve utilizing Check Action and Lambda Action to distinguish information related to clicking on a specific tab and implementing the events to be performed upon Tab Click. Typically, Reload Action of the connected Component is registered to reload data instantly upon clicking the tab.

  

• Available List of Controls

  1. Tab Pane: It refers to the control representing each tab individually.

  Appendix: How to Use Tab Componenet to connect Multiple Components at the Bottom of a detailed screen.

  [Image1. Configured Example Screen]
  

  

  [Image2.  Schematic Representation of Components related to Tab Configuration.]
  

  

  2. When loading Component(①) inside the Screen, set the parameters for querying the data of the Component(③) to be connected via Component-Interface Action, and the Reload Flag of the Optional attribute to Yes.

  

  3. Set up the TabPane Control in the Canvas(Detail) of the Tab Component for the number of Components to be connected.

  

  4. Register all the Components to Tab Component(②) with the Screen where Component(①) is registered. Set the Tab Pane of Component(③) to the TabPane of Tab Component(②) in its Tab Pane Id.

  

  INFO

  Tab Pane Id can be registered in the Component Attribute, but it is not appropriate for one Component to be connected to multiple Screens. Therefore, we use the Tab Pane Id of the Related Component List property, which is a sub-property of the Screen.

  5. Register Check Action (to check paremeter value existence) and Data Retrieval Lambda Action in the Load Service of the Component(③) connected to the Tab, using the Target Parameter set in step a

  [Image1. The configuration screen for the load service of the connected component.]
  

  

  [Image2. The Check Action in the above diagram.]
  

  

  [Image3. Basic Information for Lambda Data Retrieval in Image1]
  

  

  [Image4. The screen for setting the Data Retrieval Key value in Image 1.]