Create a Form with Picklist fields in Lightning Component

To create a form,

To create a Lightning Component, follow these steps:

  1. In the Developer Console, choose File | New | Lightning Component.
  2. Give the component a name, for example, schoolForm (because I’m using a custom object – School__c in this post).
  3. Under Component Configuration, select Lightning Record Page and click Submit

To create a form with picklist fields in Lightning Component,

While creating a form in Lightning Component, there are many assumptions you have especially if you are coming from Visualforce environment. However, in Visualforce, the controllers are sever-side which means that the data you request for is pulled from the server. Unlike the LC, the controllers client-side. There are logics you have to write to pull data like the picklist values of a given field into your form or page.

In this post, to create a form that has picklist fields,

Create a component for example schoolForm.cmp. Add the code below

If you don’t want to have an error while saving the SchoolForm.cmp code, you need to create the Picklist component because the code calls the component which does not exist yet. Before creating the component, create an Apex Controller that will populate the picklist fields with the values. Call it PicklistApexController. Below is the Apex code

This is the Service component which will populate the picklist fields with the options. Create a Service Component, call it SchoolPicklists.cmp and add the code below:

Save it and on the right-hand side click the Controller pane. Copy and paste the code below

Go to File |Save All.

If everything goes well, you can view your form either on a Record Page or create a Lightning Application for it.

Reference

Lightning Aura Components Developer Guide

Trailhead

Leave a Reply

Close Menu