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.

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.

   

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

   

   

CREATE A LIGHTNING WEB COMPONENT

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

   

2. Enter the desired file name and hit enter.

   

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 )

   

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/