Dynamic Forms in Lightning using Lightning App Builder

In this post, we will implement the latest feature provided as part of the Winter ’21 release that is Salesforce Dynamic Forms in Lightning using Lightning App Builder. Using Dynamic forms in Lightning, we can drag and drop the fields in Lightning App Builder to arrange them as per the need rather than updating the Page Layouts. It provides the ability to configure record detail fields and sections inside the Lightning App Builder. We can also Create Field Section in Lightning App Builder and add necessary fields to it.

Let’s just hop into the Implementation.

Implementation

First, create a Custom Object Subscriber and create Fields Name, Email, Phone, and Website for Subscriber Object. Create a Custom Object Tab for Subscriber Object and navigate to Subscribers Tab. Create a New record for Subscribers.

Once the new record is created, the User will be redirected to a Record Details Page. Click on Settings (Gear Icon) and click on Edit Page. It will open the Details page in Lightning App Builder.

When you click on the Record Detail Component, you will see the Help Text in the Right Panel with little information about the Dynamic Forms. Click on the Upgrade Now.

Upgrade Now
Upgrade Now

It will open the Dynamic Forms Wizard where it will show more information about Dynamic Forms in Lightning. Click Next.

Dynamic Forms in Lightning using Lightning App Builder
Dynamic Forms in Lightning using Lightning App Builder

Then, it will ask you to select the source for your Dynamic Form. All the Page Layouts for the Subscriber Object will be displayed. Select the Layout Name and hit Finish.

It will get all the Sections and Fields from the Page Layout and display it in Details Component. Sections are displayed as Accordions. We can drag and drop the Fields between Columns and Sections as well.

Dynamic Forms in Lightning using Lightning App Builder
Dynamic Forms in Lightning using Lightning App Builder

In the Left Sidebar, there is a new Tab provided called Fields. It has a Field Section and a list of all the Fields. We can drag the Field Section on our Page.

Dynamic Forms in Lightning
Dynamic Forms in Lightning

Then, we can add Fields to that Field Section as well to create a Dynamic Form in Lightning. We can provide the Number of Columns and Label for the Field Section.

Dynamic Forms: Field Section with Fields in Lightning App Builder
Dynamic Forms: Field Section with Fields in Lightning App Builder

Dynamic Forms in Lightning using Lightning App Builder

This is how our Record Details page looks. In the first Card, we have the Fields from the default Page Layout and its Sections along with Fields. We added 3 fields in each column. In the second Card, we have created a custom Dynamic Form using the Field Section and added a few fields in it.

Record Details page using Dynamic Forms
Record Details page using Dynamic Forms

This is how we can make use of Salesforce Dynamic Forms in Lightning using Lightning App Builder to dynamic and flexible forms. One thing to note here is that it is only supported on the Record Details page of Custom Objects.

That is all from this post. If you don’t want to miss new implementations, please Subscribe here.

If you want to check more implementations in Lightning using Configuration, you can check it here.

You can check all the features provided in Winter Release ’21 here.

See you in the next implementation!

Leave a Comment