Menu widget and tabs

Community Usage questions
2

Hi,

Tab selection is defined by the value of the parent container (0 = first tab, 1 = second tab, etc). A tab can be completely hidden by setting its visible property to false.

Changing tab selection with a menu can be done using its script property (see docs) :

if (value == "some_menu_value") {
  set("tab_parent_id", DESIRED_TAB_INDEX)
}

If the menu’s values are ordered numbers we can use the value directly:

  set("tab_parent_id", value - 1) // assuming lowest value is 1

Handling the visibility can be done many ways, here’s one: we can make each tab’s visibility depend on the parent’s value:

  • tab 1: #{@{parent} == 0} (will return true if the first tab is selected, false otherwise)
  • tab 2: #{@{parent} == 1} (will return true if the second tab is selected, false otherwise)
  • etc

Another solution would be to simply hide the panel’s tab navigation with css and use text widgets as labels in tabs (thus making tabs visible only when selected).

Here is a session file that demonstrates both cases: tab_menu.json (17.6 KB)
Relevant properties:

  • case 1
    • menu_1.script
    • tab_1.visible, tab_2.visible, etc
  • case 2
    • menu_2.script
    • panel_2.css