Tips & Tricks - Tab menu from buttons

In addition to the tab menu, which can be defined via the properties dialog of a page and then combines several pages, a tab menu can be created in a page with buttons - e.g. to display contact data clearly. With this approach, actions (such as saving the data) can also be performed when the user clicks on one of the tabs.

You can download the sample application here and then import it as usual.

Contact data can be entered on the edit page.

The ""Private"", ""Office"", ""Telephone"" and ""Online"" view pages are loaded via the buttons shown in the image above. The tab menu can be created on one of the view pages and then copied to the other pages. It is important to change the button type to "Text". So that the buttons are displayed as tabs in the browser later, they need to be positioned one beneath the other; otherwise they will be displayed in one tab.

The buttons must be grouped together with a transparent grouping. In the properties dialog of the grouping, the HTML element is changed to "Unordered List" on the "Options" tab.

The style class "TAB_MENU" is assigned on the "View" tab.

Now the individual adjustment "padding-left:0;" is required, which is created as a CSS rule. With this, the tab menu will not be displayed center-aligned but left-aligned. The grouping can now be copied to other view pages.

To make it easier for the user to find their way around, a style class adjustment in the button that jumps to the current page is advantageous - i.e. the "Private" button on the Private view page, the "Office" button on the Office view page, etc. This is formatted in bold by adjusting to Link_Strong. Now the user sees which page they are on at a glance.

The result is very similar to the classic tab menu but is positioned in the middle of the page.