back to resources
Place the fields of an Object in a new tab of a Record page using LWC
December 13 2021 • 5 min read

BUSINESS CHALLENGE

In Salesforce the number of fields per Object may vary from a few to many depending on the requirement.

We have both required and optional fields for every Object. The required fields should be filled in to save the record, but the optional fields need not be.

The optional fields may be present at the bottom of the detail page in a separate section or they maybe spread across the page

What if you have many fields and you are tired of scrolling down searching for them?

Although we can group relevant fields into sections, we still have to scroll down if there are significantly more number of fields.

We have a different approach to solve this issue.

We can use a Lightning Web Component, include the optional fields we want and add it to a new tab of the record page. You can switch between tabs and fill in the fields.

screenshot 701

STEPS TO ACHIEVE THIS USING VS CODE

  1. Create a Project
  2. Create a Lightning Web Component
  3. Connect to Org and deploy
  4. Add the Lightning Component to a new tab in the record page

CREATE A PROJECT

  1. Open VS Code and press ctrl + shift + p in Windows and cmd + shift + p in Mac to open the command palette.

  2. Search for SFDX: Create Project and select it.

    screenshot 634

  3. Select Standard project template, enter the project name, hit enter and select a folder in your system to save the project.

    dcao12

    dcao13

CREATE A LIGHTNING WEB COMPONENT

  1. Open command palette and search for SFDX: Create Lightning Web Component and select it.

    screenshot 637

  2. Enter the desired file name and hit enter.

    screenshot 702

  3. The Component folder will have 3 files included by default. The JavaScript file ( .js ) , HTML file ( .html ) and the JavaScript Meta-XML file ( .js-meta.xml )

    screenshot 703

  4. The modified JavaScript code for the Component looks like this

    import { LightningElement,api } from 'lwc';
    
    import Additional_Revenue_Proposed from '@salesforce/schema/Opportunity.Additional_Revenue_Proposed__c';
    
    import Estimated_Revenue_Proposed from '@salesforce/schema/Opportunity.Estimated_Revenue_Proposed__c';
    
    import Recurring_Non_Recurring_Proposed from '@salesforce/schema/Opportunity.Recurring_Non_Recurring_Proposed__c';
    
    import Total_Revenue_Proposed from '@salesforce/schema/Opportunity.Total_Revenue_Proposed__c';
    
    import Additional_Revenue_Awarded from '@salesforce/schema/Opportunity.Additional_Revenue_Awarded__c';
    
    import Estimated_Revenue_Awarded from '@salesforce/schema/Opportunity.Estimated_Revenue_Awarded__c';
    
    import Recurring_Non_Recurring_Awarded from '@salesforce/schema/Opportunity.Recurring_Non_Recurring_Awarded__c';
    
    import Total_Revenue_Awarded from '@salesforce/schema/Opportunity.Total_Revenue_Awarded__c';
    
    export default class OpportunityTab extends LightningElement {
    
        @api recordId;
    
        fields = [Additional_Revenue_Proposed, Estimated_Revenue_Proposed, Recurring_Non_Recurring_Proposed, Total_Revenue_Proposed, Additional_Revenue_Awarded, 
            Estimated_Revenue_Awarded, Recurring_Non_Recurring_Awarded, Total_Revenue_Awarded]
    }
  5. The fields we use in the Component should each be imported from @salesforce/schema/.

  6. Here is the HTML code for the Component

    <template>
        <lightning-card>
    
                <lightning-record-form 
                    record-id={recordId} 
                    object-api-name="Opportunity"
                    fields={fields}
                    density="comfy"
                    columns="2"
                >
                </lightning-record-form>
                
        </lightning-card>
    </template>
  7. The lightning-record-form we use here switches between view and edit modes automatically when the user begins editing a field in a view form. It also provides Save and Cancel buttons by default in edit mode.

  8. In the lightning-record-form you can choose to specify how many number of columns you want to split the fields into.

  9. The density can be either comfy or compact for the form. The display density setting determines how densely content is displayed and where field labels are located.

  10. Here is the code for the JavaScript Meta-XML file

    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <apiVersion>52.0</apiVersion>
        <isExposed>true</isExposed>
        <targets> 
            <target>lightning__RecordPage</target>
        </targets>
    </LightningComponentBundle>
  11. The target here can be RecordPage, HomePage or AppPage depending on the requirement. You can also target all three at the same time.

  12. CONNECT TO ORG AND DEPLOY

    1. Open Command palette and search for SFDX: Authorize an Org and select it.

    2. Choose your Org type and if it is Custom, paste your Orgs login URL in the next step.

    3. For Org alias, hit enter for a default alias or type a new alias.

    4. On hitting enter you will be taken to the Salesforce Login Page in a browser.

    5. Enter the Credentials and Login.

    6. Head back to VSCode and you will see the notification SFDX: Authorize an Org successfully ran.

    7. Now right click on the folder opportunityTab folder which is on the left pane and click SFDX: Deploy Source to Org.

      screenshot 705

    8. You should see the notification SFDX: Deploy source to Org successfully ran shortly.
      dcao21

    ADD THE LIGHTNING COMPONENT TO A NEW TAB IN THE RECORD PAGE

    1. If you do not have Tabs component added to the record page, go to any Opportunity record page and click the gear icon at the top right corner and select edit page.

      screenshot 723 1

    2. On the left pane under Components, drag and drop the Tabs component from the Standard section onto the page.

      screenshot 707

    3. The Tabs component will have Details and Related tabs by default.

    4. Click on the Details tab, from the left pane drag and drop the Record detail standard component into it.

      screenshot 708

    5. For the Related tab drag and drop any of the standard related components that you require.

      screenshot 726 1

    6. Now select the entire Tabs component.

      screenshot 709 1

    7. On Selecting the Component, you can see the different Tabs present in the Component on the right pane.

      screenshot 709 2

    8. Click on Add Tab.

    9. The Details tab will be chosen by default. Click on it and you will see a popup for the Tab Label.

      screenshot 727

    10. From the picklist values of the Tab Label, scroll to the top and select Custom.

      screenshot 728

    11. Now enter the Custom Label and click Done.

      screenshot 729

    12. The new tab is added to the layout.

      screenshot 730 1

    13. From the left pane drag and drop the custom Component opportunityTab into the new tab created.

      screenshot 731

    14. You will be able to see the preview of the custom Component.

      screenshot 732

    15. Click Save at the top right corner and then Activate the page.

    16. Assign as Org Default, App Default or App, Record Type and Profile based on your requirement.

      screenshot 719 1

    17. If it is Org Default, select the form factors that you want your Org Default page to be available for. click Next and then click Save.

    18. If it is App Default, select the App to display the page as the App default page. Click Next and then click Save.

    19. If it is App, Record Type and Profile, Select the App, form factor, Record Types, Profiles and then Click Save.

    20. Now head back to any Opportunity record page and you will be able to see the new tab.

    WRAPPING IT UP

    In this blog we have discussed how to add the fields of an Object to a new tab of the Record page using a Lightning Web Component.

    Leave a Comment

    Your email address will not be published

    © 2022 Digital Biz Tech