Lightning Field Set Form Component

August 25, 2017 12 Comments

UPDATE: Checkout Version 2 of the Field Set Form

For learning purposes, I created a Lightning Field Set Form component that renders a one column form of inputs for a set of fields for a given SObject where the field inputs are driven by a specified field set on that object. This code was influenced by the How to use Field Sets with Lightning Stackoverflow post.

Use Cases

This component can be used to either update a record or create a new record.

Updating a Record

To update a record on a standard record page,

  1. Create a field set on the object that specifies the fields to edit.
  2. Place the FieldSetForm component on a record page and specify its Field Set Name on the designer tab.

To update a record from a custom component,

  1. Embed the <c:FieldSetForm /> in the custom component.
  2. Set the recordId and fieldSetName attributes with the record id and field set name to use.

Creating a Record

  1. Add the component to the desired location.
  2. In the designer, specify the object name and field set name.

Limitations

  • Needs to be enhanced to have better support for Relationship fields (Lookups & Master-Details), picklists, and multi-picklists, and probably other data types too.
  • Needs apex test code written for it.
  • Needs better error handling. It currently only shows the first error returned on save.

Notable Differences From StackOverFlow Post

  • The handleValueChange method isn’t needed to bind the input values back to the record because the cmp.getReference(‘v.record’ + field.APIName) takes care of that automatically.
  • There was a bug with the config where the same config was being used for the same type so if you had multiple fields with the same type, you’d see the same field multiple times. This was fixed by cloning the config for each field using the JSON.parse workaround.
  • Added the ability to save the record back automatically with new and update support.
  • Was able to eliminate the form attribute because all components inherit the body attribute.

Disclaimer

This was created for learning purposes. Whenever possible, use other standard components that provide similar functionality like the force:recordEdit component that does similar functionality.

Component Markup

Component Controller

Component Helper

Component Design

Apex Controller

Apex Field Class

12 thoughts on “Lightning Field Set Form Component”

  1. This is amazing. Great work. I’m gonna try to add picklist and multipicklist support to this.

  4. Hi, I want to thank you for your blog. I have one doubt, I tried to show fields in field sets in 2 separate columns, but i am not able to do. Can any one give me any idea.

    1. Vivek,

      In the apex controller, update the FieldSetFormController returned data structure to have a list of columns where each column has a list of fields. Then update the component to iterate over each column and then each field in each column to generate the appropriate column UI desired. The PageLayoutRecordDisplay code show cases one way of doing this: https://github.com/lfreeland/MetilliumLightningPrototypes/tree/master/src/aura/PageLayoutRecordDisplay

    1. Hari,

      Kinda. Lookups and Master-Details fall under the “Reference” type and if you look in the helper file, you’ll see that a ui:inputText aka a text box will be used for it. For better support, take a look at the Lightning Field Set Form V2

Comments are closed.