8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

フローでレコードをリダイレクトしてメッセージ表示をさせてみた

Posted at

##フローの手の届かないところ
フローをそこそこ使えるようになると不便だなと思うところが、標準機能では作成したレコードにリダイレクトが出来ないことです。また成功メッセージの表示も標準では出来ないことです。

こうした不便を解消するためにはフローで使えるコアアクションを作成し、フローに設定する必要があります。

コアアクションの作成にはAuraコンポーネント(Lightning コンポーネント)を使います。開発者コンソールを起動してFile > New > Lightning componentで名前を決めれば最初のコンポーネントが表示されます。必要に応じて右側にあるCONTROLLERやDESIGNをCreateすればそれぞれコードの入力が可能です。

開発者コンソール.png

##レコードのリダイレクト

RedirectRecord.cmp

<aura:component implements="force:lightningQuickAction,lightning:availableForFlowActions">
   <aura:attribute name="recordId" type="String" />
</aura:component>

RedirectRecordController.js

({    invoke : function(component, event, helper) {
   var record = component.get("v.recordId");
   var redirect = $A.get("e.force:navigateToSObject");
   redirect.setParams({
      "recordId": record
   });
   redirect.fire();
}})

RedirectRecord.design

<design:component>
   <design:attribute name="recordId" label="Record ID" />
</design:component>

これはヘルプ記載のままです。
ローカルアクションを使用したフローユーザのリダイレクト

##成功メッセージの表示

MessageCoreAction.cmp

<aura:component implements="lightning:availableForFlowActions">
    <aura:attribute name="type" type="string" />
    <aura:attribute name="title" type="string" />
    <aura:attribute name="message" type="string" />    
</aura:component>

MessageCoreActionController.js

({
    invoke : function(component, event, helper) {
        var type = component.get("v.type").toLowerCase(); 
        var title = component.get("v.title");
        var message = component.get("v.message");
        helper.showToast(type, title, message);
    }
})

MessageCoreActionHelper.js

({
    showToast : function(type, title, message) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": title,
            "message": message,
            "type": type
        });
        toastEvent.fire();
    }
})

MessageCoreAction.design

<design:component >
    <design:attribute name="type" label="種別" />
    <design:attribute name="title" label="タイトル"  />
    <design:attribute name="message" label="メッセージ" required="true" />
</design:component>

以下のサイトを参考にして作成しています。
Show Toast – Flow Action – UnofficialSF
Aura コンポーネントバンドルのデザインリソース
Toast Message in Salesforce flow – Deepthi Thati

##レコードリダイレクトとメッセージ表示のフロー

上記を使用したサンプルとしてシンプルな商談作成のフローを作成しました。
フロー:リダイレクト・メッセージ表示.png

まずは相互関係のアクションを選択し、先ほど作成したリダイレクトのAuraコンポーネントを選択します。そうするとラベル・API名・入力値の設定が設定できるのでそちらの設定を行います。Record IDにはリダイレクトしたいレコードを指定します。今回は作成したレコードにリダイレクトしたいのでそれを選択します。

コアアクション:リダイレクト.png

おなじようにアクションから成功メッセージのAuraコンポーネントを選択し入力を行っていきます。メッセージは入力しないと表示されませんので、必須の設定にしています。また種別はsuccess以外にもerror、waringなど必要に応じて表示メッセージの外観を変えることができます。タイトルを入力するとタイトルとメッセージの2段に分けて表示することができます。

フロー:メッセージ表示.png

なお、フロービルダーのデバッグではレコードのリダイレクトや表示メッセージを確認できません(デバッグの詳細には表示されます)。

上手く設定が出来れば次のような感じで作成できるはずです。

レコードリダイレクトとメッセージ表示.gif

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?