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 系列》

• 喜歡博主的小夥伴可以加個關注、點個贊哦，持續更新嘿嘿！