- 用于Lightning Pages和Lightning App Builder
- 可以在Lightning app builder中显示组件属性,管理员可以配置该组件参数及功能,对user不可见
- 为属性指定一些值,比如下拉列表等
例子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配置的列表,组件根据对象名来加载不同的数据
备注:
- 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>
效果图如下:
(刚开始写博客,欢迎大家互相交流指正,后续会写一些工作中的心得)