axTabs

Description

axTabs allows the functionality to add tabs into the 5250 screen.

Usability

Context

Supported

Input screen fields

No

Output screen fields

No

Input subfile fields

No

Output subfile fields

No

New screen elements

Yes

Properties

Name

Description and Comments

JavaScript

Shipped default

orientation

Indicates whether the tabs will be displayed vertically or horizontally.

Excluding Material Design theme.

Yes. Must return a string.

Horizontal

collapseContent

Indicates whether the contents of the tab will collapse when the tab name is clicked or hovered.

Excluding Material Design theme.

Yes. Must return a Boolean.

False.

openOnMouseOver

Additional style properties that should be applied to the button. 

Excluding Material Design theme.

Yes. Must return a Boolean.

False.

sortable

Indicates whether the editing function of the camera will be enabled. The editing features are device specific.

Excluding Material Design theme.

Yes. Must return a Boolean.

False.

keepLastActiveTab

Indicates whether the last active tab will be remembered when leaving and re-entering the screen.

Yes. Must return a Boolean.

False.

enabled

Indicates whether this element is enabled.

TS2 only.

Yes. Must return a Boolean.

True.

Notes, Comments and Warnings

Display position of extensions added inside the tab is absolute. Therefore, drag and dropping an extension inside the tab will not change its position in the screen. Changing the orientation property will not automatically realign or reposition the existing extensions already added in the tabs.

Only extensions already in the screen can be added into the tab. Drag and dropping any extension from the Extensions list of the Extensions tab will just add the extension into the screen and not into the tab. So for new extensions, first insert it into the screen and then drag and drop it into the tab.

Just like any other extensions, the display of the axTabs extension will change automatically with any jQuery themes that is set.

Examples

Add/Delete tab

Adding and deleting tabs can only be done using the “+” and “-” buttons located at the bottom of the extension.

Image

The “-” button is disabled when only one tab exist. It will be enabled once the number of tabs is greater than one.

Image

Clicking the “+” button will display the Tab Name dialog where you can input the name of the tab to be added.

Image

Clicking OK on the dialog above will add the new tab with the name you indicated in the input box.

Clicking the “-” button will delete the currently active tab. The active tab is the currently opened tab. If there are extensions in the tab to be deleted, the following confirmation dialog will be displayed.

Image

Clicking on the Delete button will perform the deletion of all the extensions currently added inside the tab to be deleted. Choosing Save on the other hand will move the extensions from the Tabs extension back into the screen.

Changing tab name

Double-clicking the tab name of a tab will display the Tab Name dialog. Using the input box, you can change the name of the tab.

Image

Sorting tabs

Tabs can be sorted by dragging and dropping it on your desired position.

On user mode, the sortable property can be set to true, to allow the user to sort the tabs on the screen.

Adding/Removing extensions

Adding extensions can also be done using drag and drop. In order for the extension to be added into the tab, the extension should first be added into the screen.

Image

Multiple extensions can be added at the same time by selecting the extensions using the CTRL key or by mouse. After selection, just drag and drop the extensions into your desired tab.

Image

To remove an extension from a tab, just drag and drop the extension outside of the tab.

Image

Another method is to right-click on the extension which will display the “Remove” popup menu.

Image

Clicking on the Remove menu will remove the extension from the tab but the position of the extension will not change.

Multiple extensions can be removed from the tab using drag and drop or the Remove menu. This can be done by first selecting the extension using multiple selection and then right-clicking or dragging them out of the tab.

Image

Tabs inside tabs

The axTabs extension can be added inside another axTab extension. Just add the axTabs into another axTabs extension as you would any other extension.

Image

Drag and dropping extensions to and from tabs is also supported.

Administrators

Legal Mentions

aXes is brought to you by:

LANSA

Serving the IBM i community for 30 years.