Monday, March 6, 2017

Why to use design resource in Lightning bundle and how to add dynamic Options in datasource for Design Component

In Lightning Bundle, design resource helps in displaying components attributes in lightning app builder so that user can select attribute values and component behaves accordingly.

When to use design resource in lightning?


If you create a component which will be used in standalone lightning app, then you can pass attributes values for component and component will work accordingly but what if you component will be used in Lightning app builder while creating a lightning page. In this case how you will pass attributes values apart from default values.
So design resource helps you to specify some values to attributes which can be selected by Admin in lightning app builder. Below are 2 scenarios in which you should specify attributes in design resource otherwise they will not appear for users in Lightning App Builder.
  1. Required attributes which have default values
  2. Attributes which are not marked as required in component definition.
Let me explain this with an example.

I have created a component which display records from different objects. As of now for, I am going to display only record Id and name fields in table.

GenericListView.cmp

<aura:component controller="GenericListViewController"  implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="objectName" type="String" default="Contact" required="true"/>
    <aura:attribute name="recList" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:if isTrue="{!v.recList.length > 0}">
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
            <th scope="col">RecordId</th>
            <th scope="col">Name</th>
            </tr>
        </thead>
        <aura:iteration items="{!v.recList}" var="item">
        <tr>
        <td> {!item.Id}</td>
            <td> {!item.Name}</td>
        </tr>
        </aura:iteration>
    </table>
    </aura:if>
</aura:component>

GenericListViewController.js

({
doInit : function(component, event, helper){
        var objname=component.get("v.objectName");
        //alert('objname:'+objname);
        var params ={}
        helper.callServer(
            component,
            "c.findRecords",
            function(response){
                //alert('Response from controller for opportunities:'+JSON.stringify(response));
                component.set("v.recList",response);
            },
            {objectName: objname}
        );
    }
})

GenericListViewHelper.js

({
callServer : function(component, method, callback, params) {
        //alert('Calling helper callServer function');
var action = component.get(method);
        if(params){
            action.setParams(params);
        }
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                callback.call(this,response.getReturnValue());
            }else if(state === "ERROR"){
                alert('Problem with connection. Please try again.');
            }
        });
$A.enqueueAction(action);
    }
})

GenericListViewController apex class

Global class GenericListViewController{
@auraEnabled
    public static List<sobject> findRecords(string objectName){
        string queryString ='';
        List<sobject> returnList=new List<sobject>();
        if(objectName !=null ){
    queryString='select Id, name from '+ objectName + '  Order by lastmodifiedDate DESC Limit 10';
        }else{
            queryString='select Id, name from Contact   Order by lastmodifiedDate DESC Limit 10';  
        }
        system.debug('**queryString:'+queryString);
        returnList=database.query(queryString);
    return returnList;
    }
}

Now if you use this component in Lightning app builder, then you will not get any option to specify "ObjectName" attribute value and component will take default value which is "Contact" as specified in component definition.

Now if you want that admin will get option to select ObjectName so that component will display records from that object, then add attribute in design resource. Below is sample code:

GenericListView.design

<design:component >
<design:attribute name="objectName" datasource="Contact,Account,Opportunity" />
</design:component>

After saving this file you will get option to select object name in app builder.

Note:
  1. What ever you specify in datasource seperated by comma will appear as dropdown in Lightning app builder.
  2. Design resource supports only text, boolean and int.

How to add dynamic options to datasource in design components?


You have to follow below steps to implement this:
  • Create a Apex class which will be used to provide dynamic values. Apex class must extend the VisualEditor.DynamicPickList abstract class.
  • Specify datasource as this apex class while creating attribute in design resorce.

GenericListViewController apex class

Global class GenericListViewController extends VisualEditor.DynamicPickList{
@auraEnabled
    public static List<sobject> findRecords(string objectName){
        string queryString ='';
        List<sobject> returnList=new List<sobject>();
        if(objectName !=null ){
    queryString='select Id, name from '+ objectName + '  Order by lastmodifiedDate DESC Limit 10';
        }else{
            queryString='select Id, name from Contact   Order by lastmodifiedDate DESC Limit 10';  
        }
        system.debug('**queryString:'+queryString);
        returnList=database.query(queryString);
    return returnList;
    }
    global override VisualEditor.DataRow getDefaultValue(){
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('contact', 'Contact');
        return defaultValue;
    }
    global override VisualEditor.DynamicPickListRows getValues() {
        Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
        VisualEditor.DynamicPickListRows  myValues = new VisualEditor.DynamicPickListRows();
        VisualEditor.DataRow value1 = new VisualEditor.DataRow('Contact', 'Contact');
        myValues.addRow(value1);
        VisualEditor.DataRow value2 = new VisualEditor.DataRow('Account', 'Account');
        myValues.addRow(value2);
        VisualEditor.DataRow value3 = new VisualEditor.DataRow('Lead', 'Lead');
        myValues.addRow(value3);
        //Or you use object describe ti find all object details
        /*for(String ss1: schemaMap.keyset()){
            Schema.SObjectType objToken=schemaMap.get(ss1);
            Schema.DescribeSObjectResult objDescribe=objToken.getdescribe();
            VisualEditor.DataRow value11 = new VisualEditor.DataRow(objDescribe.getLabel(), objDescribe.getName());
            myValues.addRow(value11);
        }
*/
        return myValues;
    }
}

