1

I have a Component that replicates a section in a layout:

<aura:component>
<aura:attribute name="title" type="String"/>
<div class="slds-section slds-is-open" aura:id="collapsibleSectionContainer" style="background: white; padding: 0.3rem;">
    <h3 class="slds-section__title slds-theme_shade">
        <lightning:buttonStateful labelWhenOff="{!v.title}"
                                    labelWhenOn="{!v.title}"
                                    iconNameWhenOff="utility:chevrondown"
                                    iconNameWhenOn="utility:chevronright"
                                    onclick="{!c.handleSectionHeaderClick}"
                                    class="slds-section__title-action" />
    </h3>
    <div class="slds-section__content" >
        {!v.body}
    </div>
</div>

The result will look like this: enter image description here

Exactly like a page layout.

When using standard page layout, the user can collapse one of the sections, and the app will "remember" his choice for the next time the screen is being loaded.

How can i replicate this in lightning?

1 Answer 1

3
  1. Create dependency on single attribute such as buttonstate which decided whether section is opened or closed
  2. You can use localStorage to store user preferences in browser cache - this will not expire
  3. You have use attribute which stores unique names such as name which is used to identify whether the particular section is opened or closed. You can assign Id of record plus title to make it unique.

Below is the sample code:

COMPONENT:

<aura:attribute name="title" type="String" default="My Section"/>
<aura:attribute name="name" type="String" default="UniqueName" />
<aura:attribute name="buttonstate" type="Boolean" access="private" default="false"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<div class="{!'slds-section '+if(v.buttonstate,'slds-is-close','slds-is-open')}" aura:id="collapsibleSectionContainer" style="background: white; padding: 0.3rem;">
    <h3 class="slds-section__title slds-theme_shade">
        <lightning:buttonStateful labelWhenOff="{!v.title}"
                                  labelWhenOn="{!v.title}"
                                  iconNameWhenOff="utility:chevrondown"
                                  iconNameWhenOn="utility:chevronright"
                                  onclick="{!c.handleSectionHeaderClick}"
                                  state="{! v.buttonstate }"
                                  class="slds-section__title-action" />
    </h3>
    <div class="slds-section__content" >
        Some content
    </div>
</div>

CONTROLLER.js:

({
    doInit : function(component, event, helper) {
        if(localStorage.getItem(component.get("v.name")))
            component.set("v.buttonstate", localStorage.getItem(component.get("v.name"))==='true');
    },
    handleSectionHeaderClick : function(component, event, helper) {
        let buttonstate = !component.get('v.buttonstate');
        localStorage.setItem(component.get("v.name"),buttonstate);
        component.set('v.buttonstate', buttonstate);
    },
})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .