{"id":1102,"date":"2024-09-11T18:02:00","date_gmt":"2024-09-11T23:02:00","guid":{"rendered":"https:\/\/automatethemundane.com\/index.php\/2024\/09\/11\/configuring-the-modern-tab-control-with-buttons-for-enhanced-navigation\/"},"modified":"2024-09-11T18:02:00","modified_gmt":"2024-09-11T23:02:00","slug":"configuring-the-modern-tab-control-with-buttons-for-enhanced-navigation","status":"publish","type":"post","link":"https:\/\/automatethemundane.com\/index.php\/2024\/09\/11\/configuring-the-modern-tab-control-with-buttons-for-enhanced-navigation\/","title":{"rendered":"Configuring the Modern Tab control with buttons for enhanced navigation"},"content":{"rendered":"\n

I really like the Modern Tab control. It is one of the simplest controls to use but provides canvas apps an excellent UI improvement. However, for some users, the highlighted tab is not apparent. They want a next and back button to move the user between tabs. This is a fairly simple build that works well for most customers.<\/p>\n\n\n

Tab Collection<\/h1>\n\n\n

The first step will be to create a demo collection and set a variable called varSelectedTab<\/p>\n\n\n

ClearCollect(\n    colTabItems,\n    [\n        {\n            Name: "Tab 1",\n            Order: 1\n        },\n        {\n            Name: "Tab2",\n            Order: 2\n        },\n        {\n            Name: "Tab 3",\n            Order: 3\n        }\n    ]\n);\nSet(\n    varSelectedTab,\n    1\n)<\/code><\/pre>\n\n\n
\"\"\/<\/figure>\n\n\n
Screen Items<\/h2>\n\n\n
The screen will consist of a container, a tablist, three text boxes, a second container, and two buttons within the second container. <\/p>\n\n\n
Tablist<\/h3>\n\n\n
The Items will be set to the colTabItems that are sorted in ascending order. <\/p>\n\n\n
\"\"\/<\/figure>\n\n\n
Sort(colTabItems,Order,SortOrder.Ascending)<\/code><\/pre>\n\n\n
The Onselect of each tab will set the variable varSelectedTab to the tab being selected. <\/p>\n\n\n
\"\"\/<\/figure>\n\n\n
Set(\n    varSelectedTab,\n    tabListTC.Selected.Order\n)<\/code><\/pre>\n\n\n
Finally, the Default Selected Items will be a lookup to the colTabItems Order Column that matched the varSelectedTab<\/p>\n\n\n
\"\"\/<\/figure>\n\n\n
💡 The Default Selected Items is the key to making this work. If it is not set, it will all work, but the tab will not be highlighted<\/p>\n\n\n
LookUp(\n    colTabItems,\n    Order = varSelectedTab\n)<\/code><\/pre>\n\n\n
Text Boxes<\/h3>\n\n\n
\"\"\/<\/figure>\n\n\n
Each of the text boxes will contain the following text , Tab Item 1, 2, and 3 respectively. The visibility of each will be decided upon by the tab currently selected. <\/p>\n\n\n
\"\"\/<\/figure>\n\n\n
If(tabListTC.Selected.Order = 1,true,false) <\/code><\/pre>\n\n\n
Buttons<\/h3>\n\n\n
Set the text of the left button to Back, and the right button to Next. Set the visibility of the Back button to be hidden if the selected tab is equal to one. Set the visibility Next button to be hidden if the tab selected is equal to the maximum amount of rows in colTabItems. Then the OnSelect of each button will set varSelectedTab to either +1 or -1.<\/p>\n\n\n
\n
\n
Back - Visible<\/strong><\/p>\n\n\n
If(\n    varSelectedTab = 1,\n    false,\n    true\n)<\/code><\/pre>\n\n\n
Back - OnSelect<\/strong><\/p>\n\n\n
Set(\n    varSelectedTab,\n    varSelectedTab - 1\n)<\/code><\/pre>\n\n<\/div>\n\n\n
\n
Next - Visible<\/strong><\/p>\n\n\n
If(\n    varSelectedTab = Max(CountRows(colTabItems)),\n    false,\n    true\n)<\/code><\/pre>\n\n\n
Next - OnSelect<\/strong><\/p>\n\n\n
Set(\n    varSelectedTab,\n    varSelectedTab + 1\n)<\/code><\/pre>\n\n<\/div>\n\n<\/div>\n\n\n
This is in practice is a great way to give users another way to utilize the tab control to its fullest extent. <\/p>\n\n","protected":false},"excerpt":{"rendered":"
I really like the Modern Tab control. It is one of the simplest controls to use but provides canvas apps an excellent UI improvement. However, for some users, the highlighted tab is not apparent. They want a next and back button to move the user between tabs. This is a fairly simple build that works […]<\/p>\n","protected":false},"author":1,"featured_media":1099,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,47],"tags":[],"class_list":["post-1102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-app","category-modern-controls","entry","has-media"],"jetpack_featured_media_url":"https:\/\/automatethemundane.com\/wp-content\/uploads\/2024\/09\/photo-1471666875520-c75081f42081-scaled.jpg","_links":{"self":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/1102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/comments?post=1102"}],"version-history":[{"count":0,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/1102\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media\/1099"}],"wp:attachment":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media?parent=1102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/categories?post=1102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/tags?post=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}