1. カスタム・オブジェクトの拡張方法
  2. 関連オブジェクトのサブビューの構成(1対多)
機械翻訳について

関連オブジェクトのサブビューの構成(1対多)

カスタム・オブジェクトに他のオブジェクトとの関係がある場合、ユーザーはカスタム・オブジェクトの詳細ページから関連オブジェクト・レコードを直接追加できます。 これを有効にするには、2つのものを作成する必要があります: 関連するオブジェクトの新しいサブビューと、詳細ページから起動できる追加ダイアログ。 このトピックでは、(1対多関係を介して関連付けられた)関連オブジェクトのサブビューを作成する方法について説明します。

この例では、PaymentオブジェクトとOrderオブジェクトとの間に1対多の関係があります。 実行時に、ユーザーは支払にオーダーを追加できる必要があります。

これが、このトピックで取り上げるシナリオです。

設定の概要

関連オブジェクト・レコードの追加を有効にするには、Oracle Visual Builder Studioで複数のステップが必要です:

  1. 関連オブジェクトのサブビューを作成します。

    このトピックでは、このプロセスについて説明します。

  2. サブビュー表にリンク・フィールドを作成します。

    ユーザーはリンク・フィールドをクリックして、関連オブジェクト・レコードの詳細にドリルダウンできます。

  3. ユーザーがカスタム・オブジェクト・レコードに関連オブジェクト・レコードを追加できるように、追加ダイアログを作成します。

  4. ユーザーがカスタム・オブジェクト・レコードから関連オブジェクト・レコードを削除できるように、削除ダイアログを作成します。

  5. ユーザーが削除ダイアログにアクセスできるように、サブビュー表に削除アイコンを追加します。

アプリケーション・コンポーザの前提条件

追加ダイアログを作成する前に、アプリケーション・コンポーザのサンドボックス内の前提条件ステップを完了する必要があります。

  1. カスタム・オブジェクトの1対多の関係を作成します。

    この例では、ユーザーが支払にオーダーを追加できるようにします。 この場合、ソース・オブジェクトとしてPaymentとターゲット・オブジェクトとしてOrderの間に1対多の関係を作成します。

    関係の表示名は、PaymentOrderのようになります。

  2. Add smartアクションも作成する必要があります。

    追加スマート・アクションは、詳細ページとサブビューの両方のアクション・バーに表示されます。 ユーザーは、追加スマート・アクションを選択して追加ダイアログを起動できます。

  3. サンドボックスを公開します。

    ノート:

    すでにVisual Builder Studioを実行している場合は、サイン・アウトし、サイン・インし直してから、アプリケーション拡張の構成に進みます。 これにより、Visual Builderによって、アプリケーション・コンポーザから最新の公開済の変更が確実に取得されます。

Visual Builder Studioの前提条件

アプリケーション・コンポーザの前提条件を完了した後、詳細ページに追加ダイアログを追加する前に、Visual Builder Studioでこれらのステップを完了する必要があります。

  1. まず、詳細ページの変数を作成します。

    1. 詳細タブをクリックし、変数サブタブをクリックします。

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

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

    4. タイプ・フィールドで、「ブール」を選択します。

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

    6. プロパティ・ペインの「デフォルト値」フィールドで、falseをクリックします。

  2. 新しい文字列を翻訳バンドルに追加しましょう:

    1. customBundleタブで、「+文字列」をクリックします。

    2. キー・フィールドに、OrderNameと入力します。

    3. 文字列フィールドに、Order Nameと入力します。

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

支払にオーダーを追加すると、ユーザーはオーダーのサブビュー・ページにナビゲートされます。 ユーザーは、リンク・フィールドであるオーダー名をクリックして、オーダー詳細ページにナビゲートできます。

この例では、Orderオブジェクトはカスタム・オブジェクトです。 リンク・フィールドをテストできるように、オーダー詳細ページを作成し、ページを作成します。

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

  2. cx-objectsノードを展開します。

  3. cx-objectsの横にある+アイコンをクリックして、新しいフローを作成します。

    これは、新しいフローの作成方法を示すスクリーンショットです。

  4. 「フロー」の作成ダイアログの「フロー」IDフィールドに、フロー名(orderなど)を入力します。

  5. オーダー・ノードの横にある+アイコンをクリックして、カスタム・アプリケーションにページを追加します。

  6. 「ページの作成」をクリックします。

  7. 次の2つのページを作成します:

    • list

    • create

    • detail

  8. カスタム・アプリケーションへのナビゲーションを有効にします。

    1. オーダー・フローの「作成」タブ >「設定」サブタブをクリックします。

    2. 「他のアプリケーションUIがこのページにナビゲートできるようにします」を選択します。

    3. オーダー・フローの詳細タブ >「設定」サブタブをクリックします。

    4. 「他のアプリケーションUIがこのページにナビゲートできるようにします」を選択します。

    5. オーダー・フローのリスト・タブ >「設定」サブタブをクリックします。

    6. 「他のアプリケーションUIがこのページにナビゲートできるようにします」を選択します。

    7. 「オーダー」タブ >「設定」サブタブをクリックします。

    8. 「デフォルト・ページ」フィールドで、「リスト」を選択します。

    9. 「他のアプリケーションUIがこのページにナビゲートできるようにします」を選択します。

  9. オーダー・フローを作成すると、オーダー開始ページが自動的に作成されました。

    右クリックして「削除」をクリックし、order-startノードを削除します。

  10. 次に、オーダー・フローの詳細ページの変数を作成します。

    詳細タブをクリックし、変数サブタブをクリックします。

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

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

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

    3. プロパティ・ペインの「入力パラメータ」セクションで、「有効」をクリックします。

    4. 「パス・オンURL」をクリックします。

      これは、id変数を作成する方法を示すスクリーンショットです。

最後に、関連オブジェクトへの新しいサービス接続を作成します。 この例では、Order_cオブジェクトへのサービス接続を作成します。

  1. 「サービス」タブをクリックします。

  2. 「+サービス接続」 > 「カタログから選択」をクリックします。

  3. 販売およびサービスをクリックします。

  4. CrmRestの横にある鉛筆アイコンをクリックして、カスタム・オブジェクト名を入力します。

    これは、作成したサービス接続を変更する方法のスクリーンショットです。

    たとえば、Order_cと入力します。

  5. 「Metadata取得オプション」フィールドで、「メタデータの動的取得」を選択します。

  6. 「フィルタ・オブジェクト/エンドポイント」フィールドに、リストをフィルタするためのカスタム・オブジェクト名を入力します。

    たとえば、orderと入力します。

  7. カスタム・オブジェクトのチェック・ボックスをクリックします。

    たとえば、Order_cです。

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

イベント・リスナーおよびアクション・チェーンの作成

  1. 次に、イベント・リスナーおよびアクション・チェーンを作成します。

    1. 支払フローの詳細タブをクリックし、イベント・リスナー・サブタブをクリックします。

    2. 「+イベント・リスナー」をクリックします。

    3. 「イベント・リスナーの作成」ダイアログの「イベントのフィルタ」フィールドに、beforeInvokeSmartActionEventと入力します。

    4. beforeInvokeSmartActionEventをクリックします。

    5. 「次」をクリックします。

    6. ページ・アクション・チェーンの横にある+アイコンをクリックします。

    7. 「新規ページ・アクション・チェーン」フィールドに、AddOrderBeforeInvokeSAChainと入力します。

    8. 「終了」をクリックします。

  2. アクション・チェーンを変更します。

    1. リフレッシュされた「イベント・リスナー」ページで、新しいAddOrderBeforeInvokeSAChainイベント・リスナーの横にある「アクション・チェーンへジャンプ」をクリックします。

    2. Ifロジック・アクションを開始ノードにドラッグします。

    3. IfアクションのPropertiesペインで、Conditionフィールドに次のように入力します:

      [[ $variables.event.smartActionId === 'CUST-AddOrder-Payment_c' ]]

      ノート:

      CUST-AddOrder-Payment_cは、以前に作成した「オーダーの追加」スマート・アクションです。

    4. Ifロジック・アクションのtrueブランチを構成します。

      1. 変数の割当てアクションをtrueブランチにドラッグします。

      2. プロパティ・ペインで、変数見出しの横にある「割当」をクリックします。

      3. 「変数の割当て」ダイアログで:

        1. ターゲット側で、enableAddOrderをクリックします。

        2. テキスト・エントリ・ボックスに、trueと入力します。

        3. Staticオプションをクリックします。

        4. 「保存」をクリックします。

