Skip to main content
April 30, 2021
Solved

How to create dynamic Tabs

  • April 30, 2021
  • 3 replies
  • 0 views

Hi All

I have a requirement to create dynamic tabs based on certain conditions.

I tried below code but is not working.

The foreach in choose section is not returning the list.

{
a!localVariables(
local!selectedTab: 1,
local!names: {"1", "2", "3"},
{
a!buttonArrayLayout(
buttons: {
a!forEach(
items: local!names,
expression: a!localVariables(
local!modified,
a!buttonWidget(
label: "Tab1 "&fv!item,
saveInto: {a!save(local!selectedTab, fv!item)},
size: "SMALL",
style: if(local!selectedTab = fv!item, "PRIMARY", "LINK")
),
)
)
}
),
{
choose(
local!selectedTab,
a!forEach(
items:local!names,
expression: a!localVariables(
a!forEach(
items: {1},
expression:{
a!textField(
label:"Enter data",
),

},
)
)
),
)
}
}

)
}

Best answer by csteward

The issue here is with the use of the choose() function, I do not believe we will be able to dynamically add choice parameters since they will be treated as one choice of a list of items. 

However, you can accomplish this in a few ways - this solution builds a list of a!sectionLayout(), which are only shown when the selectedTab matches fv!index of the a!forEach():

a!localVariables(
  local!selectedTab: 1,
  local!names: {"1", "2", "3"},
  {
    a!buttonArrayLayout(
      buttons: {
        a!forEach(
          items: local!names,
          expression: a!localVariables(
            local!modified,
            a!buttonWidget(
              label: "Tab1 "&fv!item,
              saveInto: {a!save(local!selectedTab, fv!item)},
              size: "SMALL",
              style: if(local!selectedTab = fv!item, "PRIMARY", "LINK")
            ),
          )
        )
      }
    ),
    {
      a!forEach(
        items: local!names,
        expression: a!sectionLayout(
          showWhen: fv!index=local!selectedTab,
          contents: {
            a!textField(
              label: concat("Enter Data ",fv!item)
            )
          }
        )
      )
    }
  }
)

Also, when posting code snippets please take advantage of the Insert -> Code feature for readability.

3 replies

csteward
cstewardAnswer
April 30, 2021

The issue here is with the use of the choose() function, I do not believe we will be able to dynamically add choice parameters since they will be treated as one choice of a list of items. 

However, you can accomplish this in a few ways - this solution builds a list of a!sectionLayout(), which are only shown when the selectedTab matches fv!index of the a!forEach():

a!localVariables(
  local!selectedTab: 1,
  local!names: {"1", "2", "3"},
  {
    a!buttonArrayLayout(
      buttons: {
        a!forEach(
          items: local!names,
          expression: a!localVariables(
            local!modified,
            a!buttonWidget(
              label: "Tab1 "&fv!item,
              saveInto: {a!save(local!selectedTab, fv!item)},
              size: "SMALL",
              style: if(local!selectedTab = fv!item, "PRIMARY", "LINK")
            ),
          )
        )
      }
    ),
    {
      a!forEach(
        items: local!names,
        expression: a!sectionLayout(
          showWhen: fv!index=local!selectedTab,
          contents: {
            a!textField(
              label: concat("Enter Data ",fv!item)
            )
          }
        )
      )
    }
  }
)

Also, when posting code snippets please take advantage of the Insert -> Code feature for readability.

April 30, 2021

Thanks Chris . It worked 

csteward
April 30, 2021

Great!  Feel free to mark this thread as answered if you would be so kind :)