UI Validation

Question

Hi Team, just got this Requirement So when i click the Collaspe all button The box layout which is below should get Collapsed. 
 Any one can help me with this 
 I made like after clicking this button a local variable is changed to true and after that i wrote that in iscollapsible condition but not working

ujjwalrathore · Answer

Hi, FYI 
 
 You can create a custom card layout similar to the box layout and use that to achieve this. 
 a!localVariables(
 local!isInitiallyCollapsed: false(),/*can not be null*/
 {
 a!buttonArrayLayout(
 buttons: a!buttonWidget(
 label: if(
 local!isInitiallyCollapsed,
 "SHOW ALL",
 "COLLAPSE ALL"
 ),
 saveInto: a!save(
 local!isInitiallyCollapsed,
 not(local!isInitiallyCollapsed)
 )
 )
 ),
 a!cardLayout(
 contents: {
 a!sideBySideLayout(
 items: {
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 align: "LEFT",
 value: { a!richTextItem(text: "BOX 1", ) }
 )
 ),
 a!sideBySideItem(
 showWhen: not(
 rule!BCT_IsBlank(value: local!isInitiallyCollapsed)
 ),
 item: a!richTextDisplayField(
 align: "RIGHT",
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(
 showWhen: local!isInitiallyCollapsed = false,
 icon: "minus-square",
 caption: "Collapse",
 color: "ACCENT",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isInitiallyCollapsed, true)
 }
 )
 ),
 a!richTextIcon(
 showWhen: local!isInitiallyCollapsed = true,
 icon: "plus-square",
 caption: "Expand",
 color: "ACCENT",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isInitiallyCollapsed, false)
 }
 )
 )
 }
 )
 )
 }
 ),
 if(
 local!isInitiallyCollapsed = true,
 {},
 {
 a!sectionLayout(divider: "ABOVE", marginBelow: "NONE"),
 a!textField(label: "TEST"),
 /* Create a interface and resue it for the below code*/
 a!cardLayout(
 contents: {
 a!sideBySideLayout(
 items: {
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 align: "LEFT",
 value: { a!richTextItem(text: "BOX 2", ) }
 )
 ),
 a!sideBySideItem(
 showWhen: not(
 rule!BCT_IsBlank(value: local!isInitiallyCollapsed)
 ),
 item: a!richTextDisplayField(
 align: "RIGHT",
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(
 showWhen: local!isInitiallyCollapsed = false,
 icon: "minus-square",
 caption: "Collapse",
 color: "ACCENT",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isInitiallyCollapsed, true)
 }
 )
 ),
 a!richTextIcon(
 showWhen: local!isInitiallyCollapsed = true,
 icon: "plus-square",
 caption: "Expand",
 color: "ACCENT",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isInitiallyCollapsed, false)
 }
 )
 )
 }
 )
 )
 }
 ),
 if(
 local!isInitiallyCollapsed = true,
 {},
 {
 a!sectionLayout(divider: "ABOVE", marginBelow: "NONE"),
 a!textField(label: "TEST")
 }
 )
 },
 
 )
 }
 )
 },
 
 )
 }
)

UI Validation

Top Replies