この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

カスタムアクション用のコンポーネントの設定

force:lightningQuickAction または force:lightningQuickActionWithoutHeader インターフェースを Lightning コンポーネントに追加し、Lightning Experience または Salesforce モバイルアプリケーションでカスタムアクションとして使用できるようにします。これらのインターフェースのいずれかを実装するコンポーネントを Lightning Experience と Salesforce アプリケーションの両方でオブジェクト固有のアクションまたはグローバルアクションとして使用できます。

アクションとして使用する場合、force:lightningQuickAction インターフェースを実装するコンポーネントは [キャンセル] ボタンなどの標準アクションコントロールがあるパネルに表示されます。これらのコンポーネントでは、パネルに専用のコントロールを表示および実装できますが、標準コントロールには影響しません。いずれにしても、標準コントロールからのイベントを処理できるように準備しておく必要があります。

ユーザインターフェースを完全に制御する場合は、代わりに force:lightningQuickActionWithoutHeader インターフェースを使用します。force:lightningQuickActionWithoutHeader を実装するコンポーネントは、追加のコントロールなしでパネルに表示され、アクションの完全なユーザインターフェースを提供します。

これらのインターフェースは相互に排他的です。つまり、コンポーネントに force:lightningQuickAction インターフェースまたは force:lightningQuickActionWithoutHeader インターフェースのどちらかを実装できますが、この両方を実装することはできません。コンポーネントは両方の標準ユーザインターフェース要素を表示できないため、両方の標準ユーザインターフェースを表示しません。

Lightning コンポーネントがカスタムアクションとして機能するには、必須としてマークされている各コンポーネント属性のデフォルト値を設定する必要があります。

メモ

コンポーネントの例

カスタムアクションで使用できるコンポーネントの例を次に示します。カスタムアクションの名前は、「Quick Add」など自由に設定することができます(コンポーネントの名前と、そのコンポーネントを使用するアクションの名前が一致する必要はありません)。このコンポーネントでは、2 つの数がすばやく合計されます。

1<!--quickAdd.cmp-->
2<aura:component implements="force:lightningQuickAction">
3
4    <!-- Very simple addition -->
5
6    <lightning:input type="number" name="myNumber" aura:id="num1" label="Number 1"/> +
7    <lightning:input type="number" name="myNumber" aura:id="num2" label="Number 2"/>
8
9    <br/>
10    <lightning:button label="Add" onclick="{!c.clickAdd}"/>
11
12</aura:component>

コンポーネントマークアップは 2 つの入力項目と [追加] ボタンを表示するだけです。

コンポーネントのコントローラが実際のすべての作業を実行します。

1/*quickAddController.js*/
2({
3    clickAdd: function(component, event, helper) {
4
5        // Get the values from the form
6        var n1 = component.find("num1").get("v.value");
7        var n2 = component.find("num2").get("v.value");
8
9        // Display the total in a "toast" status message
10        var resultsToast = $A.get("e.force:showToast");
11        resultsToast.setParams({
12            "title": "Quick Add: " + n1 + " + " + n2,
13            "message": "The total is: " + (n1 + n2) + "."
14        });
15        resultsToast.fire();
16
17        // Close the action panel
18        var dismissActionPanel = $A.get("e.force:closeQuickAction");
19        dismissActionPanel.fire();
20    }
21
22})

ユーザが入力した 2 つの数の取得は簡単ですが、より強固なコンポーネントでは、入力が有効かどうかの確認などを行います。この例の重要な部分は、数がどのように処理されるかと、カスタムアクションがどのように解決するかです。

加算の結果は「toast」に表示されます。これは、ページの上部に表示される状況メッセージです。このトーストは、force:showToast イベントを起動することで作成されます。トーストは結果を表示できる唯一の方法ではありません。また、アクションはトースト専用でもありません。これは、単に Lightning Experience または Salesforce アプリケーションの画面の上部にメッセージを表示するための便利な方法です。

ここでトーストを使用していることに関して重要なことは、その後どのように処理されるかということです。clickAdd コントローラアクションは force:closeQuickAction イベントを起動します。これにより、アクションパネルが閉じられます。ただし、アクションパネルが閉じられてもトーストは依然として表示されます。force:closeQuickAction イベントはアクションパネルによって処理されますが、アクションパネルは閉じられています。force:showToast イベントは one.app コンテナによって処理されるため、パネルが動作している必要はありません。

Lightning コンポーネント開発者ガイド

カスタムアクション用のコンポーネントの設定

コンポーネントの例

関連項目: