Dynamic Properties for Lightning Web Components

6 steps to maximising Lightning Web Component usability with dynamic properties

Moving from static to dynamic dropdown values in your component properties
A standard component showing the ability to customise behaviour with dynamic properties

Requirements

Step 1 — Create an Apex class

global with sharing class TimelineParentPicklist extends VisualEditor.DynamicPickList {}

Step 2 — Get Context

global with sharing class TimelineParentPicklist extends VisualEditor.DynamicPickList {VisualEditor.DesignTimePageContext context;global TimelineParentPicklist(VisualEditor.DesignTimePageContext context) {    this.context = context;
}
}

Step 3 — Set a Default Value

global with sharing class TimelineParentPicklist extends VisualEditor.DynamicPickList {  global override VisualEditor.DataRow getDefaultValue() {  String objectLabel = ((SObject) (Type.forName(‘Schema.’ + String.valueOf(this.context.entityName)).newInstance())).getSObjectType().getDescribe().getLabel();  VisualEditor.DataRow defaultValue = new VisualEditor.DataRow(  ‘Use This ‘ + objectLabel,‘Default_Picklist_Value’);  return defaultValue;  }
}

Step 4 — Get Values

global with sharing class TimelineParentPicklist extends VisualEditor.DynamicPickList {   global override VisualEditor.DynamicPickListRows getValues() {  VisualEditor.DynamicPickListRows myValues = new VisualEditor.DynamicPickListRows();  myValues.addRow(getDefaultValue());  Schema.DescribeSObjectResult describeSobjects = ((SObject) (Type.forName(‘Schema.’ + this.context.entityName).newInstance())).getSObjectType().getDescribe();  Map<String, Schema.SObjectField> myFields = describeSobjects.fields.getMap();  for (String field : myFields.keySet()) {    Schema.DescribeFieldResult currentField = myFields.get(field).getDescribe();    if (
currentField.isAccessible() && currentField.isNamePointing() == false && currentField.getLabel() != ‘Master Record ID’ &&(String.valueOf(currentField.getReferenceTo()) == ‘(Lead)’ || String.valueOf(currentField.getReferenceTo()) == ‘(Contact)’ || String.valueOf(currentField.getReferenceTo()) == ‘(Account)’ || String.valueOf(currentField.getReferenceTo()) == ‘(Opportunity)’ || String.valueOf(currentField.getReferenceTo()) == ‘(Case)’) ) {
myValues.addRow(new VisualEditor.DataRow(currentField.getLabel(), field)); } }return myValues; }}

Step 5 — Test Class

@isTest(seeAllData=false)private with sharing class TimelineParentPicklist_Test {  @isTest  static void testTimelinePicklistDefaultValue() {    VisualEditor.DesignTimePageContext context = new VisualEditor.DesignTimePageContext();    context.entityName = ‘Contact’;    TimelineParentPicklist timeline = new TimelineParentPicklist(context);    Test.startTest();    VisualEditor.DataRow defaultValue = timeline.getDefaultValue();    Test.stopTest();    System.assertEquals(‘Use This Contact’,defaultValue.getLabel(),‘Timeline Parent Picklist default value incorrect’);  }  @isTest  static void testTimelinePicklistValues() {    VisualEditor.DesignTimePageContext context = new VisualEditor.DesignTimePageContext();    context.entityName = ‘Contact’;    TimelineParentPicklist timeline = new TimelineParentPicklist(context);    Test.startTest();    VisualEditor.DynamicPickListRows picklistValues = timeline.getValues();    Test.stopTest();    System.assert(picklistValues.size() > 0, ‘No parent picklist values found for Contact’);  }}

Step 6 — Add property to Lightning Web Component

<property name=”timelineParent” label=”Parent Record” type=”String” datasource=”apex://TimelineParentPicklist” required=”true” />
The dynamic picklist in all its glory

Summary

Developer Advocate @ MuleSoft || Interested in solving unique challenges using different cloud service providers || All opinions are mine.