Embed PCS UI to Sales Cloud UI

Oracle Fusion Applicationsというか、Sales CloudやHCM Cloudは、カスタムタブの追加などでUIを追加したり、外部サービスを呼び出したり、メニューにカスタムの処理を追加したりすることができます。このエントリでは、Oracle Process Cloud Service (PCS) のEmbeddable Process UI Componentsを使って、PCSのUIをSales Cloudに埋め込んでみました。利用するバージョンは、PCS 16.4.5です。

PCSって何?

Oracle Cloud Platformの一つのサービスで、クラウド上で動作するBPM (Business Process Management) ツールです。詳細は以下のURLからどうぞ。試使用のお問い合わせは日本オラクルの営業さんにお願いします。

Process Cloud Service
http://cloud.oracle.com/ja_JP/process

PCSの組み込みUI (Embedded UI) とは、PCS WorkspaceというPCSのプロセスへの対話にあたって利用可能な標準アプリケーションに存在するUIコンポーネントを切り出して他のアプリケーションに埋め込めるようにしたものです。16.3.1から利用可能になっています。

今回、埋め込む対象のUIは以下のような画面です。Opportunity ID (Sales Cloudの内部ID) とName (Opportunity Name) を表示する、というようなシンプルなものです。もちろん、これ以外にもSales Cloudから情報を取得して表示することもできます。

salescloud_15

Sales Cloudって何?

顧客管理・営業支援をするためのSaaSです。

Sales Cloud
https://cloud.oracle.com/ja_JP/sales-cloud

PCS側で実施しておくこと

当然ながら、アプリケーションを作成しておく必要があります。それ以外に、Embeddable Process UI Componentsを利用して開始フォームを表示する場合、プロセス定義をREST API経由で取得しておく必要があります。詳細は、以下のエントリをご覧ください。

Use PCS enbeddable process UI components

Sales Cloud側で実施しておくこと

このエントリでは、Sales(営業)>Opportunity(商談)で、Opportunityの詳細に新しいタブを追加し、そのタブでPCSのUIを表示することをゴールにします。そのためには、まずサブタブ (Sub Tab) を作成し、そのタブ内でPCSの組み込みUIのURLを呼び出すような仕組みを構成する必要があります。Sales Cloudには、Sandboxがあり、本番環境に影響しないテスト環境(っぽいもの)を作成できますので、今回はこのSandboxの範囲で設定することにします。

  1. Sandboxの作成
    1. ユーザー名をクリックし、[サンドボックスの管理]をクリック
      salescloud_03
    2. +をクリックしてSandboxを作成
      salescloud_04a
    3. 名前を指定して[保存して閉じる]をクリック
      salescloud_05
    4. 作成したSandboxを有効化
      SalesCloud_04b.png
  2. タブの追加
    1. 左上部のメニューアイコンをクリック
      salescloud_01
    2. [ツール]>[アプリケーション・コンポーザ]をクリック
      salescloud_06
    3. 商談 (Opportunity) の詳細ページにタブを追加したいので、アプリケーションは[営業]を選択し、商談>ページを選択の上、詳細ページの[デフォルト・レイアウト]を選択してから鉛筆アイコンをクリックして編集画面に移行する
      salescloud_07
    4. タブの追加ボタンをクリック(必要に応じて、追加したタブを並べ替えることもできますが、今回は実施しません)。
      salescloud_08
    5. [Webコンテンツ]を選択し、[次]をクリック
      salescloud_09
    6. アイコンや表示ラベルを編集し、URLを指定する
      このとき、URLは文字列として渡します。
      salescloud_10
      例えば、PCSのアプリケーション・リストを表示したい場合には、以下のように設定します。

      https://{PCSのURL}/bpm/components/pages/applist.html

      その他、PCSのプロセスインスタンスを生成し、フォームを表示することもできます。以下はその例です(見やすくするため改行を入れています)。

      https://PCSのURL/bpm/components/pages/startform.html?startformData=
      {
      "processDefId":"default~Application!1.0~Process",
      "serviceName":"Process.service",
      "processName":"Process",
      "title":"てすと",
      "operation":"start",
      "startType":"START_PCS_FORM",
      "isDocsEnabled":true
      }
      

      今回は、PCSで作成したプロセスの画面に、さらに初期値を入れて表示させてみます。この場合、以下のようなURLを作成する必要があります(見やすくするため改行を入れています)。

      https://PCSのURL/bpm/components/pages/startform.html?startformData=
      {
      "processDefId":"default~Application!1.0~Process",
      "serviceName":"Process.service",
      "processName":"Process",
      "title":"てすと",
      "operation":"start",
      "startType":"START_PCS_FORM",
      "isDocsEnabled":true
      }
      &payload=
      {
      "opportunityID":"300000130602218",
      "name":"なまえ"
      }
      

      今回、Opportunityオブジェクトの内部IDであるOpportunity ID (OptyId) と、Opportunity Name (Name) を利用するため、Opportunityオブジェクトのフィールドから、両者を取得します。
      URL作成時には、以下の点にご注意ください。

      • OptyIdはNumber型なので、文字列に変換する必要があります。そのため、 OptyId.toString() を使って文字列へ変換します。
      • JSON形式でパラメータを渡すため、ダブルクォートはエスケープする必要があります

      これらを踏まえ、作成したURL(の文字列)は以下のようになります(見やすくするために改行を入れています)。[URL定義]>[スクリプトの編集]の領域にこのURL文字列を入力します。

      "https://{PCSのURL}/bpm/components/pages/startform.html?startformData=
      {
        \"processDefId\":\"default~Application!1.0~Process\",
        \"serviceName\":\"Process.service\",
        \"processName\":\"Process\",
        \"title\":\"てすと\",
        \"operation\":\"start\",
        \"startType\":\"START_PCS_FORM\",
        \"isDocsEnabled\":true
      }
      &payload=
      {
        \"opportunityID\":\"" + OptyId.toString() + "\",
        \"name\":\"" + Name + "\"
      }"
      
    7. URLを指定後、[次]をクリックし、[保存してクローズ]をクリック、[完了]で設定を終了する

これで設定が終了したので、動作確認します。まず、営業>商談をたどり、任意の商談をクリックします。
salescloud_11
今回は、Tecra Data Inc.をクリックしてみます。
salescloud_12

作成したSub Tabが存在することがわかります。このタブをクリックしてみます。

salescloud_13

無事にPCSアプリケーションのフォームが開き、Sales CloudのUIに埋め込まれていることがわかります。初期値も確認できます。

salescloud_14

参考資料

PCSのEmbedded UIに関する詳細は、以下のドキュメントをご覧ください。

Oracle® Cloud Using Oracle Process Cloud Service 16.4.5
Embedding Process UI Components
https://docs.oracle.com/cloud/latest/process_gs/CPRCW/GUID-66587F65-C081-4961-BE92-6B1766586C14.htm#CPRCW-GUID-66587F65-C081-4961-BE92-6B1766586C14

Sales CloudのSub Tabについては、以下のドキュメントをご覧ください。

Oracle Sales Cloud – Customizing Sales
Working with Subtabs
https://docs.oracle.com/cloud/latest/salescs_gs/OACEX/OACEX1078865.htm#OACEX1906352

anishi1222 について

とあるキャラクターの中の人です。
カテゴリー: Cloud, Middleware タグ: , パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中