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
VINODKUMAR REDDY KALUVAVINODKUMAR REDDY KALUVA 

Standard Opportunity Edit Page layout style in lightning component

How can I get standard Opportunity page layout style with sections and like below in Lightning, If you have any references please let me know.

And I'm using  lightning:recordedform for designing custom page but I don't know how to put sections and same like below :

User-added image

 <lightning:recordEditForm recordId="{!v.recordId}"
                                  objectApiName="Opportunity" onsuccess="{!c.handleSuccess}">

   <lightning:inputField fieldName="Name" />

 <lightning:button class="slds-m-top_small" type="submit" label="Save" />
Khan AnasKhan Anas (Salesforce Developers) 
Hi Vinod,

Greetings to you!

You can use <div class="slds-section slds-is-open"> for section. Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm recordId="5007F00000SbdGaQAJ" objectApiName="Case">
            <lightning:messages />
            <div class="slds-section slds-is-open">
                <h3 class="slds-section__title slds-theme_shade">
                    <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Section - 1</span>
                </h3>
                <br/>
                <div class="slds-grid slds-wrap slds-text-align_center custom-container">
                    <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">
                        <lightning:inputField fieldName="AccountId"/>
                    </div>
                    <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">
                        <lightning:inputField fieldName="ContactId"/>
                    </div>
                    <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">
                        <lightning:inputField fieldName="Origin" />
                    </div>
                </div>
                
                <div class="slds-section slds-is-open">
                    <h3 class="slds-section__title slds-theme_shade">
                        <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Section - 2</span>
                    </h3>
                    <br/>
                    <div class="slds-grid slds-wrap slds-text-align_center custom-container">
                        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">
                            <lightning:inputField fieldName="Status" />
                        </div>
                        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">
                            <lightning:inputField fieldName="Priority" />
                        </div>
                        <br/>
                        <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
                    </div>
                </div>
            </div>
        </lightning:recordEditForm>
    </div>
</aura:component>

CSS: 
.THIS {
}

.THIS .slds-section__title{
    background-color: #1589ee;
    color: white
}

Application: 
<aura:application extends="force:slds">
    <c:RecordEditFormTest/>
</aura:application>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas