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

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

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

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

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

yes

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

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

Try to use the code box for inserting codes.