2018.01.16

SalesforceアプリでVisualWorkFlow - 待ってましたよ。<Lightning:flow>タグ -

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
あけましておめでとうございます。テラスカイ山本です。

Spring'18のプレビューが1月7日から始まっていますが、今回は1つ前のWinter'18のリリースで個人的に待ち望んだ機能がリリースされたので紹介したいと思います。

その機能とは?

その機能とはlightning:flowタグです!

lightningComponentからフロー(VisualWorkFlow)を呼び出す機能なのですが、
これを使ってずっとやりたかったSalesforceアプリ(旧Salesforce1)のアクションからフローを呼び出すことが可能になっています。

アクションとは下の画像の赤枠で囲ったボタンのことです。

過去にもSalesforceアプリからフローを呼び出す方法は、いくつかありました。

1つはVisualforceの<flow:interview>タグを使う方法です。アクションからVisualforceは呼び出せます。
ただ、この方法では画面がSalesforce Classicライクになってしまいレスポンシブに対応していませんでした。
具体的な問題点としては、項目のラベルと入力欄が横に並び、テキストエリアなどはスマートフォンで見たときに横スクロールが発生してしまいます。

下の画像がVisualforceからフロー(ケースの説明を編集するフロー)を呼び出した場合のものです。
ラベル部分が折り返されており、入力欄が切れています...タブレットなら何とか使えそうですが、スマートフォンでは、ちょっと厳しいかと。

もう1つはLightningアプリケーションビルダーでLightningページにフローを配置して実行する方法です。
こちらであればLEX同様にレスポンシブ(Lightningランタイムで実行される)にはなりますが、アクションからの呼び出しはできず、Salesforceアプリのサイドメニューからの実行になります。
サイドメニューから呼び出す場合はレコードが特定されませんので、ちょっと用途が異なります。

lightning:flowタグの使用例

それでは実際にlightning:flowタグを使って、フローを呼び出してみます。

lightningタグなので当然LightningComponentを書く必要があります。
以下がコンポーネントとコントローラーのサンプルコードです。
<aura:component implements="force:lightningQuickAction,force:hasRecordId" >
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  <lightning:flow aura:id="flow" onstatuschange="{!c.statusChange}"/>        
</aura:component>
sample.cmp
({
  //初期処理
  doInit : function (cmp) {
    var flow = cmp.find("flow");
    var id = cmp.get("v.recordId");  //アクションが配置されているレコードのIdを取得
    var inputVariables = [  //フローの入力用変数(RecordId)にセット
      {
        name : 'RecordId',
        type : 'String',
        value : id
      }
    ];
    flow.startFlow("SampleFlow", inputVariables);  //フローを起動
  },

  //フローの状態でイベントを発火する処理
  statusChange : function (cmp, event) {
    //フローが完了したら画面を閉じる
    if(event.getParam('status') === "FINISHED") {
        var urlEvent = $A.get("e.force:closeQuickAction");
        urlEvent.fire();
    }
  }
})
sample.controller
下の画像が呼び出した画面になります。Lightningランタイムで表示されています。

ユースケース

今回のアクションとフロー(VisualWorkFlow)を組み合わせるパターンは、モバイル端末を使用して外出先で操作する場合にとても有効だと思います。

例えば、現地修理のようなフィールドサービスを想定し、以下のようなオペレーションがあるとし、
・現地到着時:到着時刻などを記録
・調査後:調査結果、修理予定時間を記録
・修理後:修理した内容を記録
・完了時:お客様への報告、確認内容を記録

これらを1つのレコードで管理している場合に、標準の編集画面ですべての項目が表示されると、ちょっと使い勝手が悪いかと思います。

そこでアクションを分割し、オペレーション毎にユーザフレンドリーな編集画面を作成できるかと思います。分割だけであれば標準のアクションでもできますが、フローではウィザード形式の画面を作成できるので、状況に応じて、編集項目を出し分けることも可能です。

また、複数のオブジェクトを同時に登録、更新する画面を作成したり、
日付を条件にして、日報のようなデータを登録し、既に登録済みであれば編集させるようなアクションを作ることもできます。

Flow(Beta)

今回はLightningComponentを開発しましたが、実はアクションの設定画面には「Flow(Beta)」というアクション種別が既にあります。

今後のリリースでLightningComponentを開発しなくても、アクションからフローを実行できるようになるかもしれません。

最後に

フロー(VisualWorkFlow)はUI部分で制限があり、複雑な画面をモバイル向けに開発するには、やはりLightningComponentの開発が必要になりますが、簡易な画面をフローで開発するのはありかなと思います。

この機能はお客様からの要望もあって、1年前ぐらいからできたらいいなと思っていた機能だったので、このリリースは個人的にとてもうれしいリリースでした。
Salesforceはリリースの度に進化しており、MySalesforce然り、特にモバイルには力を入れていると感じました。

Salesforceのモバイル向けカスタマイズの際にはテラスカイにお声掛け頂ければ幸いです。
それではまた。
20 件

関連する記事