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