1. カスタム・オブジェクトの拡張方法
  2. CX拡張ジェネレータを使用した新規アプリケーションの作成

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

CX拡張ジェネレータを使用すると、Redwoodユーザー・エクスペリエンスのOracle Salesの機能を拡張するアプリケーションを手早く作成できます。CX拡張ジェネレータでは、わずか数回の簡単な選択を行うことで、パネル、サブビュー、詳細ページおよびスマート処理を含むアプリケーション拡張を作成でき、これを単一の.zipファイルとしてダウンロードして、Oracle Visual Builder Studioにアップロードできます。ファイルをVisual Builder Studioにアップロードした後、続いてVisual Builder Studioで拡張を構築し、それをユーザーに公開できます。

CX拡張ジェネレータを使用して、子のパネルおよびサブビュー、1:M (1対他)の関係およびM:M (多対多)の関係を追加できます。CX拡張ジェネレータにより、各オブジェクトの詳細(編集)ページと、ユーザーが個々のレコードを作成および編集できるようにする必須のスマート処理も作成されます。

前提条件

  • 「CX拡張ジェネレータを使用するための前提条件」を参照してください。

  • この章の例に沿って作業すると、次のオブジェクトおよび関係も作成されます:

    • オブジェクト

      • 支払(トップレベル・オブジェクト)

      • 出荷(トップレベル・オブジェクト)

    • 関係

      • PaymentLead1M (1対多の関係)

      • PaymentShipment1M (1対多の関係)

      • PaymentContactMM (多対多の関係)

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

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

  1. サンドボックスで、「アプリケーション・コンポーザ」>「CX拡張ジェネレータ」にナビゲートします。

  2. 「新規拡張の作成」をクリックします。

    注意: 「新規拡張の作成」ボタンは、その環境で初めてアプリケーションを構成するときにのみ使用できます。VBSに初めてアップロードした後で、CX拡張ジェネレータを使用してさらに変更を加える場合は、始める前に、「拡張のインポート」ボタンを使用してVBSからファイルを再度インポートする必要があります。「新規拡張の作成」ボタンを使用して新しい拡張を作成し、変更をVBSにインポートすると、アップロードした内容によって以前の変更内容がすべて上書きされます。

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

  3. 「オブジェクトの追加」ドロワーで、アプリケーションの作成に使用するオブジェクトを選択し、「追加」をクリックします。

    この例では、「支払」および「出荷」を選択します。

    このスクリーンショットは、オブジェクトの追加方法を示しています。

    選択したオブジェクトがリスト・ページに表示されます。

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

  4. 各オブジェクトにドリルダウンして、詳細ページを構成します。

    ノート: ランタイム・アプリケーションでは、詳細ページは「概要」ページと呼ばれます。

    このページには、添付およびノートの自動生成されたパネルが表示されます。これらは必要に応じて削除できます。

    このスクリーンショットは、パネルを折りたたみで構成できる場所を示しています。

    デフォルトの「パネルの構成」(常に最初のパネルとして表示されます)を使用して、新しいパネルを追加します。

    重要: M:Mの関係を持つオブジェクトのパネルを追加すると、オブジェクト自体ではなく、M:Mの関係の一部として作成した交差オブジェクトのパネルがジェネレータによって作成されます。

  5. パネルを追加するには:

    1. デフォルトの「パネルの構成」で、「追加」をクリックします。

      このスクリーンショットは、新しいパネルの追加方法を示しています。

    2. 「パネルの追加」ドロワーで、パネルを作成するカスタム関連オブジェクトを選択します。これらは、1:MまたはM:Mいずれかの関係を持つオブジェクトにできます。

      たとえば、「出荷」を選択します。

      このスクリーンショットは、パネルを作成するオブジェクトの選択方法を示しています。

    3. 「各パネルのサブビューの作成」チェック・ボックスを選択して、各パネルに対するサブビューが自動的に作成されるようにします。

      ノート:

      このチェック・ボックスを選択しない場合は、後でサブビューを追加できます。次のステップを参照してください。

    4. 「追加」をクリックします。

  6. 必要に応じて、「構成」>「サブビュー」をクリックして、各パネルのサブビューを追加および削除します。

    このスクリーンショットは、サブビューの構成方法を示しています。

  7. 「構成」>「スマート処理」をクリックして、選択したオブジェクトに対し、拡張ジェネレータによって自動的に作成されるスマート処理を確認します。

    ヒント:

    必要に応じて、拡張ジェネレータによって作成されたスマート処理の構成を後から拡張できます。これを行うには、アプリケーション・コンポーザでスマート処理を編集します(「共通設定」>「スマート処理」)。

    ノート:

    以前にオブジェクトの非フラグメント実装のカスタム・スマート処理を作成している場合は、フラグメントで使用するために新しいスマート処理を作成する必要はありません。かわりに、既存のUIベースのカスタム・スマート処理を更新して、処理タイプ(「追加」または「作成」)およびターゲット・オブジェクトと必要なフィールド・マッピングを指定します。既存のRESTベースまたはオブジェクト関数ベースのカスタム・スマート処理の場合は、処理を編集し、変更を加えずに保存します。これらのステップにより、新しいフラグメント・ベースの拡張でカスタム・スマート処理が引き続き確実に機能するようになります。

  8. アプリケーションに複数のオブジェクトが含まれている場合は、「オブジェクト」ドロップダウン・ボタンを使用してオブジェクトを切り替えて、複数の詳細ページを構成します。

    このスクリーンショットは、オブジェクトを切り替える方法を示しています。

  9. 変更が完了したら、.zipファイルを生成してダウンロードできます。

