Lightning Field Set Form Component V2

For learning purposes, I wanted to see if the new Lightning:recordEditForm component and Lightning:inputField component from the Spring 18 release can be used for a dynamic form. This leverages my previous Lightning Field Set Form work.

Overview

The Field Set Form V2 component creates a dynamic lightning form whose fields are configurable through a field set. It can be used to create or update a record and is relatively generic since it can be used for different objects and in different contexts in LEX.

For more information about the new lightning:recordEditView and lightning:inputField, see this post.

Let me know what you think in the comments below.

Benefits

  • The inputField component renders the appropriate input control based on the field’s underlying datatype. In the original Field Set Form, this was handled by us.
  • No Apex Code for Loading and Saving the record. The recordEditForm is smart enough to automatically load the record if a record id is given for the specified fields.
  • Record Type Specific Picklist Values Are Honored. When a picklist’s values are limited to a subset of the available ones for a given record type, it was very challenging to only grab these in Apex for a custom lightning component. Now, this is automatically supported.
  • Dependent Picklists Supported. This is really nice because in the past this had to be implemented yourself.
  • Field Level Security (Sort Of). According to the documentation, if the user doesn’t have access to the specified field, then it won’t display. This is buggy in my Dev org. When I remove access to a field, all the fields following it are not shown either despite being accessible.

Limitations

  • Proof-of-Concept Quality. This lacks production quality styling, test code, and user experience.
  • Lightning:inputField FLS Bug. When the user doesn’t have access to a field, that field isn’t shown along with all the fields that follow it even if they are available.
  • Lightning:inputField Class Bug. When I try to use different SLDS classes, they don’t seem to do anything. For example, when I try using “slds-m-top_medium” to add some spacing between the inputs, it’s not applied.
  • The inputs used for a given field type are not determined by the component which is different from the original Lightning Field Set Form.
  • Have to implement the various events to show a success toast, to reload the other components when saved, and have the component refresh when some other component saved the record.
  • Record Type can’t be edited. Adding the record type will show a “Field: RecordTypeId is not a valid lookup field.” error.

Differences Between V1 and V2

  • Error Handling is handled in V2 but not V1 thanks to the recordEditForm having the lightning:messages component.
  • Loading and Saving the record is automatically handled by the recordEditForm.

Component Markup

Component Controller

Component Style

Component Design

Apex Controller

Field Class

22 thoughts on “Lightning Field Set Form Component V2”

  1. Luke,
    This is a awesome post.but i m facing an issue.by using type= submit.it directly submit the data in the server.but i required to perform the operations on the value.so how to get the value from the inputfield and store it in attribute .please help luke.

  2. Luke,
    You came like a saviour for me .I got stuck for about 2 days here.I m new in the lightning.
    Thank You So much for the reply and for the fantastic blog
    Keep Posting More Important Blog Luke.

  3. Is there an installation guide? I am fairly new to lightning components, but would love to get this installed.

  4. Thanks for sharing this.
    I have one question this is not working for picklist fields.
    Note i have added value=”” to inputfield

    1. Abhay,

      It should work. Can you elaborate on what exactly isn’t working? Is the field not showing up or are you getting an error?

      If it’s not showing up, check field level security on the user’s profile to ensure they have access. The lightning:recordEditForm enforces field level security so if one doesn’t have access to the field, it doesn’t show up.

    1. Stephan,

      Checking out the new lightning:recordForm is on my radar for sure. Simply specifying the fields that are configurable through metadata is pretty awesome.

      The next item on my to do list is to create a GitHub repo for these lightning components deployable through the usual “Deploy” button. Then others could start contributing such as creating a V3 Field Set Form.

      Thanks for commenting,
      Luke

  5. Great article.

    We are getting errors if the fields for “lightning:inputField” are not in the page layout. Errors such as “TypeError: Cannot read property ‘label’ of undefined” are showing up.

    It seems like all these components (lightning:recordForm, lightning:recordEditForm, lightning:inputField) require the fields to be part of a page layout which would defeat the purpose of using fieldsets. We were hoping to use fieldsets so that we would not have to include the fields in a page layout. The specs for these components seem to suggest that they can be used with a page layout or specifying a field list but that does not seem like the case.

    1. Paige,

      I removed an Account field used in one of my existing FieldSetForm V2 component examples in my org from all the Account page layouts and everything still worked fine in my personal dev org.

      I also tried removing permission to the field to see if that was an issue because the recordEditForm component used to not work properly with field level security but that also worked fine and just that field was hidden from the form.

      If you could share some sample code that demonstrates the issue, nothing proprietary please, that would be helpful.

      Luke

  6. If i want to give button on fixed footer of modal i have to put the button outside the recordeditform. How we will validate input fields before validate?
    event.getParam(‘fields’) – it wont work if button is outside.

  7. Luke Freeland,

    I am trying to access values of filed set on Parent component while time of record creation.
    But I am not able to access it. Do you have any view/solution to get the values enter on the form (using child component which render fieldset) ?

    1. Siri,

      You’d have to add code to the component to tap into the recordEditForm’s onsubmit event or other events so that you can then run your own custom code such as validation or doing something with the result. Take a look at the Lightning Record Edit Documentation for details.

  8. Hi Luke,

    I am using your component & rendering Field set on parent component.

    Could you please let me know if there is any way by which I can put some values on the field once the fieldset iteration is over & save that value.

    1. Rohit,

      Here are two things to try:

      1) Try using the “onload” event of the recordEditForm to prepopulate the values. This will likely involve adding an “Onload” event to this component that will then be registered with the underlying recordEditForm component so that you can use this event in any lightning component.

      2) If that doesn’t work, try updating the markup to give the lightning:inputField an AuraId and then try grabbing the components using the find method and then updating their values as needed. Please note that you may have to use multiple find methods to dig into the component hierarchy.

      Let me know if one of those work.

  9. Hey Luke. This is Chetan and this is an awesome component. Hope you dont mind if I may use this code on one of my projects. This is a huge time savior. Also what are your thoughts on the new lightning web components ? Looks very promising.

    1. Hey Chetan! Glad it helps! Please use it where applicable and if you have any improvements, please submit a pull request for it at https://github.com/lfreeland/MetilliumLightningPrototypes.

      I’ve only scratched the surface with Lightning Web Components via Trailhead. One of goals is to create a V3 of the Field Set Form implemented using them to get a much better feel for it. What are your thoughts on it so far?

Leave a Reply

Your email address will not be published. Required fields are marked *