Salesforce Lightning组件中的动态可重用自定义列表视图

📖摘要

今天分享下 —— Salesforce Lightning组件中的动态可重用自定义列表视图 的一些基本知识，欢迎关注！

Salesforce始终在开发新功能。最近引入了新的闪电组件，称为“ lightning：listView ”。这有助于我们根据特定对象在闪电体验，闪电社区和Salesforce移动应用程序上的列表视图查看所有记录。在标准的“ lightning：listview”组件中，我们一次只能显示一个列表视图，并且要进行更改，我们需要在代码中再次进行编辑。为了使其更加灵活和动态，我们创建了一个自定义下拉菜单，这将帮助我们直接从闪电组件输出更改列表视图。

❤正题

ListViewController [顶点控制器]

public class listViewController {/*apex method to fetch wrapper of list view*/ @AuraEnabledpublic static list<listViewWrapper> listValues(string objectInfo){list<listViewWrapper> oListViewWrapper = new list<listViewWrapper>();for(ListView lv : [SELECT id, Name, DeveloperName FROM ListViewWHERE sObjectType = : objectInfo ORDER By Name ASC]){ listViewWrapper oWrapper = new listViewWrapper();oWrapper.label = lv.Name;oWrapper.developerName = lv.DeveloperName;oListViewWrapper.add(oWrapper);}return oListViewWrapper; }/*wrapper class to store listView details*/ public class listViewWrapper{@AuraEnabled public string label{get;set;} @AuraEnabled public string developerName{get;set;} }
}

闪电组件[CustomListView.cmp]

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"controller="listViewController"><!-- call doInit js function on component load to fetch list view details-->   <aura:handler name="init" value="this" action="{!c.doInit}"/><!-- aura attributes -->   <aura:attribute name="listViewResult" type="string[]"/><aura:attribute name="objectInfo" type="string" default="Account"/><aura:attribute name="currentListViewName" type="string" /><aura:attribute name="bShowListView" type="boolean" default="false"/> <!-- custom dropdown to display available list view options--><div class="slds-form-element"><lightning:select name="select1" onchange="{!c.onPicklistChange}" label=" " class="customCls"><aura:iteration items="{!v.listViewResult}" var="listView"><option value="{!listView.developerName}">{!listView.label}</option></aura:iteration> </lightning:select> </div><!-- lightning List View : https://sforce.co/2Q4sebt--> <aura:if isTrue="{!v.bShowListView}"><lightning:listView objectApiName="{!v.objectInfo}"listName="{!v.currentListViewName}"rows="5"showSearchBar="true"showActionBar="false"enableInlineEdit="true"showRowLevelActions="false"/></aura:if> 
</aura:component>

在此列表视图示例中，我们使用了 Account 对象，您可以根据闪电组件第10行的要求更改对象API（区分大小写）的名称

JavaScript控制器[CustomListViewController.js]

({doInit : function(component, event, helper) {// call apex method to fetch list view dynamically var action = component.get("c.listValues");action.setParams({"objectInfo" : component.get("v.objectInfo")});action.setCallback(this, function(response) {var state = response.getState();if (state === "SUCCESS") {var listViewResult = response.getReturnValue();if(listViewResult.length > 0){// set listViewResult attribute with responsecomponent.set("v.listViewResult",listViewResult);// set first value as default valuecomponent.set("v.currentListViewName", listViewResult[0].developerName);// rendere list view on componentcomponent.set("v.bShowListView", true);     }            } else if (state === "INCOMPLETE") {}else if (state === "ERROR") {var errors = response.getError();if (errors) {if (errors[0] && errors[0].message) {console.log("Error message: " + errors[0].message);}} else {console.log("Unknown error");}}});$A.enqueueAction(action);},onPicklistChange: function(component, event, helper) {// unrenders listView component.set("v.bShowListView", false); // get current selected listview Name var lstViewName = event.getSource().get("v.value"); // set new listName for listViewcomponent.set("v.currentListViewName", lstViewName);// rendere list view again with new listNew  component.set("v.bShowListView", true); },
})

• 注意：检查代码注释。

CSS [CustomListView.css]

/* align picklist inside list view*/
.THIS .customCls{margin-top: -10px;width: 50%;position: absolute;right: 17px;
}

效果：

🎉最后

• 更多参考精彩博文请看这里：《salesforce 系列》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！