Design Resource In Lightning Component Bundle | Lightning Component Bundle Design Resources | What is the use of Design Resource

 

In this blog post we are going to talk about about "Design Resource In Lightning Component Bundle". A Lightning bundle includes following resources:-

What is the use of Design Resource:-

• Its extension is ".design"
• We use <design:attribute> to make lightning component attribute available for Admin to edit in Lightning Community/Lightning App Builder. With this Administrators can also change the component attributes as per client requirement.
• Supported attribute of type : String, Boolean, Integer , Array (Picklist).

Here is Code:-

DesignResourceDemo.cmp

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global">
   
    <aura:attribute name="welcomeTitle" type="String" default="Welcome in Lightning" access="global" />
    <aura:attribute name="hideLogo" type="Boolean" default="true" access="global" />
    <aura:attribute name="LogoURL" type="String" default="https://c1.sfdcstatic.com/content/dam/web/en_us/www/images/home/logo-salesforce.svg" access="global" />
    <aura:attribute name="favoriteColors" type="String" default="Blue" access="global"/>
   
    <div class="header-section-top">
        <div class="slds-text-heading_large" style="{!'color:' + v.favoriteColors}" >
            {!v.welcomeTitle}
        </div>
       
        <aura:if isTrue="{!v.hideLogo}">
            <div class="header-section-top">
                <img src="{!v.LogoURL}" width="200" height="200" />
            </div>
        </aura:if>
    </div>
   
</aura:component>

DesignResourceDemo.design
 

<design:component>
    <design:attribute name="welcomeTitle" label="Welcome Title" />
    <design:attribute name="hideLogo" label="Hide Logo"/>
    <design:attribute name="LogoURL" label="URL" />
    <design:attribute name="favoriteColors" label="Color" datasource="Red,Black,White,Blue"/>
</design:component>

Output :-

Now With Design Resource Admin can change the Welcome Title,Logo , Image and Color of text.

NOTE:- You can create above picklist as dynamic as well.

You can test the same component from App Builder. Here is Demo.

Related link
1) https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_design_files.htm

 Please check our old post on Lightning :-
 
1) Invoke Apex from Lightning Component 
2) Design Resource In Lightning Component Bundle
3) Component Event in Lightning Component | aura:event
4) Modal/Popup in Lightning Component

Feel free to post your feedback or question.

 
Thanks,
Amit Chaudhary

  @amit_sfdc    #SalesforceApexHours    @ApexHours
  Salesforce Apex Hours