• State Suggested Answer
  • Replies 4 replies
  • Answers 1 answer
  • Subscribers 8 subscribers
  • Views 5404 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

How to control collapsible Sections on button clicks

Aswini

Hi,

I have a scenario

I have one dashboard contains a collapsible section layout.

In that section layout, I have one button So here I need to control the collapsible section based on a button click.

For Example, If it is in expand mode then If I click on the button then it should be collapsible. 

Your suggestions are valuable.

 

 

Thanks In Advance

Aswini

  Discussion posts and replies are publicly visible

Parents
  • 0
    HI Aswini,

    Refer to the below code.


    load(
    local!value:true(),
    with(
    local!iscollpsed:local!value,
    a!dashboardLayout(
    contents:{
    a!sectionLayout(
    label:"Section 1",
    isCollapsible: local!iscollpsed,
    isInitiallyCollapsed: local!iscollpsed,
    contents:{
    a!textField(
    label:"THis is Section 1",
    readOnly: true()
    )
    }
    ),
    a!sectionLayout(
    label:"Section 2",
    isCollapsible:local!iscollpsed,
    isInitiallyCollapsed: local!iscollpsed,
    contents:{
    a!textField(
    label:"THis is Section 2",
    readOnly: true()
    )
    }
    ),
    a!buttonArrayLayout(
    buttons: {
    a!buttonWidget(
    label:"COLLAPSE ALL SECTIONS",value:true(), saveInto:local!value, showWhen:local!iscollpsed=false()
    ),
    a!buttonWidget(
    label:"EXPAND ALL SECTIONS",value:false(), saveInto:local!value, showWhen:local!iscollpsed=true()
    )
    })
    }
    ))
    )
Reply
  • 0
    HI Aswini,

    Refer to the below code.


    load(
    local!value:true(),
    with(
    local!iscollpsed:local!value,
    a!dashboardLayout(
    contents:{
    a!sectionLayout(
    label:"Section 1",
    isCollapsible: local!iscollpsed,
    isInitiallyCollapsed: local!iscollpsed,
    contents:{
    a!textField(
    label:"THis is Section 1",
    readOnly: true()
    )
    }
    ),
    a!sectionLayout(
    label:"Section 2",
    isCollapsible:local!iscollpsed,
    isInitiallyCollapsed: local!iscollpsed,
    contents:{
    a!textField(
    label:"THis is Section 2",
    readOnly: true()
    )
    }
    ),
    a!buttonArrayLayout(
    buttons: {
    a!buttonWidget(
    label:"COLLAPSE ALL SECTIONS",value:true(), saveInto:local!value, showWhen:local!iscollpsed=false()
    ),
    a!buttonWidget(
    label:"EXPAND ALL SECTIONS",value:false(), saveInto:local!value, showWhen:local!iscollpsed=true()
    )
    })
    }
    ))
    )
Children

© 2024 Appian. All rights reserved.