PaaS-SaaS Integration

47 CPQ CloudからのJCS - SaaS Extensionアプリケーションの起動

Oracle JCS - SaaS Extensionでホストされている外部アプリケーションと統合することにより、Oracle PaaSを使用してOracle CPQ Cloud (Configure, Price and Quote)を拡張できます。

このドキュメントでは、CPQ Cloud BML (BigMachines Extensible Language)をJavascriptと組み合わせて使用して、外部のJCS - SaaS ExtensionアプリケーションをCPQ Cloud内のiFrameとして埋め込みます。

トピック

前提条件

CPQ Cloudのコマース・ワークフローをカスタマイズする前に、次の各事項について検討します。

(ユーザーを作成または変更できる)「スーパー・ユーザー」権限を伴うFullAccessロールを持つユーザーが少なくとも1人いることを確認します。

注意:
FullAccessロールを持つユーザーがいない場合、管理者に確認してください。
デプロイされて稼働中のJCS - SaaS Extensionアプリケーションがあることを確認します。「ADFを使用しない場合の開発に関する考慮事項」を参照してください。
JavascriptおよびDocument Object Model (DOM)に関する知識があることを確認します。
CPQ CloudインスタンスがOAuthサーバーとして機能するよう構成されていることを確認します。「OAuthサーバーとして機能するCPQ Cloudの構成」を参照してください。

読取り専用テキストまたはHTML属性の新規作成

読取り専用テキストまたはHTML属性を使用して、HTMLまたはJavascriptコードをページに挿入することにより、iFrameとともに外部アプリケーションを埋め込むことができます。このコードは、BMLエディタを使用して属性に追加します。

新しい読取り専用テキストまたはHTML属性を既存のCPQ Cloudの見積りに追加する手順:

Oracle CPQ Cloudにログインします。
画面の右上隅にある管理プラットフォーム・アイコンをクリックします。

図admin.jpgの説明
コマースおよび文書の下で、「プロセス定義」をクリックします。
カスタマイズするコマース・プロセス文書の下にある「ナビゲーション」ドロップダウンから「文書」を選択し、下図に示すように、「リスト」ボタンをクリックします。

図commerce_document.jpgの説明
これで、「文書」インタフェースに移動します。
「ナビゲーション」ドロップダウンから最上位レベルの「文書」の下の「属性」を選択し、「リスト」ボタンをクリックします。

図window.jpgの説明
コマース・プロセス・ワークフローに対して作成したすべての変数が含まれる「属性リスト」ウィンドウに移動します。
右下隅にある「追加」ボタンをクリックし、新しい「属性」を作成します。
「属性エディタ」ウィンドウで、ラベル名および変数名を入力し、「属性タイプ」ドロップダウンから読取り専用テキストまたはHTML属性を選択します。

図new_html_attribute.jpgの説明
「追加」ボタンをクリックしてから、次の画面で「更新」ボタンをクリックします。
新しく作成した変数が「属性」リストにリストされます。

BMLエディタを使用した読取り専用テキストまたはHTML属性でのiFrameの作成

BMLエディタを使用して読取り専用テキストまたはHTML属性を使用するiFrameを挿入する手順:

CPQ Cloudにログインします。
画面の右上隅にある管理プラットフォーム・アイコンをクリックします。

図admin.jpgの説明
コマースおよび文書の下で、「プロセス定義」をクリックします。
カスタマイズするコマース・プロセス文書の下にある「ナビゲーション」ドロップダウンから「文書」を選択し、下図に示すように、「リスト」ボタンをクリックします。

図commerce_document.jpgの説明
これで、「文書」インタフェースに移動します。
「ナビゲーション」ドロップダウンから最上位レベルの「文書」の下の「属性」を選択し、「リスト」ボタンをクリックします。

図window.jpgの説明
コマース・プロセス・ワークフローに対して作成したすべての変数が含まれる「属性リスト」ウィンドウに移動します。
iFrameを埋め込むために使用する読取り専用テキストまたはHTML属性をクリックします。
「属性エディタ」上の「デフォルト」タブをクリックします。
デフォルト値として「ファンクション」を選択し、関数の定義ボタンをクリックし、BMLエディタを開きます。
「変数を選択」画面で、関数が相互作用する属性またはシステム変数を選択します。

図select_variables.jpgの説明
右下隅にある「Next」ボタンをクリックし、BMLエディタ画面にナビゲートします。
BMLエディタでは、BMLおよびJavascriptコードを追加し、iFrameを作成できます。たとえば、次のコード・スニペットは、JCS - SaaS Extensionアプリケーションを指し示す外部iFrameを作成する方法を示しています。
```
returnString = "<iFrame id='paasSample2iFrame' src='http://<placeHolderURL>/' height='50'></iFrame>"; returnString = returnString + "\n <script type='text/javascript'>"; returnString = returnString + "\n var token = getToken();"; returnString = returnString + "\n document.getElementById('paasSample2iFrame').src = '"; returnString = returnString + "https://<JCS_InstanceURL>/<JCS_AppURL>/app.jsp"; urlParams = makeurlparam( { 'cpqServer': "http://<CPQ-URL>/rest/v1", 'resourceName': "commerceDocumentsOraclecpqo_bmClone_1Transaction", 'custId': _transaction_customer_t_company_name, 'excludeResourceId': _system_buyside_id }); returnString = returnString + "?"+ urlParams; returnString = returnString + "&cpqToken=' + token;"; returnString = returnString + "\n</script>"; return returnString;
```
上記のコード・スニペットでは、iFrameを定義する文字列を返すreturnString変数を作成しています。

