インライン編集データテーブルの実装方式

令和時代にインライン編集データテーブルの実装はどうやってシンプルに実装できるか

furuTeamのテクニカルブログにて紹介いたします。

Summer 18リリースには提供する機能がたくさんありありました。 その中に「editable lightning data table」というフィーチャーがあってこのフィーチャーを応用して 単なる取引先インライン編集データテーブルを以下のソースコードの通り説明いたします。

  1. Apexコントローラー
public class furu_AccountCC {
    @AuraEnabled
    public static List<Account> getAccounts(){
        return [SELECT
               Id, Name, Phone, Rating, CAPS__Active__c
               FROM Account LIMIT 100];
    }

    @AuraEnabled
    public static boolean updateAccounts(List<Account> editedAccountList){
        try{
            update editedAccountList;
            return true;
        } catch(Exception e){
            return false;
        }
    }
}
  1. コンポネント(furu_AccountEditableGrid)
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" controller="furu_AccountCC">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="recordId" type="String"/>
    <!-- データテーブルにて変更中データ格納属性-->
    <aura:attribute name="updatedRecord" type="Object[]" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <lightning:card title="インライン編集データテーブル">
        <lightning:datatable
                             aura:id="accountEditableTable"
                             columns="{! v.columns }"
                             data="{! v.data }"
                             keyField="Id"
                             onsave ="{!c.onSave}"
                             hideCheckboxColumn="true"
                             onrowaction="{! c.handleRowAction }" />
    </lightning:card>
</aura:component>
  1. コンポネントのjsコントローラー
({
    doInit : function(component, event, helper) {        
        component.set('v.columns', [
            {label: '取引先名', fieldName: 'Name', editable:'true', type: 'text'},
            {label: '電話', fieldName: 'Phone', editable:'true', type: 'phone'},
            {label: '評価', fieldName: 'Rating', editable:'true', type: 'text'},
            {label: '有効・無効', fieldName: 'CAPS__Active__c', editable:'true', type: 'picklist'}
        ]);        
        helper.getAccounts(component, helper);
    },
    onSave : function (component, event, helper) {
        helper.saveDataTable(component, event, helper);
    }
})
  1. コンポネントのjsヘルパー
({
    getAccounts : function(component, event, helper) {
        var action = component.get("c.getAccounts");
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.data", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    saveDataTable : function(component, event, helper) {
        var editedRecords =  component.find("accountEditableTable").get("v.draftValues");
        var totalRecordEdited = editedRecords.length;
        var action = component.get("c.updateAccounts");
        action.setParams({
            'editedAccountList' : editedRecords
        });
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                //正常に更新された場合
                if(response.getReturnValue() === true){
                    helper.showToast({
                        "title": "取引先更新",
                        "type": "success",
                        "message": totalRecordEdited+" 取引先が更新されました。"
                    });
                    helper.reloadDataTable();
                } else{ //if update got failed
                    helper.showToast({
                        "title": "エラー",
                        "type": "error",
                        "message": "更新失敗"
                    });
                }
            }
        });
        $A.enqueueAction(action);
    },

    /*
     * Show toast with provided params
     * */
    showToast : function(params){
        var toastEvent = $A.get("e.force:showToast");
        if(toastEvent){
            toastEvent.setParams(params);
            toastEvent.fire();
        } else{
            alert(params.message);
        }
    },

    /*
     * reload data table
     * */
    reloadDataTable : function(){
    var refreshEvent = $A.get("e.force:refreshView");
        if(refreshEvent){
            refreshEvent.fire();
        }
    },
})

Happy Coding !

We love salesforce Lightning

furuCRMオフショア開発にてほとんど何でも実現可能

Posted in Apex, Lightning Components, Salesforce, Vietnam Offshore on May 04, 2019