Salesforce之Lightning学习：design:component的使用

1. 用于Lightning Pages和Lightning App Builder
2. 可以在Lightning app builder中显示组件属性，管理员可以配置该组件参数及功能，对user不可见
3. 为属性指定一些值，比如下拉列表等

例子1：实现同一个组件，可以配置Account/Contact/Lead 三个对象名作为参数，分别展示其对应数据

ListView.cmp:

<aura:component controller="ListViewController" implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="objectName" type="String" default="Account" required="true" />
    <aura:attribute name="repList" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <table>
        <thead class="slds-table slds-table--bordered slds-table--cell-buffer">
            <th>序号</th>
            <th>Object Name</th>
            <th>ID</th>
            <th>Name</th>
        </thead>
        <tbody>
            <aura:iteration items="{!v.repList}" var="item" indexVar="index">
                <tr>
                    <td>{!index+1}</td>
                    <td>{!v.objectName}</td>
                    <td>{!item.Id}</td>
                    <td>{!item.Name}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

ListView.disign

<design:component>
    <design:attribute name="objectName" datasource="Account,Contact,Lead" default="Account" label="Obejct Name" required="true"/>
</design:component>

ListViewController.js

({
    doInit : function(component, event, helper) {
        var objectName = component.get("v.objectName");
        helper.callListViewServer(
            component,
            "c.getListViewData",
            function(response){
                component.set("v.repList",response);
            },
            {"objectName": objectName}
        );
    }
})

ListViewHelper.js

tips:
可将后台交互方法写成共有方法，充分利用callback函数。
常用的写法如下：

callListViewServer : function(component, event){
    var action = component.get("c.XXX");
    action.setParams(params);
    action.setCallback(XXX)；
    $A.enqueueAction(action);
}

弊端是每次调用后台都要去写类似语句

// 改进后，将method, callback, params作为参数去传递，
// 在controller中去处理response内容
({
     callListViewServer : function(component, method, callback, params) {
          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('连接失败，请重试！');
            }
        });
          $A.enqueueAction(action);
    }
})

ListViewController .cls

global class ListViewController {
    @auraEnabled
    public static List<SObject> getListViewData(String objectName){
        String query = 'select Id,Name from Account limit 10';
        if (objectName != null) {
            query = 'select Id,Name from '+ objectName +' limit 10';
        }
        return Database.query(query);
    }
}

预览效果如下：三个框都是同一个组件，右边可以切换不同的对象，数据源即design:attribute里面datasource配置的列表，组件根据对象名来加载不同的数据

备注：

1. design:attribute 的参数只支持String,int,和Boolean

例子2：实现同一个组件，可以配置Account/Contact/Lead 三个参数，但是参数列表可以后台动态读取， 分别展示其对应数据

1.将类继承 VisualEditor.DynamicPickList并重写其两个方法，这里我用控制类继承，也可以使用其它单独的类

ListViewController .cls

global class ListViewController extends VisualEditor.DynamicPickList{
    
    @auraEnabled
    public static List<SObject> getListViewData(String objectName){
        String query = 'select Id,Name from Account limit 10';
        if (objectName != null) {
            query = 'select Id,Name from '+ objectName +' limit 10';
        }
        return Database.query(query);
    }

    global override VisualEditor.DataRow getDefaultValue(){
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('客户', 'Account');
        return defaultValue;
    }
    /**
     * @Author   Mick
     * @DateTime 2018-07-23
     * @Editor   Mick
     * @EditTime 2018-07-23
     * @Function [获取选项列表值]
     */
    global override VisualEditor.DynamicPickListRows getValues() {
        // 可以将列表值以配置的方式存储或者查询自己想要的列表值
        // 另外也可以使用Schema.getGlobalDescribe()等获取系统所有的Object作为列表
        VisualEditor.DynamicPickListRows myValues = new VisualEditor.DynamicPickListRows();
        // VisualEditor.DataRow(label,value);
        myValues.addRow(new VisualEditor.DataRow('客户','Account'));
        myValues.addRow(new VisualEditor.DataRow('联系人','Contact'));
        myValues.addRow(new VisualEditor.DataRow('潜在客户','Lead'));
        myValues.addRow(new VisualEditor.DataRow('个案','Case'));
        return myValues;
    }
}

2.修改disign:attribute的datasource:

ListView.disign

<design:component>
   <!--  <design:attribute name="objectName" datasource="Account,Contact,Lead" default="Account" label="Obejct Name" required="true"/> -->
   <design:attribute name="objectName" datasource="apex://ListViewController" label="Obejct Name" required="true"/>
</design:component>

效果图如下：

（刚开始写，欢迎大家互相交流指正，后续会写一些工作中的心得）