Tips & Tricks - Tab Menu from Buttons

In addition to the tab menu, which can be defined via a page's Properties dialog and then groups multiple pages together, a tab menu can be created within a page using buttons—for example, to display contact information in a clear and organized manner. In addition, clicking on the tabs allows you to perform actions such as saving the data.

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

All contact information can be entered on the input page.

The "Home," "Office," "Phone," and "Online" pages are loaded using the buttons shown above. The tab menu can be created on one of the view pages and copied to the other pages later. It is important to change the button type to "Text. " To ensure that the buttons are later displayed as separate tabs in the browser, they must be arranged one below the other. Otherwise, they will be displayed in a tab.

The buttons must be grouped together in a transparent group. In the grouping's Properties dialog, on the "Options" tab, change the HTML element to "Unordered List."

On the "View" tab, the "TAB_MENU" style class is assigned.

Now, the custom style "padding-left:0;" is needed, which is created as a CSS rule. This means that the tab menu is not centered on the page, but starts at the left margin. The group can now be copied in its entirety to the other view pages.

To help users navigate more easily, it is helpful to adjust the style class of the button so that it links to the current page—for example, the "Private" button on the Private view page, the "Office" button on the Office view page, and so on. This is formatted in bold by setting the style to "Link_Strong." This way, the user can see at a glance which page they are on.

The result looks very similar to the classic tab menu, but is now centered on the page.