How to Use Lightning Components to Simplify Record Creation

This blog was co-written by Jagmohan Singh and James Sullivan.

There is no easy option to set up a quick action to create a new Quote from Opportunity object.

In this post, we are going to cover how to set up a lightning action on the Opportunity object to create a new Quote and dynamically pre-populate fields. This will demonstrate how to use a Record Edit Form component to create new records based on an ID provided. In this example, we’ll pass in the Opportunity ID to create a quote with the same name.

Since we can’t do this with a quick action, we’ll create our own Lightning Component.

A Step-by-Step Guide

Step 1: On Quote object, set up a couple of Field Sets for editable and readable fields to be displayed on the quick action and add the fields to those field sets as per your requirement.

Create the following field sets in:
Setup > Object Manager > Quotes > Fieldsets:

1. Create Quote Edit: Added Quote Name (Name) and Contact Name fields in this field set and these fields will be rendered as editable fields.
2. Create Quote Read: Added Opportunity Name (OpportunityId) field in this field set and these fields will be rendered as read only fields.

Step 2: Create a lightning component to allow the users to create Quotes using an Opportunity Action.

The source code for the lightning component is available in this GitHub gist. You can download the gist and then use the Salesforce CLI or your preferred deployment tool to deploy this to an org, or copy/paste into your preferred IDE.

One key point to highlight here is the use of the DynamicInputField lightning component inside the CreateQuoteComponent:

This avoids an issue where you can’t bind a variable to aura: id attribute for dynamic id generation at run time. For this, I moved lightning:inputField into a separate component. And, using this component in the aura:iteration as shown below:

I’m passing the name of the field, an object containing the default field value, and a couple of other parameters to denote the field as required and whether to make the field edit-enabled or read-only. This component now has just one lightning:inputField with aura:id set to myInputField. So, this doesn’t require us to generate dynamic ids for input fields. The Javascript controller for this component can easily lookup the input field and set its value from the object containing default values.

Step 3: Create an Opportunity Action using CreateQuote.cmp and add it to page layouts.

That’s it, now you’re ready to quickly create quotes from Opportunities!

Here is a video on how this component works:

Key takeaways and considerations

Now that you’ve read this article, you should understand:

• How to dynamically pre-populate values in lightning:recordEditForm
• How to work around the problem of dynamic aura:id by using a custom lightning component
• How to use Field Sets with lightning:recordEditForm and how to add a lightning action to Create Quote records from Opportunity object

One consideration you should be aware of with this approach is that the Opportunity Line Items will not transfer over to the Quote Line Items. This can be accomplished with a Process and a Flow: The flow would accept the Quote ID and Opportunity ID as parameters. Then, get the Quote and related Opportunity records. Then, get the Opportunity Line Items in a collection. And finally, iterate through them and create a Quote Line Item for each.

If you have any questions or suggestions, please comment.

Happy coding!