Get Started with Dynamic Forms

Learning Objectives 

After completing this unit, you’ll be able to:

• Explain the differences between Dynamic Forms-based record pages and standard record pages.
• List the benefits of Dynamic Forms.
• Migrate a record page to Dynamic Forms.
• Explain how Dynamic Forms-based pages are displayed on mobile devices.

Before You Start

This hands-on project uses custom pages that are created in the Lightning App Builder module. This projects builds on those concepts. Complete the Lightning App Builder module first and use the same org to complete this project. 

What Is Dynamic Forms?

Dynamic Forms takes the Lightning App Builder to a whole new level. It enables you, the Salesforce admin, to build highly flexible and dynamic experiences your users will love by configuring record detail fields and sections inside the Lightning App Builder.

Imagine your Salesforce org today. Maybe it has several slightly different versions of a page to support different profiles or record types. And maybe you have page layouts with 100+ fields because different kinds of users use different fields on the same object. The more fields on your page layout, the more the Record Detail component becomes a monolithic block of fields that you can’t customize. 

Dynamic Forms breaks the Record Detail component on your Lightning pages into individual field and section components that you can put anywhere on the page. You can use visibility rules to show your end users only the fields they need to see, when they need to see them. 

Dynamic Forms gives you: 

• An instant upgrade from page layouts: Place fields and sections wherever you want.
• Dynamic layouts: Use visibility rules to show and hide fields and sections.
• Simpler layout management:
  • Manage the fields and sections on your pages in the Lightning App Builder without touching the page layout editor.
  • Reduce the number of page layouts and record types you need by defining component visibility rules.
  • Assign a Lightning page without having to assign a page layout too.

How Does Dynamic Forms Work?

You can start using Dynamic Forms in two ways.

• Create a fresh Lightning record page. Then, click the Fields tab in the Lightning App Builder component pane, and start dragging sections and fields anywhere you want them on the page.
• Open an existing record page and with just a few clicks, migrate its record details using the Dynamic Forms migration wizard.

In this project, we explore the second option: page migration.

Launch Your Trailhead Playground

You'll be completing this hands-on project in your own personal Salesforce environment, called a Trailhead Playground. Get your Trailhead Playground now by first logging in to Trailhead, and then clicking Launch at the bottom of this page. Your playground opens in a new browser tab or window. Keep the playground window open while you do this project. After you complete the project steps in your playground, come back to this window and click Verify step at the bottom of this page.

Migrate a Record Page to Dynamic Forms

With Dynamic Forms, you can migrate the fields and sections from your existing record pages as individual components in the Lightning App Builder. Then configure them just like the rest of the components on the page, and give the users only the fields and sections that they need.

It’s easy! Let’s walk through the process.

1. From the App Launcher (), navigate to and select the Sales app.
2. Click the Opportunities tab, then select the All Opportunities list view.
3. Click Dickenson Mobile Generators.
4. From the Setup menu (), select Edit Page.
   The page opens in the Lightning App Builder.
5. Click the Details tab, and then click in the record details.
   This selects the Record Detail component and shows its properties in the properties pane.
6. In the properties pane, click Upgrade Now to start the Dynamic Forms migration wizard.
7. Step through the wizard, select Opportunity Layout, then click Finish.
8. Click Save.
   But wait! Apparently a required field is missing. If you save the page without the required fields, and the missing required fields don’t have values, users can’t save a record after creating, editing, or cloning it.
9. Click Cancel, and let’s figure out what’s missing.
10. Click the Fields tab in the component palette.
    Of the Universally Required Fields, Forecast Category is missing from the Details tab. Why is it missing? When you migrate fields from a layout, if universally required fields for the object weren’t present on the layout you migrated from, they’re not added automatically. (If you peek at the Opportunity Layout page layout, you can see that Forecast Category isn’t on it.)
11. Click the Details tab, and drag the Forecast Category field into the Opportunity Information section.
12. Save the page again.
13. If the Page Saved window appears, click Not Yet.

Why choose a page layout in the wizard when the Fields tab has all the fields you need? You could just drag all those fields manually to the page. But if you choose a page layout instead, then the upgrade wizard takes the fields and sections from that page layout and automatically adds them to your page. Just a few clicks and you’re done!

