use design resource

How to Use Design Resource In Lightning Component Bundle?

Admin Configuration, Lightning Component

Sharing is caring!

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]

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

DesignResourceDemo.design 

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

Resources:

Lightning Developer Guide

About The contributor: 

Sharing is caring!

(Visited 2,992 times, 7 visits today)

2 comments

Leave a Reply