ROWTABSUBPAGES and STRAIGHTTABPAGE

#### Search Results

Search

# ROWTABSUBPAGES and STRAIGHTTABPAGE

The ROWTABSUBPAGES control allows you to switch between several Application Designer pages such as NATPAGE using tabs. The displayed number of tabs and names are dynamically set by the Natural application at runtime. A page layout may only contain a single ROWTABSUBPAGES control. If you want to render more than one ROWTABSUBPAGES control in a page layout, you have to create a modular structure using SUBCISPAGE2 controls.

Optionally, the ROWTABSUBPAGES control may contain exactly one STRAIGHTTABPAGE control as a subnode. STRAIGHTTABPAGE must be the first tab. This allows for combining ROWTABAREA behavior with ROWTABSUBPAGES behavior. Having a STRAIGHTTABPAGE as the first tab improves the loading behavior of ROWTABSUBPAGES. For an example, see the Natural for Ajax demos.

This document covers the following topics:

- Adapter Interface

- Built-in Events

- Session Management

- Performance Considerations

- ROWTABSUBPAGES Properties

- STRAIGHTTABPAGE Properties

## Adapter Interface

    1 MYTABPAGES
    2 SELECTEDINDEX (A) DYNAMIC
    2 TABITEMS (1:*)
    3 NAME (A) DYNAMIC
    3 PAGEID (A) DYNAMIC
    3 PAGENAME (A) DYNAMIC
    3 PAGEURL (A) DYNAMIC

Element | Description
--- | ---
`SELECTEDINDEX` | Set the active page. The default is "0".
`TABITEMS` | Array with a corresponding data object for each tab: `'/cisnatural/NatLogon.html&xciParameters.natsession=Local&xciParameters.natparamext=stack%3D%28LOGON+SYSEXNJX%3BCTRSBI-P%29'`
`NAME` | The visible text that is to be shown on the tab.
`PAGEID` | For each `PAGEID` in the same Application Designer subsession, a new Natural session is created. Identical `PAGEID` elements within a subsession will refer to the same Natural session. If you do not want to create a new Natural session for this tab, leave `PAGEID` empty and specify `PAGENAME` instead. See also Session Management below.
`PAGENAME` | `PAGENAME` is only required if you do not want to create a new Natural session for this tab. In this case, you must leave `PAGEID` empty. Instead, you specify the name of the page layout in `PAGENAME`. This can either be the name of the layout without the extension (such as "mylayout") or a relative path (such as "/myuicomponent/mylayout.html"). See also Session Management below.
`PAGEURL` | The URL for loading the page. Example: `'../servlet/StartCISPage?PAGEURL=/cisnatural/NatLogon.html&xciParameters.natsession=Workplace&xciParameters.natparam=stack%3D%28LOGON+SYSEXNJX%3BHELLOW-P%29'`

## Built-in Events

In case the tabs share the same Natural session (see Session Management below), an event is triggered in the Natural application as soon as a different tab is selected. With this event, the Natural application can apply the data that is required to display the page on the tab. For details, see the corresponding sample in the Natural for Ajax demos.

The name of the triggered event is `reactOnSwitchTopagename`, where pagename is the name of the layout (without the extension) which will be activated with the next event. For example, the event `reactOnSwitchToMylayout` will activate the layout named "mylayout.xml". Note the CamelCase notation for the event name. Even though the first character of the layout name is a lower-case "m", this is always an upper-case "M" within the event name.

## Session Management

With the ROWTABSUBPAGES control, you can either use the same Natural session for multiple tabs or you can use a different Natural session for each tab.

If a new Natural session is to be created for a tab, you have to specify a `PAGEID` value for this tab. In this case, the session management for the ROWTABSUBPAGES control is the same as described for the SUBCISPAGE2 control. See Session Management.

Alternatively, multiple tabs of the ROWTABSUBPAGES control can use the same Natural session. If you do not specify a `PAGEID` value, but specify a `PAGENAME` value for multiple tabs, all NATPAGE pages in these tabs will run in the same Natural session. Note that the Natural session used for the tabs is not the same Natural session as the Natural session used for the NATPAGE which contains the ROWTABSUBPAGES control. In this case, you have two different Natural sessions: one for the NATPAGE containing the ROWTABSUBPAGES control, and another for the tabs in the ROWTABSUBPAGES control.

## Performance Considerations

The performance considerations regarding when to use ROWTABAREA and when to use ROWTABSUBPAGES also apply to NATPAGE controls. See the description of the ROWTABSUBPAGES control.

With Natural applications, an additional aspect has to be considered. The ROWTABSUBPAGES control allows you to embed Natural applications which run on different servers. Regarding resources, the Natural application needs to decide which NATPAGE in a "tab" is to use its own Natural session (see also Session Management above).

## ROWTABSUBPAGES Properties

Basic
pagesprop | Name of the adapter parameter that provides the content of the control | Obligatory |
triggerserver | Flag indicating whether the adapter should be triggered if the user switches between pages. If set to true, method trigger() inside the TABSUBPAGESInfo object is called - before switching the page. Therefore the adapter can abort a page switch - maybe a user has to enter some data first on the current page before switching to another one. | Optional | true false
height | Height of the control. There are three possibilities to define the height: (A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content. (B) Pixel sizing: just input a number value (e.g. "20"). (C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 150 200 250 300 250 400 50% 100%
scrollable | If set to "true" then small icons will appear on the right border of the control. If the size of the "tabs" is too big and some tabs are cut as consequence then you can use these icons for scrolling left and right. | Optional | true false
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
fastbufferswitch | If this property is switched to "true" (default is "false") then the contained subpages are buffered in a way that switching between tabs is not done by loading a new page but by just switching the visibility of pages. Please pay attention to that switching between pages in this case does not reload the page content from the server when switching! In order to enable fast switching you have to set the framebuffersize in cisconfig (n +1), n being the number of tabs to switch. | Optional | true false
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
Appearance
borderwidth | Border width (in pixels) of the sub-page that is contained inside this control. Define "0" to avoid rendering any border. | Optional | 1 2 3 int-value
leftindent | Inserts a horizontal distance left of the first "tab" and shifts the "tabs" to the right as consequence. The value you may define represents the number of pixels that are inserted. | Optional | 1 2 3 int-value
paddingleft | Number of pixels which you want to keep as margin between the tab control's left border and the inner sub page. Default is 5 pixel. | Optional | 1 2 3 int-value
paddingtop | Number of pixels which you want to keep as margin between the upper tab row and the inner sub page. Default is 5 pixel. | Optional | 1 2 3 int-value
paddingright | Number of pixels which you want to keep as margin between the tab control's right border and the inner sub page. Default is 5 pixel. | Optional | 1 2 3 int-value
paddingbottom | Number of pixels which you want to keep as margin between the bottom of the tab control and the inner sub page. Default is 5 pixel. | Optional | 1 2 3 int-value
pagestyle | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

## STRAIGHTTABPAGE Properties

Basic
id | Id of the TABPAGE. Each page has an id that refers to the PAGE1 .. PAGE9 definition inside the ROW/COLTABAREA control that contains the TABPAGE. Clicking a "tab" will display the TABPAGE with the associated id. | Obligatory |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |

### On this page

- Adapter Interface
- Built-in Events
- Session Management
- Performance Considerations
- ROWTABSUBPAGES Properties
- STRAIGHTTABPAGE Properties