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
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.