【Salesforce】Lightningコンポーネントの基本テンプレート（アクションから呼び出し）

Lightningコンポーネント

　Lexコンポーネントの基本的な使い方の一つとして「Lightningアクション」から呼び出すというものがあります。
　今回はこのLightningアクションから呼び出すLightningコンポーネントのテンプレート（雛型）になりそうなものを
　ご用意しました。

仕様

　単純に下記のような動作をするものを作成しました。
　
　アクションを押下　→　Apexクラス側で何らかの処理を実行　→　実行結果の受け取りと表示

　サンプル）
　　

Lihgtningコンポーネント

Lihgtningコンポーネント（画面側）：

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,force:hasSObjectName" access="global" controller="LexTemplate01Ctrl">

    <aura:html tag="style">
        .cuf-content {
        padding: 0 0rem !important;
        }
        .slds-p-around--medium {
        padding: 0rem !important;
        }
        .slds-modal__content{
        overflow-y:hidden !important;
        height:unset !important;
        max-height:unset !important;
        }
        .red_text{
            color: red;
        }
    </aura:html>

    <!--ボタンを押下したオブジェクトのSalesforceID-->
    <aura:attribute name="recordId"     type="Id" />
    <aura:attribute name="errorMessage" type="String" />
    <aura:attribute name="isDisable"    type="Boolean" default="true"/>

    <!--初期処理-->
    <aura:handler   name="init" action="{!c.init}" value="{!this}" />

    <!--Modal Header-->
    <div class="modal-header slds-modal__header slds-size_1-of-1">
        <h4 class="slds-text-heading--label">[任意の機能名を設定]</h4>
    </div>

    <!--Modal Body-->  
    <div class="slds-modal__content slds-p-around--small slds-align_absolute-center  slds-is-relative">
        <!-- エラーメッセージが設定されていなければ非表示 -->
        <aura:if isTrue="{! !empty(v.errorMessage) }" >
            <form class="slds-form--stacked">
                <!-- エラーメッセージ-->
                <!-- エラーメッセージが設定されていなければ非表示 -->
                <aura:if isTrue="{! !empty(v.errorMessage) }" >
                    <p><ui:outputText value="{!v.errorMessage}" /></p>
                </aura:if>
            </form>
        </aura:if>
        <!-- spinner -->
        <div id="spinner" style="display:block; height:10vh;">
                <div class="slds-spinner slds-spinner_medium" >
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
        </div>
        <!--End spinner -->
    </div>

    <!--Modal Footer-->
    <div class="modal-footer slds-modal__footer slds-size_1-of-1">
        <!--閉じるボタン ※ボタン名を変更する場合はlabel要素を変更してください -->
        <ui:button class="slds-button slds-button--neutral" press="{!c.close}"  label="閉じる" disabled="{!v.isDisable}"/>
    </div>
</aura:component>

Lightningコンポーネント（コントローラ）※今回ヘルパーは使っておりません。

Lightningコンポーネント（コントローラ）

({
    init : function(component, event, helper) {

        var recordId = component.get("v.recordId");
        var action  = component.get("c.executeTargetProgram");
        // 引数設定
        action.setParams({
            "recordId" : recordId
        });
        // 戻り値（String型）
        action.setCallback(this, function(data){
            component.set("v.errorMessage", data.getReturnValue() );
            var errorMessage = component.get("v.errorMessage");
            console.log( "errorMessage = " + errorMessage );
            if( errorMessage == "" ) {
                $A.get("e.force:closeQuickAction").fire();
            }
            // スピナー表示
            var spinner = document.getElementById("spinner");
            spinner.style.display = "none";
            component.set("v.isDisable",false);
        });
        $A.enqueueAction(action);

    },
    // キャンセル処理
    close : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    }
})

Lightningコンポーネントのロジッククラス

Lightningコンポーネントのロジッククラス：

public with sharing class LexTemplate01Ctrl {

    public LexTemplate01Ctrl () {
        //nop
    }

    @AuraEnabled
    public static String executeTargetProgram( Id recordId ) {

        // 渡したレコードIDに付随する情報が必要の場合は使用。
        List<Account> acc = findRecord(recordId);

        // LEXコンポーネントに返却する値
        String resultStr = '';
        resultStr = '正常に処理が実行されました。';

        // 戻り値の結果を加工してLEXコンポーネントに渡したい場合は個別に分岐を設けてください。
        /*
        if ( tmp_resultStr != XXXXX) {
            resultStr = '';
        }
        */
        return resultStr;
    }

    private static List<Account> findRecord(Id recordId) {
        List<Account> acc = [SELECT
                                Id
                             FROM
                                Account
                             WHERE
                                Id =: recordId];
        return acc;
    }
}

最後に

　あくまでも最低限の流れを確保する一例に過ぎないのでより優れた実装方法に改善する余地は十分にあります。
　適宜、要件などに合わせて肉付けする骨子になるようなものとお考えください。
　Lexコンポーネントってどう作ればいいの？という段階の方へ少しでもとっかかりになれば幸いです。