1

I am enhancing the app setup application to replicate Setup Assistant UI. To build the expandable setup UI. I need to store the state(Expanded/Collapsed) of the component.

Normally in Aura/LWC, I would store it in a state variable(In aura attribute or class variable) and conditionally render UI based on the state variable.

For VF components I could not find any similar approach and I'm currently relying on manually traversing DOM elements(Check the script section at bottom of sample component).

I have never worked on VF components before but I'm sure there is a trivial solution to handle these problems in VF context

I found some similar terms like <apex:attribute> and <apex:variable> but could not find an easy way to change it from JS

sample.page

<apex:page docType="html-5.0" sidebar="false" lightningStylesheets="true"> 

    <apex:slds />

    <c:sampleComponent title="section 1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </c:sampleComponent>


    <c:sampleComponent title="section 2">
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
    </c:sampleComponent>


    <c:sampleComponent title="section 3">
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
        <p>Magna voluptate elit et tempor officia et mollit ea consequat et culpa quis excepteur.</p>
    </c:sampleComponent>
</apex:page>

sampleComponent.component

<apex:component>
    <apex:attribute name="title" type="String" required="true" description=""  />

    <section class="slds-scope slds-card slds-p-around_small">
        <ol class="slds-setup-assistant">
            <li class="slds-setup-assistant__item">
                <article class="slds-setup-assistant__step">
                    <div class="slds-summary-detail slds-is-open">
                        <button class="slds-button slds-button_icon slds-m-right_x-small slds-m-top_x-small">
                            <span onclick="toggelContent(this); return false;" class="slds-icon_container" >
                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small">
                                    <use id="chevrondown" 
                                        xmlns:xlink="http://www.w3.org/1999/xlink"
                                        xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#chevrondown">
                                    </use>
                                    <use id="chevronright"
                                        class="slds-hide"
                                        xmlns:xlink="http://www.w3.org/1999/xlink"
                                        xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#chevronright">
                                    </use>
                                </svg>
                                <span class="slds-assistive-text">Toggel</span>
                            </span>
                        </button>

                        <div class="slds-container_fluid">
                            <div class="slds-summary-detail__title">
                                <div class="slds-setup-assistant__step-summary">
                                    <div class="slds-media">
                                        <div class="slds-media__body slds-m-top_x-small">
                                            <div class="slds-media">
                                                <div class="slds-setup-assistant__step-summary-content slds-media__body">
                                                    <h3 class="slds-setup-assistant__step-summary-title slds-text-heading_small">{!title}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div aria-hidden="false" class="slds-summary-detail__content" id="content">
                                <div class="slds-setup-assistant__step-detail">
                                    <apex:componentBody />
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </li>
        </ol>
    </section>


    <script>
        function toggelContent(event) {
            // TODO: Find a better way to toggle section
            event.parentElement.parentElement.classList.toggle('slds-is-open');
            event.classList.toggle('slds-icon-utility-chevronright');
            event.classList.toggle('slds-icon-utility-chevrondown');
            event.children[0].children[0].classList.toggle("slds-hide");
            event.children[0].children[1].classList.toggle("slds-hide");
        }
    </script>
</apex:component>
2

I did a sample code for section hide and show in Vf page using components.

Here is the Demo Link

VF Component

<apex:component controller="SampleCtrl"> 
    <apex:attribute name="title" type="String" description="Provide title here" />

    <apex:form id="formId" style="padding:10px;">

        <div>
            <apex:commandLink action="{!toggle}" reRender="formId" value="{!title}"/>
            <!--<apex:outputText value="{!title}"/>
            <apex:commandButton value="Click me To Expand and collapse" action="{!toggle}" reRender="formId"/> -->
        </div>

        <apex:outputPanel rendered="{!expanded}" id="pannel">
            <apex:componentBody />
        </apex:outputPanel>
    </apex:form>

</apex:component>

Vf Component controller

public class SampleCtrl {

    public Boolean expanded {get;set;}

    public PageReference toggle() {
        if(expanded == null) {
            expanded = false;
        }
        expanded = !expanded;

        System.debug('expanded : ' + expanded);
        return null;
    } 
}

And a Vf page using above component

<apex:page docType="html-5.0" sidebar="false" lightningStylesheets="true"> 

    <apex:slds />

    <c:sampleComponent title="section 1 Title">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </c:sampleComponent>


    <c:sampleComponent title="section 2 title">
       <p>Section 2 Content</p>
       <p>Section 2 Content</p>
       <p>Section 2 Content</p>
       <p>Section 2 Content</p>
       <p>Section 2 Content</p>
   </c:sampleComponent>


    <c:sampleComponent title="section 3 title">
        <p>Section 3 Content</p>
        <p>Section 3 Content</p>
        <p>Section 3 Content</p>
        <p>Section 3 Content</p>
        <p>Section 3 Content</p>
    </c:sampleComponent>
</apex:page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.