<iFrame> タグの後ろで、returnString変数に<script>タグが追加されています。<script>タグには、カスタムCPQ生成済セキュリティ・トークンが含まれるtokenと呼ばれる変数を宣言するJavascriptコード・スニペットが保持されています。このトークンは、JCS - SaaS ExtensionアプリケーションがCPQ CloudデータにアクセスするためにRESTコールを作成するたびに使用するものです。
続くコード行では、iFrameプレースホルダのURLがJCS - SaaS ExtensionアプリのマッシュアップURLに置き換えられ、埋め込まれています。
```
https://<JCS_InstanceURL>/<CS-SX_AppURL>/app.jsp
```
<<JCS_InstanceURL>は、/>JCS - SaaS ExtensionインスタンスのURLです。
コードの次の部分では、CPQ REST APIに対するREST Webサービス・コールを作成するBML URLアクセス・ライブラリ関数makeurlparamを使用して、queryStringパラメータ・オブジェクトが作成されています。このqueryStringは、&cpqTokenと呼ばれるqueryString変数内のカスタム・セキュリティ・トークンとともにJCS - SaaS ExtensionアプリケーションのURLにパラメータとして渡されます。「CPQ CloudのBML URLアクセス関数について」を参照してください。
iFrameコードを埋め込んだ後、「保存して閉じる」ボタンをクリックします。これで、読取り専用テキストまたはHTML属性エディタ画面に戻ります。次に、「更新」ボタンをクリックします。
これで、「属性リスト」画面の下に新しい読取り専用テキストまたはHTML属性がリストされます。

レイアウト・エディタを使用した読取り専用テキストまたはHTML属性に含まれるiFrameのUIへの埋込み

レイアウト・エディタを使用して、コマース・ワークフロー内の文書を作成またはカスタマイズすることにより、CPQ Cloudの見積りUIを更新できます。

読取り専用テキストまたはHTML属性に含まれるiFrameを既存の「レイアウト」に埋め込む手順:

CPQ Cloudにログインします。
画面の右上隅にある管理プラットフォーム・アイコンをクリックします。

図admin.jpgの説明
コマースおよび文書の下で、「プロセス定義」をクリックします。
カスタマイズするコマース・プロセス文書の下にある「ナビゲーション」ドロップダウンから「文書」を選択し、下図に示すように、「リスト」ボタンをクリックします。

図commerce_document.jpgの説明
これで、「文書」インタフェースに移動します。
「ナビゲーション」ドロップダウンから最上位レベルの「文書」の下の「属性」を選択し、「リスト」ボタンをクリックします。

図window.jpgの説明
コマース・プロセス・ワークフローに対して作成したすべての変数が含まれる「属性リスト」ウィンドウに移動します。
ドキュメントに追加する読取り専用テキストまたはHTML属性をクリックします。
デスクトップ・レイアウトの保存および編集ボタンをクリックします。これで、「レイアウト・エディタ」画面に移動します。
「レイアウト・エディタ」画面で、「追加」ドロップダウン・メニューをクリックし、「レイアウト」を選択します。

図add_layout.jpgの説明
レイアウト要素と呼ばれる新しいポップアップ・ウィンドウが表示され、コマース文書に追加できる様々なUIアイテムが示されます。
レイアウト要素ポップアップ・ウィンドウで、新規パネルの追加ヘッダーをクリックして既存のレイアウトにドラッグし、新しいパネルを追加します。別のポップアップ・ウィンドウが開きます。

図panel_popup.jpgの説明
「ラベル」の下に名前を入力し、「OK」ボタンをクリックします。

ヒント:
「縮小可能」と呼ばれるチェック・ボックスをクリックすると、縮小可能パネルを作成できます。これらの構成オプションの詳細を確認するには、左側の疑問符アイコンにマウス・カーソルを置きます。
「レイアウト・エディタ」画面の「追加」ドロップダウンをクリックしてから、「属性」をクリックします。

図add_attributes.jpgの説明
「属性リスト」のすべての「属性」を示す新しいポップアップ・ウィンドウが開きます。
作成した読取り専用テキストまたはHTML属性属性をクリックして新しいパネルにドラッグします。「読取り専用テキストまたはHTML属性の新規作成」を参照してください。
左上隅の「保存」ボタンをクリックしてから、「戻る」ボタンをクリックし、「ドキュメント・リスト」に戻ります。

ヒント:
「レイアウト・エディタ」の左上隅にある「プレビュー」ボタンをクリックすると、進行中の作業のプレビューを取得できます。

新規パネルのデプロイ

新しいパネルをデプロイする手順:

CPQ Cloudにログインします。
管理プラットフォーム・アイコンをクリックします。

図admin.jpgの説明
コマースおよび文書の下で、「プロセス定義」をクリックします。
「ナビゲーション」ドロップダウンからデプロイメント・センターを選択してから、「クイックリンク」列の下にある「開く」リンクをクリックします。クイックリンクの処理ウィンドウが開きます。

図quick_links_window.jpgの説明
「デプロイ」ボタンをクリックし、変更を公開します。

アプリケーションのテスト

アプリケーションをテストする手順:

ホーム・ページの上部にある「トランザクション・マネージャ」リンクをクリックします。このリンクは一般的に、[コマース・プロセス名]マネージャという名前です。

注意:
ホーム・ページの上部には、複数のトランザクション・マネージャ・リンクがリストされている場合があります。どのトランザクション・リンクがコマース・プロセスに属するのかは、管理者に確認してください。
「トランザクション・マネージャ」画面の上部にある「新規トランザクション」ボタンをクリックします。
トランザクションの名前を入力し、「保存」ボタンをクリックします。
「トランザクション・マネージャ」画面内のトランザクション番号列に、新しく作成したトランザクションが作成されます。