Salesforce学习 mitoco（三）LightningComponent的利用方法

通过这几天mitoco的应用，我们知道可以在Calendar上新规做成Event事件，比如下边操作

可以对做成的Event事件进行删除和修改和复制↓↓↓

今天的重点是讲解如何在上边的画面中引入自定义Lightning Component，步骤如下。

1.Lightning Componentの開発

lightningComponentForMitocoSample.cmp

代码语言：javascript复制

<aura:component access="GLOBAL" extends="TSMNTCLB:CAL_EventItemBase">
    <aura:handler name="change" value="{!v.eventData}" action="{!c.onChangeEventData}" />
    <aura:attribute access="public" name="dataString" type="String" default="" description="親cmpから渡された作成/編集/閲覧中のEventデータの内容を文字列にしたもの" />
    <div class="{!v.isEditable ? 'edit' : 'view'}">
    <aura:if isTrue="{!v.isEditable}">
        <aura:if isTrue="{!v.Id == ''}">
            <h1>新規作成画面用({!v.isEnabled ? '操作可能' : '操作不可能'})。</h1>
        <aura:set attribute="else">
            <h1>編集画面用({!v.isEnabled ? '操作可能' : '操作不可能'})。</h1>
        </aura:set>
        </aura:if>
        <aura:set attribute="else">
            <h1>閲覧画面用</h1>
        </aura:set>
    </aura:if>
    </div>
    <p>こちらはテストカスタムコンポーネントです。</p>
    <hr />
    <ui:outputText value="{!v.dataString}" />
</aura:component>

lightningComponentForMitocoSampleHelper.js

代码语言：javascript复制

({
    save: function(component, helper, param) {
        // 作成された予定のIDはparam.Idで取得できます。
        component.getEvent("onStartSave").fire({payload: {}});
        setTimeout(function() {
            component.getEvent("onSuccessSave").fire({payload: {}});
        }, 3000);
    },
    delete: function(component, helper, param) {
        // 削除された予定のIDはparam.Idで取得できます。
        component.getEvent("onStartDelete").fire({payload: {}});
        setTimeout(function() {
            component.getEvent("onSuccessDelete").fire({payload: {}});
        }, 3000);
    },
    // 予定の作成/編集画面に表示している内容が変更された際にコールされる
    onChangeEventData: function(component, helper) {
        var arr = [];
        var eventData = component.get("v.eventData");
        Object.keys(eventData).forEach(function (key) {
        var val = typeof(eventData[key]) === "object" ? JSON.stringify(eventData[key]) : eventData[key];
            arr.push(key   " ＝ "   val);
        }, eventData);
        component.set("v.dataString", arr.join("n"));
    },
})