Here’s the migrated page. Each section is a component, and so is each field inside the section. 

A Record Detail - Mobile component has been added to the bottom of the page, and the original Record Detail component has been removed. That’s intentional, and we explore it later.

Customize the Page

Even though you broke up the Record Detail into individual field components, there are still quite a few fields, which can cause page performance issues. One way to get around that is to move lower priority fields into tabs or accordion sections whose content isn’t visible when the page loads.

If you’ve worked in the Lightning App Builder before, you’re familiar with the components pane, which lists all of the components available for use on your page. Dynamic Forms adds a new tab to the pane: Fields. The Fields tab contains the Field Section component and a list of fields. You can put a Field Section component anywhere on the page, and you can put fields anywhere within a Field Section component.

Let’s optimize the page. First, delete the empty Other Information section.

1. Click the Details tab on the canvas.
2. Hover over the Other Information section and click  to delete it.

Next, add a new tab.

1. Click the Details tab again.
2. In the Tabs properties pane, click Add Tab. A new Details tab item appears.
3. Click the new Details tab item.
4. In the Tab Label list, select Custom. You might have to scroll up in the Tab Label list to find Custom at the top.
5. For Custom Label, enter More Details, then click Done.
6. In the properties pane, drag the new More Details tab above the Chatter tab.
   

Now, move field sections from Details to More Details.

1. On the canvas, click the Details tab, and collapse the Opportunity Information section (reducing the vertical space to drag over in the next step).
2. In the Additional Information section, click  and drag the section into the More Details tab.
3. Do the same for the Description Information section and place it below the Additional Information section.
4. In the Additional Information section, put the Tracking Number field below Delivery/Installation Status.
5. Click the Description Information section.
6. In the Description Information section properties pane, remove the word “Information” from the section label. Granted, this is a pretty small (and boring) change. But with Dynamic Forms, you can name field sections whatever you want. Be creative!

The Additional Information section has five fields in it, but your users don’t really need to see the Main Competitor(s) field. That’s where Dynamic Forms shines. You can customize the section, leaving only relevant fields, right here in the Lightning App Builder—without using the page layout editor at all.

Finally, delete unnecessary fields.

1. In the Additional Information section, hover over the Main Competitor(s) field and click  to delete it.
2. Click the Details tab.
3. In the Opportunity Information section, delete the Primary Campaign Source field.
4. Delete the Next Step field. See how the column automatically adjusts?
5. Move the Stage field above the Close Date field.
6. Save the page.

The changes that you made here are a simple example of what you can do with Dynamic Forms. For pages that have 100 fields or more in the original Record Detail block, this kind of optimization can significantly improve page performance. Pages with fewer fields to display load faster. And your users don’t have to scroll as much to access the fields that they need.

Dynamic Forms and Mobile

As part of the page migration process, the Record Detail component is removed from the page. And when you migrate a record page that supports both the desktop and phone form factors to Dynamic Forms, a Record Detail - Mobile component is added to the page for you. Why?

The Field Section component and the Field components that go inside it are supported for the desktop form factor but not for phone. But your mobile users are still covered. The Record Detail - Mobile component gives your mobile users a way to see the record details on a Dynamic Forms-enabled page.

The Record Detail - Mobile component displays the original Record Detail component in a mobile-only container. So, on pages that support both desktop and phone, your desktop users see the Field Section components, and your mobile users see the Record Detail - Mobile component.

Here’s what a sample Warehouse record page that’s been migrated to Dynamic Forms looks like when viewed on a phone. The Field Section components aren't displayed on mobile, and the Record Detail - Mobile component takes over to deliver the sections and fields.

The Record Detail - Mobile component is displayed with an “Unsupported form factor” message when you view it in the Lightning App Builder in Desktop preview mode. Users won’t see that when they view the page on a desktop.

The Record Detail - Mobile component is smart. It knows when it’s displayed on a mobile device, and when it’s not, so you don’t have to add a visibility rule to govern how it’s displayed.

Speaking of visibility rules, you can use them to make your Dynamic Forms-enabled page even more streamlined and useful for your users. Find out how in the next unit.

Resources 

• Salesforce Help: Create and Configure Lightning Experience Record Pages
• Salesforce Help: Required and Read-Only Fields in Dynamic Forms