Tips & Tricks - Button tab menu
In addition to the tab menu, which can be defined in the properties dialog of a page to collate multiple pages, you can create a tab menu on a page using buttons to display contact data clearly - like in our example application. With this approach, actions (such as saving the data) can also be performed when the user clicks on one of the tabs.
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 switch the buttons' 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 style class "TAB_MENU" is then assigned on the Style tab.
The custom modification "padding-left:0;" is now required; this 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 users to know where they are, adjusting the style class for the current tab can be helpful (the "Private" button on the view page "Private", the "Office" button on the view page "Office" etc.). This is done by making them bold with the style class "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.