Lightning Component汎用化シリーズ（CallApex）

#1.aura:methodにより、コンポネット汎用化について

#2.Apexのエラーハンドリングについて

#3.Spinnerの制御について

#4.サービスコンポネット実装

fw_CallApexService.cmp

<aura:component>
	<aura:method name="callApex" action="{!c.onCallApex}">
		<aura:attribute name="callerComponent" type="Aura.Component" />
		<aura:attribute name="actionMethod" type="String" />
		<aura:attribute name="actionParameter" type="Object" />
		<aura:attribute name="callback" type="function" />
	</aura:method>
    
    <aura:attribute name="isShowSpinnerFlg" type="boolean" default="false"/>
	<aura:if isTrue="{!v.isShowSpinnerFlg}">
    	<lightning:spinner variant="brand" size="large"/>
    </aura:if>
</aura:component>

fw_CallApexServiceController.js

({
	onCallApex : function(component, event, helper) {
        component.set("v.isShowSpinnerFlg", true);
		
		let params = event.getParams().arguments;
		
		let callerComponent = params.callerComponent;
		let actionMethod = params.actionMethod;
		let actionParameter = params.actionParameter;
		let callback = params.callback;
		
		let action = callerComponent.get(actionMethod);
		action.setParams(actionParameter);
		action.setCallback(this, function(response) {
			// レスポンス用のオブジェクトを取得
			let returnValue = response.getReturnValue();
			if (response.getState() === "SUCCESS") {
				// サーバ側から受信した
				callback(returnValue);
			} else if (response.getState() === "ERROR") {
				let errors = response.getError();
				if (errors && Array.isArray(errors) && errors.length > 0) {
					// サーバーサイドでcatchできなかったパターン
					helper.defaultErrorHandler(errors);
				}
			} else {
				// Handle other reponse states
				// 例：state === "INCOMPLETE"
			}
			
	        component.set("v.isShowSpinnerFlg", false);
		});
		
		$A.enqueueAction(action);
	}
})

fw_CallApexServiceHelper.js

({
	defaultErrorHandler : function(errors) {
		let toastParams = {
			title: "error",
			message: "Unknown error",
			type: "error",
			mode: "sticky"
		};
		
		if (errors && Array.isArray(errors) && errors.length > 0) {
			console.error(JSON.stringify(errors));
			toastParams.message = errors[0].message;
		}
		
		let toastEvent = $A.get("e.force:showToast");
		toastEvent.setParams(toastParams);
		toastEvent.fire();
	},
})

#5.使用例

DataServiceController.cls

public with sharing class DataServiceController {
	@AuraEnabled
	public static ReturnValue getContacts(String filter) {
		ReturnValue returnValue = new ReturnValue();
		try{
			List<Contact> contactList;
			if(String.isEmpty(filter)) {
				contactList = [SELECT Id, Name, Email FROM Contact LIMIT 10];
			} else {
				String filterString = '%' + filter + '%';
				contactList = [SELECT Id, Name, Email FROM Contact WHERE Name LIKE :filterString LIMIT 10];
			}
			// 正常終了
			returnValue.isSuccess = true;
			returnValue.contactList = contactList;
		} catch(Exception e){
			// 異常終了
			returnValue.isSuccess = false;
			returnValue.message = 'システムエラーが発生しました。' + e.getMessage();
		}
		return returnValue;
	}
	
	public class ReturnValue {
		@AuraEnabled
		public Boolean isSuccess { get; set; }
		
		@AuraEnabled
		public String message { get; set; }
		
		@AuraEnabled
		public List<Contact> contactList { get; set; }
	}
	
}

CustomPagination.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="DataServiceController">
	<!-- サービスコンポネット -->
	<c:fw_CallApexService aura:id="callApexService"/>
	
	<!-- 受信イベント -->
	<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
	
	<!-- attribute -->
	<aura:attribute name="data" type="Object"/>
	<aura:attribute name="columns" type="List"/>
	
	<aura:attribute name="allData" type="List"/>
	<aura:attribute name="currentPageNumber" type="Integer" default="1"/>
	<aura:attribute name="pageSize" type="Integer" default="5"/>
	<aura:attribute name="totalPages" type="Integer" default="false"/>
	
	<!-- ～～省略～～ -->
</aura:component>

CustomPaginationHelper.js

({
	getAllData : function(component, helper) {
		let callApexService = component.find("callApexService");
		callApexService.callApex(
			component,
			"c.getContacts",
			{"filter": ""},
			function(returnValue){
				if (returnValue.isSuccess) {
					component.set("v.allData", returnValue.contactList);
					component.set("v.totalPages", Math.ceil(component.get("v.allData").length / component.get("v.pageSize")));
					component.set("v.currentPageNumber", 1);
					helper.buildData(component, helper);
				} else {
					console.log('サーバ側にシステムエラーを発生しました。: ' + returnValue.message);
				}
			}
		);
	},

	// ～～省略～～
})

#6.参照資料
・Lightning ComponentにおけるApexCallsの汎用化
　　 https://qiita.com/isanuki/items/51f76c578f8a39bc53e5
・LightningComponent開発におけるApexのエラーハンドリング方法
　　 https://www.terrasky.co.jp/blog/2015/151202_001522.php