The Lightning Component Design Resource gives you the ability to control which attributes are exposed to Builder tools, making it possible for administrators to interact with the Lightning Component attributes from the Community Builder.
One of the great capabilities of design attributes is that they can be shown as picklists and – even more useful – you can make those dynamic. This is perfect for when you want your components to behave in certain way based on a picklist field value from your org.
Before learning how to build a dynamic picklist as an exposed attribute in the Builder, let’s review the basics:
Input Text Attributes
If you want to show a simple input text as an exposed attribute in the Builder, go to the component resource in the appropriate Lightning Component and add your aura:attribute there.
Then, add a design:attribute in the design resource of the bundle:
* Note that the name of the design:attribute must be the same as the aura:attribute in the component.
Then in the Community Builder, when I drag and drop the component to my page and click on it, I will be able to see my input text attribute.
if you want a picklist and you already know the values in it, you can add it as an exposed attribute in the builder with static options like this:
Add the “datasource” property to your attribute, with the picklist values separated by commas:
Click Save, and you will see this in the builder:
Pretty easy! But what if you want to grab all record types from an object and show those as values in the picklist? You will need to make this picklist dynamic.
To achieve this you will need to:
- Create a custom Apex class to use as a datasource for the picklist. The Apex class must extend the VisualEditor.DynamicPickList abstract class.
- Add an attribute to your design file that specifies your custom Apex class as the datasource.
Let’s create the Apex class:
*Very important: If you pass a value that is not a string type (like in this case an ID), make sure to cast it to String, as shown in line 27, or you will get errors in the Builder.
Next, let’s add our Apex class to the component. Go to the Design tab, and in the datasource property, add “apex://” + my class’s name, like this:
Click Save, and in the Builder you will have a beautiful dynamic picklist.
One last tip: If you want to do something further with that chosen record type (show it as a label, do a query to get all the records with that type, etc.) the value of the chosen record type is stored in the attribute that is in the component resource of the bundle:
There you have it! A simple way to add a bit more customization and flexibility to your Community. What are you tips and tricks for Community Builder?
About the Author:
Elba Genao is a Salesforce Developer at Great Wave who loves UI/UX design and building Communities.
Tags: Salesforce Community, Community Builder, Apex, lightning components, dynamic picklist, Lightning attributes, Design Attributes, Design Resource