when we will select the any one of available pets check boxes then after click the arrow symbol immediately the selected pets are visible on right side only.
when we will select cancel symbol selected pets portion should be null i.e, like current interface.
Anybody please help me out in this.
thank you
Discussion posts and replies are publicly visible
You can take reference from below code
a!localVariables( local!availablePets: { { pet: "Dog", id: 1 }, { pet: "Cat", id: 2 }, { pet: "Horse", id: 3 }, { pet: "Fish", id: 4 } }, local!selectedPet, local!showSelectedPets, { a!columnsLayout( columns: { a!columnLayout( contents: { a!checkboxField( label: "Avaialble Pets", labelPosition: "ABOVE", choiceLabels: local!availablePets.pet, choiceValues: local!availablePets.id, value: local!selectedPet, saveInto: local!selectedPet, validations: {}, choiceStyle: "CARDS" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "arrow-right", color: "ACCENT", link: a!dynamicLink( saveInto: a!save(local!showSelectedPets, true), showWhen: a!isNotNullOrEmpty(local!selectedPet) ), linkStyle: "STANDALONE" ) }, marginAbove: "EVEN_MORE" ), a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "remove", color: "NEGATIVE", link: a!dynamicLink( saveInto: { a!save(local!showSelectedPets, false), a!save(local!selectedPet, null) } ), linkStyle: "STANDALONE" ) } ) }, width: "EXTRA_NARROW" ), a!columnLayout( contents: { a!forEach( items: local!selectedPet, expression: a!sectionLayout( label: local!availablePets.pet[fv!index], contents: { /*Add content*/ }, isCollapsible: true, marginAbove: "STANDARD" ) ) }, showWhen: or(local!showSelectedPets) ), a!columnLayout( showWhen: not(or(local!showSelectedPets)) ) } ) } )
If you don't want to remove the selected choices in checkbox on cancel then you can comment/remove the save on Line 53.
Thank you very much