How to Use Design Resource In Lightning Component Bundle?
Hi Guys , Have you ever used Design resource in lightning component bundle ? Do you think it is really needed? How to make a admin friendly component ? How to use this Design resource tab in lightning component ?
To answer these questions, Let’s check this post in detail..
As we all know the main core features of Lightning Components is re-usability. It means we should be able to reuse the same component for different similar business requirements.
Design resource in component bundle will help in achieving this.
Yes. Using Design resource , we will get access to the component attributes from Lightning App Builder. So now Administrators can also change the component attributes as per requirement.
Let’s take a simple component example : we generally use default attribute in component attributes. What if you want to change the default value of this attribute when mapping in App Builder? Here comes the advantage of design resource.
We expose the component attribute in Lightning App Builder using design resource.
Example:
Lightning Component [DesignResourceDemo.cmp]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!-- Source : sfdcmonkey.coom Date : 9/27/2017 Update : N/A --> <aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" > <!--Declared 5 attributes with some default values --> <aura:attribute name="backgroundColor" type="String" default="#000000" /> <aura:attribute name="boxPadding" type="Integer" default="25" /> <aura:attribute name="logoURL" type="String" default="https://brandfolder.com/salesforce/logo/salesforce-primary-logo.png"/> <aura:attribute name="textFontSize" type="Integer" default="18" /> <aura:attribute name="textColor" type="String" default="#e81717" /> <div style="{!'padding:' + v.boxPadding +'px; background-color:' + v.backgroundColor}"> <img src="{!v.logoURL}" width="200" height="200" /> <p style="{!'font-size:' + v.textFontSize + 'px; color:' + v.textColor}"> Hi This is s Sample Demo of How to use Desing Resource In Lightning Componnet </p> </div> </aura:component> |
Now create design resource by click on the DESIGN tab in component bundle :
DesignResourceDemo.design
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- Source : sfdcmonkey.coom Date : 9/27/2017 Update : N/A --> <design:component > <design:attribute name="backgroundColor" label="Background Color" description="Enter Background Color" /> <design:attribute name="boxPadding" label="Padding" description="Enter Padding without 'px' [i.e 15]" /> <design:attribute name="logoURL" label="Image URL" description="Enter Secure Image URL" /> <design:attribute name="textFontSize" label="Font Size" description="Enter font size without 'px' [i.e 15]" /> <design:attribute name="textColor" label="Font Color" description="Enter font Color" /> </design:component> |
Decode <design:attribute/>
Name : Is the name of the component attribute. It should be exact same as component attribute.
Label : User friendly name to display in App builder
Description – Help text of the design attribute in Lightning App builder
A design resource supports only attributes of type Integer, String, or Boolean.
Lets add this lightning component in our app builder to see the design attributes.
From setup >> In Quick find box type ‘Lightning App Builder’ >> new >> next >> enter label >> select template >> finish
- Drag your lightning component and from the right side bar you can set the attribute values. which we have config in our design resource tab.
Also we can restrict the component based on object in Lighting App Builder.
Suppose, if you need to map the lightning component only in particular object(s) lightning pages then we need use <sfdc:object> tag in design resource. Let see a piece of code to understand better.
|
1 2 3 4 5 6 7 8 |
<sfdc:objects> <sfdc:object>Account</sfdc:object> <sfdc:object>Opportunity</sfdc:object> </sfdc:objects> |
After adding this code in design resource, that component will be visible only in Account and Opportunity lightning pages. So this way you can restrict a lightning component to valid lightning pages.
Still a doubt ? Post a comment for an answer. 🙂
Resources:
About The contributor:
Brahmaji Tammana
Name: Brahmaji Tammana
Email: [email protected]
Salesforce Associate
Post By Brahmaji :
- Spring 18 Lightning Components Features/Enhancement/Critical Updates – Highlights
- How To Detect a Device In Salesforce Lightning Component ?
- Powerful Lightning Datatable base component – Example Using Fieldset
- How to use design resource in Lightning Component ?
- Use Lightning Data Service – No To Apex Controller In Lightning Components
- Override Standard Buttons With Lightning Component – Lightning Experience
- Custom Record Type Selection Lightning Component with force:createRecord event
- How to Add Lightning Component as a Quick Action in Salesforce
- How to use SVG in Salesforce Lightning Component ?
- Work Fast With Keyboard Shortcuts in Salesforce Lightning Experience
5 comments
Hi, Can I make a lookup to the records of object in design? Or can I even pass value from component to design?
Awesome post. Simple and intuitive.
Your post is nice. However i am keen to know the container on which you are dropping the components. Is it possible to have a container that is capable of holding the component side-by-side just like grid?
Hi, thanks for the post. Very usefull. I was wondering if it is possible to use a parameter in the design file to send to the Apex controller (maybe as a parameter for a SOQL query, as a way to filter data)
SFDCMonkey!!!!! You Rock.