機械翻訳について

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

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

最上位オブジェクトに対してUIとスマート処理の両方を作成できます。 CX拡張ジェネレータでは、1対多(1対多)およびM:M(多対多)の関係を持つオブジェクトがサポートされます。

重要: CX拡張ジェネレータからVisual Builder Studio (VBS)にファイルをアップロードした後は、CX拡張ジェネレータを使用してパネルを追加したり、カスタム・オブジェクトの追加スマート処理を生成できなくなります。 これはVBSで手動で行う必要があります。 ただし、戻ってCX拡張ジェネレータを使用して、トップ・レベルのカスタム・オブジェクトを追加し、それらのパネルおよびスマート処理を作成できます。 追加のトップレベル・オブジェクトを追加するには、VBSからzipファイルをエクスポートし、CX拡張ジェネレータにインポートして変更する必要があります。

前提条件

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

  • この章の例に従っている場合は、次のオブジェクトおよび関係も作成します:

    • オブジェクト

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

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

    • 関係

      • PaymentLead1M (1対多関係)

      • PaymentShipment1M (1対多関係)

      • PaymentContactMM (多対多関係)

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

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

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

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

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

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

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

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

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

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

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

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

    このページには、添付ファイルやノート用に自動的に作成されたパネルが表示されます。 オプションで削除できます。

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

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

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

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

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

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

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

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

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

      ノート: このチェックボックスをオンにしない場合は、後でサブビューを追加できます。 次のステップを参照してください。
    4. 「追加」をクリックします。

  6. オプションで、「構成」 > 「サブビュー」をクリックして、各パネルのサブビューを追加および削除します。

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

  7. 「構成」 > 「スマートなアクション」をクリックして、選択したオブジェクトに対して拡張ジェネレータが自動的に作成するスマート・アクションを確認します。

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

    このスクリーンショットは、オブジェクトを切り替える方法を示しています。
  9. 変更が完了したら、.zipファイルを生成してダウンロードできます。

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

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

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

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

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

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

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

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

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

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

  1. ナビゲータを使用してVisual Builder Studioにナビゲート: 構成 > Visual Builder.

  2. Visual Builder Studioで、まだ作成していない場合は新しいワークスペースを作成します。

    重要: ワークスペース拡張機能IDは、site_cxsales_Extensionである必要があります。 拡張機能の変更方法については、「プロジェクトの拡張機能IDを変更するにはどうすればよいですか?」を参照してください。

    ワークスペースを作成するには、「アプリケーション拡張機能を作成する前に」を参照してください。 ワークスペースの拡張機能IDを更新する手順に従ってください。

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

    このスクリーンショットは、.zipファイルのインポート方法を示しています。
  4. 「リソースのインポート」ダイアログで、.zipファイルを追加し、「インポート」をクリックします。

  5. プレビュー・ボタンをクリックして、新しく作成したアプリケーションを表示します。

    これは、Visual Builder Studioの「プレビュー」ボタンのスクリーンショットです。
  6. 結果のプレビュー・リンクは次のようになります:

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

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

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

    ノート: プレビュー・リンクに/application/containerを追加する必要があります。
  8. これで、Visual Builder Studioでアプリケーション拡張への変更を続行できます。

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

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

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詳細タブで、「変数」サブタブをクリックします。

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

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

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

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

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

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

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

    このスクリーンショットは、コード・ボタンを示しています。
  3. cx-detailコードに次のパラメータを追加します。

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