ノート:

いつでも「処理」>「やり直し」をクリックして、ツールから構成の選択内容を削除できます。

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

ファイルの生成およびダウンロード

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

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

CX拡張ジェネレータによって、選択したオブジェクトのページとレイアウトが含まれる.zipファイルが生成され、ダウンロードされます。

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

ノート:

スマート処理の作成プロセスは、完了までに時間がかかることがあります。作成されたスマート処理は、アプリケーション・コンポーザで管理でき、必要に応じて追加のスマート処理を作成できます。

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

  1. ナビゲータを使用して、「構成」>「Visual Builder」と選択し、Visual Builder Studioにナビゲートします。

  2. ページの上部にあるメニュー・アイコンをクリックし、「インポート」をクリックします。

    このスクリーンショットは、.zipファイルをインポートする方法を示しています。

  3. 「リソースのインポート」ダイアログで、.zipファイルを追加し、「インポート」をクリックします。

  4. 「プレビュー」ボタンをクリックして、新しく作成したアプリケーションを確認します。

    これは、Visual Builder Studioの「プレビュー」ボタンのスクリーンショットです。

  5. 結果のプレビュー・リンクは次のようになります:

    https://<servername>/fscmUI/redwood/cx-custom/<object_name>_c

  6. プレビュー・リンクを次のように変更します:

    https://<servername>/fscmUI/redwood/cx-custom/application/container/<object_name>_c

    ノート:

    プレビュー・リンクに/application/containerを追加する必要があります。

  7. これで、Visual Builder Studioでアプリケーション拡張の変更を続行できるようになりました。

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

  8. 追加のスマート処理が必要な場合は、アプリケーション・コンポーザで作成できます。たとえば、「ノート」パネルを保持する場合は、「ノートの作成」スマート処理を作成する必要があります。

Gruntfile.jsファイルの変更

拡張がVisual Builder Studioで使用可能になったら、Gruntfile.jsを確認し、コードが次のサンプルと同じでない場合は、次のように変更します。この変更は、拡張を公開する前に行う必要があります。

  1. 「ソース」タブで、Gruntfile.jsを編集します。

    このスクリーンショットは、変更するGruntfile.jsがどこにあるかを示しています。

  2. 既存の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",
                ],
            },
        },
    });
};

行変数の作成

詳細ページの変数を作成します。次に例を示します:

  1. Visual Builder Studioで、「アプリケーションUI」タブをクリックします。

  2. 「cx-custom」 > 「payment_c」を展開し、「payment_c-detail」ノードをクリックします。

  3. 「payment_c-detail」タブで、「変数」サブタブをクリックします。

  4. 「+ 変数」をクリックします。

  5. 変数の作成ダイアログで、「変数」オプションが選択されていることを確認し、「ID」フィールドにrowと入力します。

  6. 「タイプ」フィールドで、「オブジェクト」を選択します。

  7. 「作成」をクリックします。

詳細ページへの行変数の追加

  1. 「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。

  2. 「コード」ボタンをクリックします。

    このスクリーンショットは、「コード」ボタンを示しています。

  3. 次のパラメータをcx-detailコードに追加します。

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

関連トピック