オーダー・サブビューの作成

次に、支払に追加するオーダーの新規サブビューを作成します。 「オーダーの追加」ダイアログを追加する場所です。

  1. 支払フローの詳細タブで、ページ・デザイナをクリックします。

  2. 「設計」ボタンをクリックします。

  3. 「構造」ビューで、ドリルダウン・スロットの内側にある動的コンテナ・ノードをクリックします。

    これは、詳細ページのフレームワークを最初に作成したときに追加した動的コンテナです。 この動的コンテナには、詳細ページのサブビュー・ページが保持されます。

    ノート: 「構造」ビューには、2つの動的コンテナ・ノードが表示されます。 1つの動的コンテナが折りたたみパネルを保持します。 もう1つの動的コンテナには、サブビュー・ページが保持されます。 サブビュー・ページを保持する動的コンテナを使用しています。

    このスクリーンショットは、選択する動的コンテナ・ノードを示しています。

  4. プロパティ・ペインで、「+ケース」をクリックします。

  5. 条件フィールドに、次のように入力します:

    $variables.view === 'Order_PaymentOrder_Tgt'

    これは、オーダーの追加スマート・アクションのナビゲーション・パラメータで設定した値と同じです。

  6. セクション見出しの横にある「セクションの追加」アイコンをクリックし、「新規セクション」をクリックします。

  7. OrdersSubviewなどのセクションのタイトルを入力し、OKをクリックします。

  8. プロパティ・ペインで、OrdersSubviewリンクをクリックします。

    このスクリーンショットは、クリックするOrdersSubviewリンクを示しています。

    ページ・デザイナでテンプレート・エディタにナビゲートし、そこでサブビュー・テンプレートを設計できます。

  9. コンポーネント・パレットのフィルタ・フィールドに、Dynamic Tableと入力します。

  10. 動的表コンポーネントを「構造」ビューにドラッグ・アンド・ドロップします。

    このスクリーンショットは、動的表コンポーネントをドラッグする場所を示しています。

  11. 動的表ノードのプロパティ・ペインのクラス・フィールドに、oj-sm-width-fullと入力します。

  12. プロパティ・ペインで、「クイックスタート」タブをクリックします。

    1. 「レイアウトの構成」をクリックします。

    2. 「レイアウトの構成」ダイアログで、関連オブジェクトのエンドポイントを選択します。

      この例では、Payment_c/Order_PaymentOrder_Tgtをクリックします。

      このスクリーンショットは、選択するエンドポイントを示しています。

    3. 「次」をクリックします。

    4. ラベル・フィールドに、ルール・セット名を入力します。 この例では、subviewと入力します。

    5. このサブビューに含めるフィールドをクリックします。

      この例では、RecordNameおよびCurrencyCodeをクリックします。

    6. 「次」をクリックします。

    7. 「ソース」側の「ページ」>「変数」>「ID」変数を「ターゲット」側の<primarykey>_Id (この例ではPayment__c_Id)にマップします。

    8. 式オプションをクリックします。

    9. ターゲット側で、onlyDataパラメータをクリックします。

    10. テキスト・エントリ・ボックスにtrueと入力し、「静的コンテンツ」オプションをクリックします。

    11. ターゲット側で、totalResultsパラメータをクリックします。

    12. テキスト・エントリ・ボックスにtrueと入力し、「静的コンテンツ」オプションをクリックします。

    13. 「終了」をクリックします。

  13. 次に、動的コンテナ内のOrderサブビューの場所を最後に確認します:

    このスクリーンショットは、動的コンテナ内のOrderサブビューの場所を示しています。

  14. Push Gitコマンドを使用して作業内容を保存します。

    Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。

    このスクリーンショットは、Push Gitコマンドの使用方法を示しています。