In this class, I am specifying Contact, Account and Lead object. You can use object describe if you want to display all object name from your org or you can add any values.

Modify you GenericListView.design code as shown below:

<design:component >
<design:attribute name="objectName" datasource="apex://GenericListViewController"/>
</design:component>

Now if you use this component in Lightning app builder then, you will get Contact, Account and Lead as Object name attribute options;



In this way you can pass values from apex class to datasource in design attributes.

Hope this will help!!!

Looking forward for everyone feedback..


More Blogs>>: 
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
DYNAMIC APEX IN SALESFORCE    
FETCHING FILE FROM EXTERNAL/PUBLIC URL AND STORING IT IN SALESFORCE    

30 comments:

  1. Hi...Sunil design is not showing ....lyk ur stuff...only showing id , name...

    ReplyDelete
    Replies
    1. Hi Jagannath,

      In order to see design attributes, you need to create app page using lightning app builder and add this component, then you will see option to set design parameters.

      In Table, I am displaying only 2 columns ids and name. You can customize as per your requirement.

      Let me know if it answer your question. If no then share some more details about issue your are facing.

      Regards,
      Sunil Kumar

      Delete
  2. Thank you so much I got it...Good Work

    ReplyDelete
  3. I just couldn't leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts. town planning

    ReplyDelete
  4. Anyway before proceeding with Salesforce execution, here are some significant viewpoints to take in to thought before proceeding with the CRM usage process. salesforce for nonprofits

    ReplyDelete
  5. That is the excellent mindset, nonetheless is just not help to make every sence whatsoever preaching about that mather. Virtually any method many thanks in addition to i had endeavor to promote your own article in to delicius nevertheless it is apparently a dilemma using your information sites can you please recheck the idea. thanks once more. freelance web designer peter

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Great Stuff. I have a reusable lightning component which would need dynamic picklist values to be passed to builder tools(like App builder) for admins to configure. I setup this component as a quick action and i couldn't be able to figure out a way to pass the picklist values using design resource. Currently I'm creating wrapper component to pass the parameter every time I'm using the reusable component. I would like to know if there is a way to use design resource in lightning component that setup as a quick action.

    ReplyDelete
  8. Please continue this great work and I look forward to more of your awesome blog posts. salesforce

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Some times its a pain in the ass to read what blog owners wrote but this internet site is really user genial ! . brand identity design agency

    ReplyDelete
  11. With the evolvement of Salesforce it has become the need of the hour for individuals to keep themselves updated with the latest developments. Salesforce training in Chennai

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Recording an interview with you is the perfect opportunity for you to clearly and informally state the goals of your company, and to get them out deep and wide to every employee within your organization. Salesforce training in Chennai

    ReplyDelete
  14. Baccarat is money making and it's outstanding accessibility. The best In your case it's found that you'll find rather fascinating choices. And that is considered to be a thing that's rather different And it's very something that's rather happy to strike with The most wonderful, as well, is a very good alternative. Furthermore, it's a truly fascinating alternative. It's the simplest way which could generate profits. Superbly prepar The variety of best earning baccarat is the accessibility of generting by far the most cash. Almost as possible is so suitable for you A substitute which can be assured. To a wide variety of efficiency and availability And find out excellent benefits as well.บาคาร่า
    ufa
    ufabet
    แทงบอล
    แทงบอล
    แทงบอล

    ReplyDelete
  15. A trained salesforce is always an asset when they dealing with the customers of the company, if customer comes with in a complaint, doubt or any query about your product and services they want to be immediately result. salesforce interview questions latest

    ReplyDelete
  16. While being creative, we base our strategies on time-tested principles that have top security companies in London
    been proven to work. This explains why our plans are always resilient in the face of all manner of challenges. Our highly trained and experienced guards make sure every step is taken with consummate skill, passion, and pride.

    ReplyDelete
  17. On this subject internet page, you'll see my best information, be sure to look over this level of detail. this website

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing...
    เว็บยูฟ่าเบท

    ReplyDelete
  20. Discover the latest women fitness wear at Nayza. We offer a wide range of stylish and comfortable fitness wear that's perfect for any workout.

    ReplyDelete
  21. Explore Ahmad Shahjahan's most recent shalwar kameez design. Our stunning variety of patterns will perfectly match traditional dress. Shop now!

    ReplyDelete
  22. Discover unique and elegant velvet dress design by Ammara Khan. Browse our collection of Pakistani velvet dresses and velvet kaftans for a truly luxurious and stylish look.

    ReplyDelete