function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Christian Schwabe (x)Christian Schwabe (x) 

LWC: Pagelayout collapsible section

Hi everybody,

based on this article (https://metillium.com/2018/04/collapsible-section-page-layout-record-display-lightning-components/) I've tried to adapt and implement a custom page layout with collapsible sections with lightning web component.
Currently everything works fine, BUT I didn't get it to work to open and close the section with transition so that is looks really smart.

Currently the ui looks like the following:
User-added image

In comparison with the standard pagelayout there are very small differences for the layout.

The arrow looks like a fat arrow:
User-added image

Could you give me a hint how to implement a transition to that the ui looks really smoothly and how to make my custom component look like teh standard layout section?
Is there also the possibility to change the text color?

Unfortunately I have only rudimentary knowledge about CSS.

Best regards,
Christian
 
Best Answer chosen by Christian Schwabe (x)
KrishnaAvvaKrishnaAvva
Hi Christian,

You can expand multiple sections too. here is an example : https://rajvakati.com/2018/09/26/multiple-sections-with-lightningaccordion/

Regards,
Krishna Avva

All Answers

KrishnaAvvaKrishnaAvva
Hi Christian,

Please take a look at this documentation. Accordion tag will help you achieve what you are asking for. 
Example code and reference are here : https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion/example

Regards,
Krishna Avva
Christian Schwabe (x)Christian Schwabe (x)
Hi Krishna,

thanks for your response.
Your absolutely right, but unfortunately it doesn't fit my requierment because an accordion only allow one open section at once. I want to implement a component build by my Pen which has the same fubctionality as the standard detail page.

Regards,
Christian 
KrishnaAvvaKrishnaAvva
Hi Christian,

You can expand multiple sections too. here is an example : https://rajvakati.com/2018/09/26/multiple-sections-with-lightningaccordion/

Regards,
Krishna Avva
This was selected as the best answer
Christian Schwabe (x)Christian Schwabe (x)
Hi Krishna,

really nice. That is exactly what I am looking for. Your example behind the link shows an aura component, but I've verified that this is also working with lwc accordion: https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion/documentation
I didn't even know that an accordion works with multiple sections and I asked myself more than one time why this doesn't work. Now I'm smarter.

Thanks a lot for support and time. ✌🏻️

Best regards,
Chris
Christian Schwabe (x)Christian Schwabe (x)
Hi Krishna,

with your hint I am able to proceed with my plan to build a custom pagelayout with collapsible sections on lwc.
The problem is, that lightning-record-view-form looks like it doesn't allow child componens in it.

My approach looks like the following: 
<template>
    <lightning-card>
        <div class="slds-p-around_small">
      
        <lightning-tabset>
            <lightning-tab label="Details">
                <lightning-record-view-form
                    record-id="a01580000128tZRAAY"
                    object-api-name="BankAccount__c">
        
                    <lightning-messages></lightning-messages>
        
                    <lightning-accordion
                        allow-multiple-sections-open
                    >
                        <c-collapsible-section name="General">
                            <div slot="section">
                                <lightning-output-field
                                    field-name="Id"
                                    class="slds-border_bottom">
                                </lightning-output-field>
                                
                                <lightning-output-field
                                    field-name="Iban__c"
                                    class="slds-border_bottom">
                                </lightning-output-field>
                            </div>
                        </c-collapsible-section>
                    </lightning-accordion>
                </lightning-record-view-form>
            </lightning-tab>
            <lightning-tab label="Related">
            </lightning-tab>
        </lightning-tabset>
        </div>
    </lightning-card>
</template>

The c-collapsible-sections looks like the following: 
<template>
    <lightning-accordion-section
        name={name}
        label="General"
        class="title"
    >
        <slot name="section"></slot>
    </lightning-accordion-section>
</template>

The ui looks like the following (collapsed):
User-added image

The ui looks like the following (expanded):
User-added image

As you can see no lightning-output-field is displayed.

Do you know any reason for this behaviour?

Also: The lightning-tabset looks different than the standard.
The standard-tabset looks like the following:
User-added image

In my opionion it much more bigger than lightning-tabset and lightning-tab.
Do you know why?


Kind regards,
Christian