CX拡張ジェネレータを使用した新規アプリケーションの作成

CX拡張ジェネレータは、Redwoodユーザー・エクスペリエンスでOracle Salesの機能を拡張するアプリケーションを作成するためのショートカットです。 CX Extension Generatorでは、いくつかの簡単な選択によって、単一の.zipファイルとしてダウンロードし、Oracle Visual Builder Studioにアップロードできるアプリケーション拡張を作成できます。 Visual Builder Studioにファイルをアップロードした後は、引き続き拡張子を作成してユーザーに公開できます。

前提条件

「CX拡張ジェネレータを使用したアプリケーション拡張の管理」を参照してください。
この章の例に従っている場合は、次のオブジェクトおよび関係も作成する必要があります:
- オブジェクト
  - 支払(トップレベル・オブジェクト)
  - 支払明細(子オブジェクト)
  - 出荷(トップレベル・オブジェクト)
- 関係
  - PaymentLead1M (1対多関係)
  - PaymentShipment1M (1対多関係)
  - PaymentContactMM (多対多関係)

新規アプリケーションの作成

アプリケーションを作成するには:

サンドボックスで、「アプリケーション・コンポーザ」 > 「CX拡張ジェネレータ」にナビゲートします。
「新規拡張の作成」をクリックします。
オブジェクトの追加ドロワーで、アプリケーションを作成するオブジェクトを選択し、「追加」をクリックします。

たとえば、「支払」および「出荷」を選択します。

選択したオブジェクトがリスト・ページに表示されます。
選択したオブジェクトごとに、ドリルダウンしてオブジェクトの詳細ページを構成します。このページでは、折りたたみのパネルを構成できます。

たとえば:
- 詳細ページにドリルダウンすると、添付およびノート用に自動的に生成されたパネルがページに表示されます。オプションで削除できます。
- 新しい子オブジェクト・パネルを追加するには、デフォルトのパネルの構成を使用します。このパネルは、常に折りたたみの最初のパネルとして表示されます。
パネルを追加するには:
- デフォルトの構成パネルで、「追加」をクリックします。
- パネルの追加ドロワーで、パネルを作成するカスタム子オブジェクトを選択します。
  
  たとえば、「支払明細」を選択します。
- 「各パネルのサブビューを作成」チェック・ボックスを選択すると、各パネルとともにサブビューが自動的に作成されます。
  
  ノート: このチェックボックスをオンにしない場合は、後でサブビューを追加できます。次のステップを参照してください。
- 「追加」をクリックします。
ノート: CX拡張ジェネレータでは、現在、オブジェクトの詳細ページでの関連オブジェクト・パネルの自動作成はサポートされていません。関連するオブジェクト・パネルを追加するには、Visual Builder Studioで手動で追加する必要があります。
オプションで、「構成」 > 「サブビュー」をクリックして、各パネルのサブビューを追加および削除します。
「構成」 > 「スマートなアクション」をクリックして、選択した最上位レベルのオブジェクトおよび子オブジェクトに対して拡張ジェネレータによって自動的に作成されるスマート・アクションを確認することもできます。

ヒント: 拡張ジェネレータでスマート処理を作成した後、オプションでスマート処理の構成を拡張できます。これを行うには、アプリケーション・コンポーザ(「共通設定」 > 「スマートなアクション」)でスマート・アクションを編集します。「スマート処理の概要」を参照してください。
アプリケーションに複数のオブジェクトが含まれている場合は、オブジェクト・ドロップ・ダウン・フィールドを使用してオブジェクトを切り替え、複数の詳細ページを構成します。
変更が完了したら、.zipファイルを生成してダウンロードできます。

ノート: アクション > やり直しをクリックすると、構成の選択内容をツールから削除できます。

このスクリーンショットは、やり直す方法を示しています。

ファイルの生成

アプリケーション拡張の変更が完了したら、CX拡張ジェネレータ・リスト・ページに戻り、「ファイルの生成」をクリックします。

このスクリーンショットは、CX拡張ジェネレータのリスト・ページを示しています。

CX拡張ジェネレータは、選択したオブジェクトのページおよびレイアウトを含む.zipファイルを生成およびダウンロードします。

さらに、スマート処理を作成するプロセスが起動されます。

ノート: スマート処理の作成プロセスが完了するまでに時間がかかる場合があります。スマート処理を作成した後、必要に応じて、アプリケーション・コンポーザでさらにスマート処理を管理できます。拡張内のオブジェクトによっては、追加のスマート処理を手動で作成する必要がある場合があります。「スマート処理の作成」を参照してください。

Visual Builder Studioへのファイルのインポート

CX拡張ジェネレータは、Visual Builder Studioにインポートできる.zipファイルを生成します。

ナビゲータを使用してVisual Builder Studioにナビゲート: 構成 > Visual Builder.
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でアプリケーション拡張への変更を続行できます。

たとえば、詳細ページのヘッダー・リージョン、またはサブビューまたは作成ページに表示されるフィールドを変更できます。拡張ジェネレータによっていくつかのデフォルト・フィールドが追加されますが、ユーザーのビジネス・ニーズに応じてフィールドを追加および削除することをお薦めします。

必要に応じて、特に関連するオブジェクトに対して、新しいパネルやサブビューを追加することもできます。

「関連オブジェクトの標準オブジェクト・パネルの追加(1対多)」、「関連オブジェクトのカスタム・オブジェクト・パネルの追加(1対多)」、および「関連オブジェクトのパネルの追加(多対多)」を参照してください。
追加のスマート処理が必要な場合は、アプリケーション・コンポーザで作成できます。たとえば、「ノート」パネルを保持する場合は、「ノートの作成」スマート処理を作成する必要があります。

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-detailタブで、ページ・デザイナ・サブタブをクリックします。
「コード」ボタンをクリックします。
次のパラメータをcx-detailフラグメント・コードに追加します。

<oj-vb-fragment-param name="row" value="{{ $page.variables.row }}"></oj-vb-fragment-param>