use design resource

How to Use Design Resource In Lightning Component Bundle?

Admin Configuration, Lightning Component

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.


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=""/>
    <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

Now create design resource by click on the DESIGN tab in component bundle : 

  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" />   
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.

design resource sfdcmonkey

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.


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


Lightning Developer Guide

About The contributor: 


  • Hi, Can I make a lookup to the records of object in design? Or can I even pass value from component to design?


  • 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)

  • Hi,  have a problem at the saving moment display me:


    Failed to save Type is not a supported design attribute.Type is not a supported design attribute.: Source

    alert. please help me.


  • How can we add a button in design resource, For example like we can dynamically add Tabs on clicking of a Plus button!! ??

Leave a Reply