Showing posts with label design attribute. Show all posts
Showing posts with label design attribute. Show all posts

Jan 1, 2017

Sujesh Ramachandran

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
Read More

Dec 13, 2016

Sujesh Ramachandran

How to Identify lightning component is added from app builder or not?




Here is a simple trick to identify whether an lightning component is added from App Builder View or referred from any other place(i.e. lightning tab) other than app builder. Just assume that the component is rendering in an app builder view and if you want to make any change specifically for app builder view. For example if you want to reneder component in one column layout in app builder view and if the component is not rendering in app builder view, and want to render the component in 2 column layout, you could use the design attributes (design:attribute) in salesforce.

Now lets see an example here, I am going to create a component which renders as one column in app builder view and 2 column in normal view(example for normal view could be lightning tab). AppBuilderCheck.cmp is the component below which has an attribute isAppbuilderView, default set to false.


Now lets create a Appbuilderview.design to expose an attributes to the app builder. Using design attributes you can provide provision to admin to set configurable values while setting up the app builder view. You can use these configurable values to design the behaviour of the components based on the inputs from design attributes. Now here we are going to set the default view of design attribute "isAppbuilderView" to true. Setting the default value make sure that while admin drag and drop this component to the app builder by default shows true, so that admin dont have to configure manually. So if this component render from app builder view, we get isAppbuilderView as true otherwise if the component render in an lightning tab then we get isAppBuilderView as false as the default setting in design attribute will be effective only if the component render from app builder view.


Screenshot of the component from App builder view and lightning tab view:

From App Builder - One Column Layout


From Lightning Tab - Two Column Layout


Follow me @ramsujesh
Read More