Skip to main content
September 28, 2022
Question

How to add multiple choices (expressions) dynamically to Choice?

  • September 28, 2022
  • 8 replies
  • 1 view

Hi All,

I'm trying to add multiple choices to the choose function dynamically. My interfaces are dynamic , I tried displaying interfaces dynamically using a!forEach() but failed to achieve.

choose(

local!selectedTab,

interface 1,

interface 2

interface 3,

.

.

.

.

.interface n

)

Thanks.

    8 replies

    gabriele.camilli
    September 28, 2022

    Hi, it's  not clear to me what you are trying to achieve and which is the blocker, can you add some information?

    Participating Frequently
    September 28, 2022

    Check this out .

    {
      a!localVariables(
        /* Defines whether or not to collapse the side nav */
        local!collapseNav: false,
        /* The selected navigation section */
        local!activeCollapsibleNavSection: 1,
        /* The navigation sections */
        local!collapsibleNavSections: {
          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!collapsibleNavSections,
                    expression: if(
                      local!collapseNav,
                      {
                        a!richTextDisplayField(
                          value: {
                            a!richTextIcon(
                              icon: fv!item.icon,
                              caption: fv!item.name,
                              link: a!dynamicLink(
                                value: fv!index,
                                saveInto: local!activeCollapsibleNavSection
                              ),
                              linkStyle: "STANDALONE",
                              color: if(
                                fv!index = local!activeCollapsibleNavSection,
                                "ACCENT",
                                "SECONDARY"
                              ),
                              size: "LARGE"
                            )
                          },
                          align: "CENTER",
                          accessibilityText: if(
                            fv!index = local!activeCollapsibleNavSection,
                            fv!item.name & " " & "selected",
                            ""
                          )
                        )
                      },
                      a!cardLayout(
                        contents: a!sideBySideLayout(
                          items: {
                            a!sideBySideItem(
                              item: a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: a!richTextIcon(
                                  icon: fv!item.icon,
                                  color: "SECONDARY",
                                  size: if(local!collapseNav, "LARGE", "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!activeCollapsibleNavSection,
                                    "STRONG",
                                    "PLAIN"
                                  )
                                )
                              ),
                              showWhen: not(local!collapseNav)
                            )
                          },
                          alignVertical: "MIDDLE"
                        ),
                        link: a!dynamicLink(
                          value: fv!index,
                          saveInto: local!activeCollapsibleNavSection
                        ),
                        style: if(
                          fv!index = local!activeCollapsibleNavSection,
                          "ACCENT",
                          "NONE"
                        ),
                        showBorder: false,
                        accessibilityText: if(
                          fv!index = local!activeCollapsibleNavSection,
                          fv!item.name & " " & "selected",
                          ""
                        )
                      )
                    )
                  ),
                  a!richTextDisplayField(
                    value: a!richTextIcon(
                      icon: if(
                        local!collapseNav,
                        "angle-double-right",
                        "angle-double-left"
                      ),
                      caption: if(
                        local!collapseNav,
                        "Expand navigation bar",
                        "Collapse navigation bar"
                      ),
                      link: a!dynamicLink(
                        value: not(local!collapseNav),
                        saveInto: local!collapseNav
                      ),
                      linkStyle: "STANDALONE",
                      color: "SECONDARY",
                      size: "MEDIUM"
                    ),
                    align: "CENTER"
                  ),
                  /* 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: if(local!collapseNav, "EXTRA_NARROW", "NARROW")
              ),
              a!columnLayout(
                contents: {
                  /* Conditionally display selected navigation section.       *
                   * Sections are created individually here because they will *
                   * have varying contents, so if you change the list in      *
                   * local!collapisbleNavSections, you will need to make sure *
                   * the list of sections here is the correct length.         */
                  choose(
                    local!activeCollapsibleNavSection,
                    a!sectionLayout(
                      label: index(
                        local!collapsibleNavSections.name,
                        local!activeCollapsibleNavSection,
                        ""
                      ),
                      contents: {}
                    ),
                    a!sectionLayout(
                      label: index(
                        local!collapsibleNavSections.name,
                        local!activeCollapsibleNavSection,
                        ""
                      ),
                      contents: {}
                    ),
                    a!sectionLayout(
                      label: index(
                        local!collapsibleNavSections.name,
                        local!activeCollapsibleNavSection,
                        ""
                      ),
                      contents: {}
                    ),
                    a!sectionLayout(
                      label: index(
                        local!collapsibleNavSections.name,
                        local!activeCollapsibleNavSection,
                        ""
                      ),
                      contents: {}
                    ),
                    a!sectionLayout(
                      label: index(
                        local!collapsibleNavSections.name,
                        local!activeCollapsibleNavSection,
                        ""
                      ),
                      contents: {}
                    ),
                    a!sectionLayout(
                      label: index(
                        local!collapsibleNavSections.name,
                        local!activeCollapsibleNavSection,
                        ""
                      ),
                      contents: {}
                    )
                  )
                }
              )
            },
            spacing: "SPARSE",
            showDividers: true
          )
        }
      )
    }
    

    September 28, 2022

    Hi Ujjwal, 

    as per your example, In my case number of sections are dynamic , meaning number sections will be added by user based on button click

    Participating Frequently
    September 28, 2022

    Okay but how will you create the interfaces based on your dynamic numbers are you thinking to use the same interface for all ?