Tag Archives: Field Set Form

Lightning Field Set Form Component

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