CX拡張ジェネレータを使用した新規アプリケーションの作成
CX拡張ジェネレータは、Redwoodユーザー・エクスペリエンスでOracle Salesの機能を拡張するアプリケーションを作成するためのショートカットです。 CX拡張ジェネレータでは、いくつかの簡単な選択のみで、パネル、サブビュー、詳細ページおよびスマート・アクションを含むアプリケーション拡張を作成し、1つの.zipファイルとしてダウンロードしてからOracle Visual Builder Studioにアップロードできます。 Visual Builder Studioにファイルをアップロードした後は、Visual Builder Studioで拡張子を引き続き作成し、ユーザーに公開できます。
CX拡張ジェネレータを使用すると、子、1:M (1対多)およびM:M (多対多)関係のパネルおよびサブビューを追加できます。 CX拡張ジェネレータでは、各オブジェクトの詳細(編集)ページと、ユーザーが個々のレコードを作成および編集できるようにするために必要なスマート処理も作成されます。
前提条件
-
「CX拡張ジェネレータを使用するための前提条件」を参照してください。
-
この章の例に従っている場合は、次のオブジェクトおよび関係も作成します:
-
オブジェクト
-
支払(トップレベル・オブジェクト)
-
出荷(トップレベル・オブジェクト)
-
-
関係
-
PaymentLead1M (1対多関係)
-
PaymentShipment1M (1対多関係)
-
PaymentContactMM (多対多関係)
-
-
新規アプリケーションの作成
アプリケーションを作成するには:
-
サンドボックスで、 にナビゲートします。
-
「新規拡張の作成」をクリックします。
注意: 新規拡張の作成ボタンを使用できるのは、環境に初めてアプリケーションを構成するときのみです。 CX拡張ジェネレータを使用してVBSへの初期アップロード後にさらに変更を加える場合は、開始する前に、「拡張機能のインポート」ボタンを使用してVBSからファイルをインポートしなおす必要があります。 「新規拡張の作成」ボタンを使用して新しい拡張を作成し、変更をVBSにインポートすると、アップロードによって以前のすべての変更が上書きされます。 -
「オブジェクトの追加」ドロワーで、アプリケーションの作成に使用するオブジェクトを選択し、「追加」をクリックします。
この例では、「支払」および「出荷」を選択します。
選択したオブジェクトがリスト・ページに表示されます。
-
各オブジェクトをドリルダウンして、詳細ページを構成します。
ノート: ランタイム・アプリケーションでは、詳細ページは「概要」ページと呼ばれます。このページには、添付ファイルやノート用に自動的に作成されたパネルが表示されます。 オプションで削除できます。
新しいパネルを追加するには、常に最初のパネルとして表示されるデフォルトの「構成パネル」を使用します。
重要: M:M関係を持つオブジェクトのパネルを追加すると、ジェネレータは、オブジェクト自体ではなく、M:M関係の一部として作成した交差オブジェクトのパネルを作成します。 -
パネルを追加するには:
-
デフォルトの構成パネルで、「追加」をクリックします。
-
「パネルの追加」ドロワーで、パネルを作成するカスタム関連オブジェクトを選択します。 これらは、1:MまたはM:Mの関係を持つオブジェクトです。
たとえば、「出荷」を選択します。
-
「各パネルのサブビューを作成」チェック・ボックスを選択すると、各パネルとともにサブビューが自動的に作成されます。
ノート: このチェックボックスをオンにしない場合は、後でサブビューを追加できます。 次のステップを参照してください。 -
「追加」をクリックします。
-
-
オプションで、 をクリックして、各パネルのサブビューを追加および削除します。
-
をクリックして、選択したオブジェクトに対して拡張ジェネレータが自動的に作成するスマート・アクションを確認します。
ヒント: 拡張ジェネレータでスマート処理を作成した後、オプションでスマート処理の構成を拡張できます。 これを行うには、アプリケーション・コンポーザ( )でスマート・アクションを編集します。ノート: オブジェクトの非フラグメント実装に対してカスタム・スマート処理を以前に作成した場合、フラグメントで使用する新しいスマート処理を作成する必要はありません。 かわりに、既存のUIベースのカスタム・スマート・アクションを更新して、アクション・タイプ(「追加」または「作成」)、およびターゲット・オブジェクトと必要なフィールド・マッピングを指定します。 既存のRESTベースまたはオブジェクト関数ベースのカスタム・スマート処理の場合は、処理を編集し、変更を加えることなく保存します。 これらのステップにより、カスタム・スマート・アクションが新しいフラグメント・ベースの拡張機能で引き続き動作することが保証されます。 アプリケーションに複数のオブジェクトが含まれている場合は、「オブジェクト」ドロップダウン・フィールドを使用してオブジェクトを切り替え、複数の詳細ページを構成します。
-
変更が完了したら、.zipファイルを生成してダウンロードできます。
ファイルの生成およびダウンロード
アプリケーション拡張の変更が完了したら、CX拡張ジェネレータ・リスト・ページに戻り、「ファイルの生成」をクリックします。
CX拡張ジェネレータは、選択したオブジェクトのページおよびレイアウトを含む.zipファイルを生成およびダウンロードします。
さらに、スマート処理を作成するプロセスが起動されます。
Visual Builder Studioへのファイルのインポート
CX拡張ジェネレータは、Visual Builder Studioにインポートできる.zipファイルを生成します。
-
ナビゲータを使用してVisual Builder Studioにナビゲート: .
-
Visual Builder Studioで、まだ作成していない場合は新しいワークスペースを作成します。
重要: ワークスペース拡張機能IDは、site_cxsales_Extensionである必要があります。 拡張機能の変更方法については、「プロジェクトの拡張機能IDを変更するにはどうすればよいですか?」を参照してください。ワークスペースを作成するには、「アプリケーション拡張機能を作成する前に」を参照してください。 ワークスペースの拡張機能IDを更新する手順に従ってください。
ページ上部のメニュー・アイコンをクリックし、「インポート」をクリックします。
-
「リソースのインポート」ダイアログで、.zipファイルを追加し、「インポート」をクリックします。
プレビュー・ボタンをクリックして、新しく作成したアプリケーションを表示します。
-
結果のプレビュー・リンクは次のようになります:
https://<servername>/fscmUI/redwood/cx-custom/<object_name>_c
-
プレビュー・リンクを次のように変更します:
https://<servername>/fscmUI/redwood/cx-custom/application/container/<object_name>_c
ノート: プレビュー・リンクに/application/container
を追加する必要があります。 -
これで、Visual Builder Studioでアプリケーション拡張への変更を続行できます。
たとえば、詳細ページのヘッダー・リージョン、またはサブビューまたは作成ページに表示されるフィールドを変更できます。 拡張ジェネレータによっていくつかのデフォルト・フィールドが追加されますが、ビジネス・ニーズに応じてフィールドの追加や削除が必要になる可能性が高くなります。
-
追加のスマート処理が必要な場合は、アプリケーション・コンポーザで作成できます。 たとえば、「ノート」パネルを保持する場合は、「ノートの作成」スマート処理を作成する必要があります。
Gruntfile.jsファイルの変更
Visual Builder Studioで拡張機能が使用可能になったら、Gruntfile.jsを確認し、コードが次のサンプルと一致しない場合は、次の変更を行います。 拡張機能を公開する前に、この変更を行う必要があります。
ソース・タブで、Gruntfile.jsを編集します。
-
既存のJavaScriptを次のように置き換えます:
'use strict'; /** * Visual Builder application build script. * For details about the application build and Visual Builder-specific grunt tasks * provided by the grunt-vb-build npm dependency, please refer to * https://www.oracle.com/pls/topic/lookup?ctx=en/cloud/paas/app-builder-cloud&id=visual-application-build */ module.exports = (grunt) => { require('load-grunt-tasks')(grunt); grunt.initConfig({ // disable images minification "vb-image-minify": { options: { skip: true, }, }, // configure requirejs modules bundling "vb-require-bundle": { options: { transpile: false, minify: true, emptyPaths: [ "vx/oracle_cx_fragmentsUI/ui/self/resources/js/utils/contextHelper", "vx/oracle_cx_fragmentsUI/ui/self/resources/js/utils/actionsHelper", "vx/oracle_cx_fragmentsUI/ui/self/resources/js/utils/callbackHelper", ], }, }, }); };
行変数の作成
詳細ページの変数を作成します。 たとえば:
-
Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
-
cx-custom > payment_cを展開し、payment_c-detailノードをクリックします。
-
payment_c詳細タブで、「変数」サブタブをクリックします。
-
「+変数」をクリックします。
-
「変数の作成」ダイアログで、「変数」オプションが選択されていることを確認し、「ID」フィールドに
row
と入力します。 -
タイプ・フィールドで、「オブジェクト」を選択します。
-
「作成」をクリックします。
詳細ページへの行変数の追加
-
payment_c詳細タブで、「ページ・デザイナ」サブタブをクリックします。
「コード」ボタンをクリックします。
-
cx-detailコードに次のパラメータを追加します。
<oj-vb-fragment-param name="row" value="{{ $page.variables.row }}"></oj-vb-fragment-param>