Appian Community and Appian Academy are being upgraded. As a part of the upgrade, Appian Community is currently in read-only mode, and user registration is disabled until August 3. We apologize for any inconvenience this may cause, but a more secure, stable, and performant Community experience is coming soon!

The new Appian Community launches August 3, followed by Appian Academy on August 7. During the migration, Appian Community Edition, Appian Academy, Documentation, Certifications, Instructor-led Customer Training, Partner Sales Training & Accreditation, and Forum (for Appian Partners and Customers only) will remain available.
  • State Verified Answer
  • Replies 8 replies
  • Subscribers 7 subscribers
  • Views 3985 views
  • Users 0 members are here
Related Discussions
Home » Discussions » General

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

Rajesh Mahenderkar
Certified Lead Developer

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.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    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
      )
    }
  )
}

  • 0
    Certified Lead Developer
     in reply to ujjwalr0002

    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

  • 0
    Certified Lead Developer
     in reply to Rajesh Mahenderkar

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

  • 0
    Certified Lead Developer
     in reply to Rajesh Mahenderkar

    see example below: 

    I want to repeat box layouts dynamically.

    a!localVariables(
    local!selectedMaterialIndex,
    {
    a!buttonLayout(
    primaryButtons : a!buttonWidget(
    label : "Add material",
    saveInto: a!save(
    ri!materials,
    append(
    ri!materials,
    "material - " & if(
    a!isNullOrEmpty(ri!materials),
    1,
    length(ri!materials) + 1
    )
    )
    )


    )
    ),

    choose(
    local!selectedMaterialIndex,
    /* interface 1*/
    a!boxLayout(
    label: "material 1",
    contents: a!textField(
    labelPosition: "ABOVE",
    saveInto: {},
    refreshAfter: "UNFOCUS",
    validations: {}
    ),
    style: "ACCENT",
    marginBelow: "STANDARD"
    ),
    /* interface 1*/
    a!boxLayout(
    label: "material 2",
    contents: a!textField(
    labelPosition: "ABOVE",
    saveInto: {},
    refreshAfter: "UNFOCUS",
    validations: {}
    ),
    style: "ACCENT",
    marginBelow: "STANDARD"
    ),
    .
    .
    .
    .
    .
    /* interface n*/
    a!boxLayout(
    label: "material n",
    contents: a!textField(
    labelPosition: "ABOVE",
    saveInto: {},
    refreshAfter: "UNFOCUS",
    validations: {}
    ),
    style: "ACCENT",
    marginBelow: "STANDARD"
    ),
    )
    }
    )

  • 0
    Certified Lead Developer
     in reply to Rajesh Mahenderkar

    Check this.

    a!localVariables(
  {
    a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Add material",
        saveInto: a!save(
          ri!materials,
          append(
            ri!materials,
            "material - " & if(
              a!isNullOrEmpty(ri!materials),
              1,
              length(ri!materials) + 1
            )
          )
        )
      )
    ),
    a!forEach(
      items: ri!materials,
      expression: a!boxLayout(
        label: "material 1",
        contents: a!textField(
          labelPosition: "ABOVE",
          saveInto: {},
          refreshAfter: "UNFOCUS",
          validations: {}
        ),
        style: "ACCENT",
        marginBelow: "STANDARD"
      )
    )
  }
)

Reply
  • 0
    Certified Lead Developer
     in reply to Rajesh Mahenderkar

    Check this.

    a!localVariables(
  {
    a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Add material",
        saveInto: a!save(
          ri!materials,
          append(
            ri!materials,
            "material - " & if(
              a!isNullOrEmpty(ri!materials),
              1,
              length(ri!materials) + 1
            )
          )
        )
      )
    ),
    a!forEach(
      items: ri!materials,
      expression: a!boxLayout(
        label: "material 1",
        contents: a!textField(
          labelPosition: "ABOVE",
          saveInto: {},
          refreshAfter: "UNFOCUS",
          validations: {}
        ),
        style: "ACCENT",
        marginBelow: "STANDARD"
      )
    )
  }
)

Children
No Data
© 2026 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.