Friday 24 August 2018

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


<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="" 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}" >
        <aura:if isTrue="{!v.hideLogo}">
            <div class="header-section-top">
                <img src="{!v.LogoURL}" width="200" height="200" />
    <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"/>

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

 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.
Amit Chaudhary

Capture.JPG  @amit_sfdc    #SalesforceApexHours    @ApexHours
  Salesforce Apex Hours 

No comments:

Post a Comment