You can use choose function. Create a local variable and on click of the navigation panel on the left side set the index value to that local variable and use it to show the interface.
i hope you used foreach loop to show the left panel if not the manually set the index on each tab for the local varibal.
a!localVariables(
local!activeNavSection: 1,
local!navSections: {
a!map(name: "Workspace", icon: "briefcase"),
a!map(name: "Tasks", icon: "tasks"),
a!map(name: "Requests", icon: "paper-plane"),
a!map(name: "Calendar", icon: "calendar"),
a!map(name: "My Time", icon: "clock-o"),
a!map(name: "Expenses", icon: "money")
},
{
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!forEach(
items: local!navSections,
expression: a!cardLayout(
contents: a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextIcon(
icon: fv!item.icon,
color: if(
fv!index = local!activeNavSection,
"STANDARD",
"SECONDARY"
),
size: "MEDIUM"
),
align: "LEFT"
),
width: "MINIMIZE"
),
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextItem(
text: fv!item.name,
color: "ACCENT",
size: "MEDIUM",
style: if(
fv!index = local!activeNavSection,
"STRONG",
"PLAIN"
)
)
)
)
},
alignVertical: "MIDDLE"
),
link: a!dynamicLink(
value: fv!index,
saveInto: local!activeNavSection
),
style: if(
fv!index = local!activeNavSection,
"ACCENT",
"NONE"
),
showBorder: false,
accessibilityText: if(
fv!index = local!activeNavSection,
fv!item.name & " " & "selected",
""
)
)
),
/* This card is used to set a minimum height on the column so that the *
* divider takes up more screen space when there is minimal content. *
* Once content is added to the main column, this can be removed. */
a!cardLayout(
height: "TALL",
showWhen: not(a!isPageWidth("PHONE")),
showBorder: false
)
},
width: "NARROW"
),
a!columnLayout(
contents: {
choose(
local!activeNavSection,
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
)
)
}
)
},
spacing: "SPARSE",
showDividers: true
)
}
)
Syntax for choose function:
choose(
local!a,
{ rule!Interface_1 },
{ rule!Interface_2 },
{ rule!Interface_3 }
)
