Design resource in lightning component

2017 begins, and I thought somehow should publish an article on the first day to keep the momentum going well. Here is the an out of box way to pass the attributes to the lightning component from app builder. Lets take an example to configure the theme color of a component and the theme color could be provided by an admin user who configure the lightning component in the app builder.

ThemeColorConfigure.cmp is the component we are going to create and when an admin drag and drop this component into app builder, admin will get an option to  configure the theme color of the component. After drag and drop the component, admin could enter the color name or code in to the right panel for the attribute "Theme Color". Based on the Theme color the component theme color will be displayed.

Lets jump into the technical part of ThemeColorConfigure.cmp. we have created an attribute 'ThemeColor' in the ThemeColorConfigure.cmp. Also, to expose this attribute to the app builder, we have created the ThemeColorConfigure.design wherein we have mentioned the 'ThemeColor' attribute and the label name(display name) for app builder.

Use a design resource to control which attributes are exposed to the Lightning App Builder. A design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Lightning component—information that visual tools need to allow adding the component to a page or app.

Also, ThemeColorConfigure.design can also be used to configure the display name of the ThemeColorConfigure.cmp in app builder using the attribute 'label' for the design:component . In this example, I have given as 'Theme Color Picker', so that the name will be displayed under the available custom lightning component list.

Here is the code of the above example:


Here is the screenshot of the app builder looks like while trying to add the ThemeColorConfigure.cmp to configure the theme color value.

Some more information about design resource of a lightning component

1) As of now a design resource supports only attributes of type int, string, or boolean.
2) To Render a field as a picklist, , add a datasource onto the attribute in the design resource, like this


3) You can set a default value on an attribute in a design resource, like this

4) Restrict a component to one or more objects
Use the sfdc:object tag set to specify which objects your component is valid for.
For example, in the above example let's restrict the lightning component to only Account object by adding the below code

follow me @ramsujesh