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]

<!--
  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 

<!--
  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.

<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. 🙂

See Also : How to Use SVG resource in lightning component

Resources:

Lightning Developer Guide

About The contributor: 

• Brahmaji Tammana

  10 Post Contribute