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

摘要

---

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

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

---

❤正题

---

ListViewController [顶点控制器]

public class listViewController {
    /*apex method to fetch wrapper of list view*/ 
    @AuraEnabled
    public static list<listViewWrapper> listValues(string objectInfo){
 
        list<listViewWrapper> oListViewWrapper = new list<listViewWrapper>();
 
        for(ListView lv : [SELECT id, Name, DeveloperName FROM ListView
                           WHERE 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 response
                    component.set("v.listViewResult",listViewResult);
                    // set first value as default value
                    component.set("v.currentListViewName", listViewResult[0].developerName);
                    // rendere list view on component
                    component.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 listView
        component.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 系列》

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