ポイントとタスクのサブビューの構成
Oracle Visual Builder Studioを使用すると、ユーザーがカスタム・オブジェクトの詳細ページからアポイントメントおよびタスクを作成および表示できます。
シナリオとは何ですか。
この例では、支払カスタム・オブジェクトのアポイントメントおよびタスクのサブタブを作成する方法、およびユーザーが各支払のアクション・バーから直接タスクおよびアポイントメントを表示および作成できるようにする方法を示します。 表示および削除処理はすでに提供されていますが、タスクとアポイントメントのスマート処理の作成を作成する必要があります。

この例の設定が終了すると、タスクとアポイントメント用のサブタブが別々になります。
サンプルの「タスク」サブタブのスクリーンショットを次に示します。 サブタブには、コールアウトで強調表示された3つの個別のビューが含まれます: すべてのタスク、オープン・タスクおよび期限超過タスク。 タスクごとに、使用可能なアクションが3つあります: タスクを完了、編集および削除としてマークします。

「アポイントメント」サブタブには、次のスクリーンショットのコールアウトで強調表示された2つの個別のビューが含まれています: すべてのポイントおよび今後のポイント。 使用可能なアクションは次のとおりです: アポイントメントを編集および削除します。

前提条件
アプリケーション・コンポーザで、カスタム・オブジェクトとアクティビティ・オブジェクトの間に1対多の関係を作成します。 この例では、Paymentカスタム・オブジェクトの関係を追加します。
ポイントとタスクのスマート処理の作成
- サンドボックスで、アプリケーション・コンポーザを開きます。
- 「スマートなアクション」をクリックします。
- タスクおよびアポイントメントのスマート処理を個別に作成します。
- 「スマート・アクション」リスト・ページで、「作成」をクリックします。
7つのステップを順番に完了するガイド付きプロセスが表示されます。
重要: スマート・アクションの作成時にエントリを保存するには、送信 (ガイド付きプロセスの最後のステップで使用可能)をクリックする必要があります。 送信後はいつでも戻って変更を加えることができます。 - 「アクションの種類」ステップで、「UIベースのアクション」を選択します。
- 「続行」をクリックします。
- 「基本詳細」ステップで、Paymentオブジェクトに次のように入力します:
フィールド名 タスクのエントリ ポイントのエントリ 名前 タスクの作成 アポイントメントの作成 オブジェクト 支払 支払 処理ID デフォルトをそのまま使用できます。 デフォルトをそのまま使用できます。 - 「続行」をクリックします。
- 「可用性」ステップで、次のように入力します:
フィールド名 タスクおよびアポイントメントのエントリ アプリケーション Sales UI可用性 リスト・ページ 処理ID デフォルトをそのまま使用できます。 ロール・フィルタ オプションで、このスマート処理を使用できるジョブ・ロールを指定します。 入力がない場合、すべてのジョブ・ロールがこの処理を使用できることを意味します。 - 「続行」をクリックします。
- 「処理タイプ」ステップで、次のエントリを作成します:
フィールド名 タスクのエントリ ポイントのエントリ タイプ 作成 作成 サブタイプ タスク アポイントメント ターゲット・オブジェクト Activity Activity オブジェクト・サブタイプ タスク アポイントメント -
「処理タイプ」ステップでは、「フィールド・マッピング」セクションで2つのフィールド・マッピング条件を追加します。
「追加」をクリックします(スクリーンショットのコールアウト1)
- 「アクション」列で、「編集」(コールアウト2で強調表示された鉛筆アイコン)をクリック
-
次のエントリを作成します:
フィールド名 タスクのエントリ ポイントのエントリ 名前 支払IDアクティビティ(Payment_id_Activities) 支払IDアクティビティ(Payment_id_Activities) タイプ 属性 属性 値 レコードID (ID) レコードID (ID) - 「完了」をクリックして行を保存します。
-
「追加」を再度クリックし、2番目の条件を追加します。 TASKまたはAPPOINTMENTのいずれかを入力する必要がある値を除き、タスクおよびアポイントメントの入力は同じです。
フィールド名 タスクのエントリ ポイントのエントリ 名前 アクティビティ(ActivityFunctionCode) アクティビティ(ActivityFunctionCode) タイプ User-entered User-entered 値 TASK APPOINTMENT - 「完了」をクリックします。
- 「続行」を2回クリックして、「UIベースの処理詳細」ステップをスキップします。 このステップは、Redwood営業には適用されません。
- オプションで、「確認メッセージ」ステップに確認メッセージを入力します。 ユーザーがレコードを作成すると、確認メッセージが表示されます。
- 「続行」をクリックします。
- 「レビューおよび発行」ステップで、「送信」をクリックします。
- 「スマート・アクション」リスト・ページで、「作成」をクリックします。
サブビューの作成
支払用に作成されたアポイントメントおよびタスクを表示するサブビュー用の新規テンプレートを作成します。 実際のサブビューは、次のセクションで構成します。
-
Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
-
payment_c-detailノードをクリックします。 を展開し、
-
payment_c詳細タブで、「ページ・デザイナ」サブタブをクリックします。
-
ボタンをクリックします。
-
ページ・デザイナでページを表示していることを確認します。
-
パネルおよびサブビューを含む動的コンテナ・コンポーネントのコメント・タグを削除します。
-
サブビューの
<oj-dynamic-container>
タグを強調表示します。 -
「プロパティ」ペインの「ケース1」リージョンで、「セクションの追加」アイコンをクリックし、「新規セクション」をクリックします。
-
「タイトル」フィールドに、セクションのタイトル(tasksなど)を入力します。
-
IDフィールドで、値tasksを受け入れます。
-
「OK」をクリックします。
- ステップを繰り返して2つ目のセクションを作成: appointments.
-
次のインポートのアクティビティ翻訳に次のコードを追加します:
"translations": { "activityBundle": { "path": "faResourceBundle/nls/oracle.apps.crmCommon.activities.resource.activityManagement" } },
サブビュー・レイアウトの構成
次に、cx-subviewフラグメントを使用してサブビューの構造を構築します。
-
「payment_c-詳細タブ」で、「ページ・デザイナ」サブタブをクリックします。
「プロパティ」ペインで、追加した「タスク」セクションをクリックします。
'ページ・デザイナは、payment_c詳細タブにあるテンプレート・エディタにナビゲートします。このタブでは、「タスク」テンプレートを設計できます。
-
「コード」ボタンをクリックします。
-
コンポーネント・パレットのフィルタ・フィールドに、
cx-subview
と入力します。 -
cx-subviewフラグメントを、タスク・テンプレート・タグの間にテンプレート・エディタにドラッグ・アンド・ドロップします。
-
コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。 問合せパラメータの場合、外部キー
Payment_Id_PaymentToActivities
を適切な値に置き換えてください。ノート: 外部キー・フィールドの名前の形式は常に<Source object name>_Id_<Relationship name>です。<oj-vb-fragment-param name="resource" value='[[ {"name": "activities", "primaryKey": "ActivityId","puid": "ActivityNumber", "endpoint": "cx" , "alias" : "tasks"} ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="sortCriteria" value='[[ [{"attribute": "LastUpdateDate","direction": "desc" }] ]]'> </oj-vb-fragment-param> <oj-vb-fragment-param name="query" value='[[ [{"type": "qbe","provider": "adfRest", "params": [{"key": "Payment_Id_PaymentToActivities", "value":$variables.id }]}] ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="context" value="[[ {} ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="extensionId" value="oracle_cx_salesUI"></oj-vb-fragment-param> <oj-vb-fragment-param name="types" value='[[ $functions.getTaskSubviewTypesData($page.variables.id, $page.translations) ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="title" value="Tasks"></oj-vb-fragment-param> <oj-vb-fragment-param name="subviewLayoutId" value="[[ 'SubViewLayoutForTasks' ]]"></oj-vb-fragment-param>
-
ステップ2に戻り、ポイント・セクションに対して同じステップを完了します。
コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。 問合せパラメータの場合、外部キー
Payment_Id_PaymentToActivities
を適切な値に置き換えてください。ノート: 外部キー・フィールドの名前の形式は、常に: <Source object name>_Id_<Relationship name>.<oj-vb-fragment-param name="resource" value='[[ {"name": "activities", "primaryKey": "ActivityId","puid": "ActivityNumber", "endpoint": "cx" , "alias" : "appointments"} ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="sortCriteria" value='[[ [{"attribute": "LastUpdateDate","direction": "desc" }] ]]'> </oj-vb-fragment-param> <oj-vb-fragment-param name="query" value='[[ [{"type": "qbe", "params": [{"key": "Payment_Id_PaymentToActivities", "value": $variables.id }]}] ]]'> </oj-vb-fragment-param> <oj-vb-fragment-param name="context" value="[[ {} ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="extensionId" value="oracle_cx_salesUI"></oj-vb-fragment-param> <oj-vb-fragment-param name="types" value='[[ $functions.getAppointmentSubviewTypesData($page.variables.id, $page.translations) ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="title" value="Appointments"></oj-vb-fragment-param> <oj-vb-fragment-param name="subviewLayoutId" value="[[ 'SubViewLayoutForAppointments' ]]"></oj-vb-fragment-param>
次の表では、サブビューに指定できるパラメータの一部について説明します:
パラメータ名 説明 sortCriteria 最終更新日による並べ替えや降順など、サブビュー上のデータの並べ替え方法を指定します。 問合せ サブビューでデータを問合せするための基準を含めます。 types JavaScript関数(getTaskSubviewTypesDataまたはgetAppointmentSubviewTypesData)を渡します。 これらの機能により、各サブビュー(すべてのタスク、オープン・タスク、期限超過タスクなど)のタブ、およびすべてのポイントおよび今後のポイントが有効になります。 -
前のステップでは、各サブビュー・フラグメントにtypesパラメータを追加して、JavaScript関数(getTaskSubviewTypesDataまたはgetAppointmentSubviewTypesData)を渡しました。
このステップでは、JavaScriptにファンクションを手動で追加します:-
payment_c-detailタブで、JavaScriptサブタブをクリックします。
- 次の関数を追加します。 外部キー
Payment_Id_PaymentToActivities
を適切な値に置き換えてください。
define(['vx/oracle_cx_salesUI/ui/self/applications/cx-sales/resources/utils/CrmCommonUtils','vx/oracle_cx_salesUI/ui/self/applications/cx-sales/resources/utils/FormatUtils'], (CrmCommonUtils,FormatUtils) => { 'use strict'; class PageModule { } PageModule.prototype.getTaskSubviewTypesData = function (id, translation) { const typesData = []; typesData.push({ "resource": "activities", "query": [{ "type": "qbe", "provider": "adfRest", "params": [ { "key": "Payment_Id_PaymentToActivities", "value": id }, { "key": "ActivityFunctionCode", "value": "TASK" } ] }], "isDefault": true, "sortCriteria": [{ "attribute": "LastUpdateDate", "direction": "descending" }], "title": "AllTasks", "id": "AllTasks" }); typesData.push({ "resource": "activities", "query": [{ "type": "qbe", "provider": "adfRest", "params": [ { "key": "Payment_Id_PaymentToActivities", "value": id }, { "key": "ActivityFunctionCode", "value": "TASK" }, { "key": "StatusCode", "operator": "$in", "value": "NOT_STARTED,IN_PROGRESS,ON_HOLD" } ] }], "isDefault": true, "sortCriteria": [{ "attribute": "DueDate", "direction": "ascending" }], "title": "OpenTasks", "id": "OpenTasks" }); typesData.push({ "resource": "activities", "query": [{ "type": "qbe", "provider": "adfRest", "params": [ { "key": "Payment_Id_PaymentToActivities", "value": id }, { "key": "ActivityFunctionCode", "value": "TASK" }, { "key": "DueDate", "operator": "$lt", "value": FormatUtils.getFormattedDate(new Date()) }, { "key": "StatusCode", "operator": "$in", "value": "NOT_STARTED,IN_PROGRESS,ON_HOLD" } ] }], "isDefault": true, "sortCriteria": [{ "attribute": "DueDate", "direction": "descending" }], "title":"OverdueTasks", "id": "OverdueTasks" }); return { "style": "tab", "items": typesData }; }; PageModule.prototype.getAppointmentSubviewTypesData = function (id, translation) { const typesData = []; typesData.push({ "resource": "activities", "query": [{ "type": "qbe", "provider": "adfRest", "params": [ { "key": "Payment_Id_PaymentToActivities", "value": id }, { "key": "ActivityFunctionCode", "value": "APPOINTMENT" } ] }], "isDefault": true, "sortCriteria": [{ "attribute": "SortDate", "direction": "ascending" }], "title": "AllAppointments", "id": "AllAppointments" }); typesData.push({ "resource": "activities", "query": [{ "type": "qbe", "provider": "adfRest", "params": [ { "key": "Payment_Id_PaymentToActivities", "value": id }, { "key": "ActivityFunctionCode", "value": "APPOINTMENT" }, { "key": "ActivityEndDate", "operator": "$ge", "value": new Date().toISOString() } ] }], "isDefault": true, "sortCriteria": [{ "attribute": "ActivityStartDate", "direction": "ascending" }], "title": "UpcomingAppointments", "id": "UpcomingAppointments" }); return { "style": "tab", "items": typesData }; }; return PageModule; });
-
- payment_cの詳細ページから動的コンテナ・コンポーネントをコメント・アウトします:
-
payment_c-detailタブをクリックし、「ページ・デザイナ」サブタブをクリックします。
-
「コード」ボタンをクリックします。
-
タスクおよびポイントのサブビュー・ラベルをactionBarパラメータに追加します:
<oj-vb-fragment-param name="actionBar" value='[[ { "applicationId": "ORACLE-ISS-APP", "resource": {"name": "Payment_c", "primaryKey": "Id", "puid": "Id", "value": $variables.puid }, "subviewLabel": {"tasks" : "Tasks", "appointments" : "Appointments"}} ]]'> </oj-vb-fragment-param>
-
パネルとサブビューを含む動的コンテナ・コンポーネントをコメント・アウトします。
-
サブビューのテスト
payment_cリスト・ページからアプリケーション拡張をプレビューして、サブビューをテストします。
payment_c-listページで、プレビュー・ボタンをクリックして、ランタイム・テスト環境の変更を表示します。
-
結果のプレビュー・リンクは次のようになります:
https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list
-
プレビュー・リンクを次のように変更します:
https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list
ノート: プレビュー・リンクに
/application/container
を追加する必要があります。次のスクリーンショットは、データを使用したリスト・ページの外観を示しています。
アクション・バーに「タスクの作成」および「ポイントの作成」を入力して、タスクとアポイントメントを作成します。
タスクおよびアポイントメントを作成した後、アクション・バーに「タスクの表示」および「ポイントの表示」を入力して、作成したレコードを表示します。
- リスト・ページで、作成したレコードにドリルダウンして、サブタブとアクションを表示します。
作業内容をGitに保存
「Push Git」コマンドを使用して作業内容を保存します:
Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。
