アポイントメントおよびタスクのサブビューの構成

Oracle Visual Builder Studioを使用して、ユーザーがカスタム・オブジェクトの詳細ページから直接、アポイントメントやタスクを作成および表示することを可能にできます。

シナリオ

この例では、支払カスタム・オブジェクトでアポイントメントおよびタスクのサブタブを作成する方法と、ユーザーが各支払の処理バーから直接タスクおよびアポイントメントを表示および作成できるようにする方法を示します。表示および削除処理はすでに用意されていますが、タスクおよびアポイントメントの作成スマート処理を作成する必要があります。

この例の設定が終了すると、タスクおよびアポイントメントの個別のサブタブが作成されます。

サンプルの「タスク」サブタブのスクリーンショットを次に示します。このサブタブには、コールアウトで強調表示された3つの異なるビューである「すべてのタスク」、「オープン・タスク」および「期限超過タスク」が含まれています。各タスクでは、「完了のマーク」、「編集」および「タスクの削除」の3つの処理を使用できます。

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

前提条件

アプリケーション・コンポーザで、カスタム・オブジェクトとアクティビティ・オブジェクトの間の1:Mの関係を作成します。この例では、支払カスタム・オブジェクトの関係を追加します。

アポイントメントおよびタスクの作成スマート処理

1. サンドボックスで、アプリケーション・コンポーザを開きます。
2. 「スマート処理」をクリックします。
3. タスクおよびアポイントメントの個別の作成スマート処理を作成します。
   1. 「スマート処理」リスト・ページで、「作成」をクリックします。

      アプリケーションに、7つのステップを順番に完了するガイド付きプロセスが表示されます。

      重要: スマート処理を作成するときに入力内容を保存するには、「発行」(ガイド付きプロセスの最後のステップにあります)をクリックする必要があります。発行後、いつでも戻って変更できます。
   2. 「処理の種類」ステップで、「UIベースの処理」を選択します。
   3. 「続行」をクリックします。
   4. 「基本詳細」ステップで、支払オブジェクトについて次の内容を入力します:

      フィールド名	タスクの入力内容	アポイントメントの入力内容
      名前	タスクの作成	アポイントメントの作成
      オブジェクト	支払	支払
      処理ID	デフォルトを受け入れます。	デフォルトを受け入れます。

   5. 「続行」をクリックします。
   6. 「可用性」ステップで、次のように入力します:

      フィールド名	タスクおよびアポイントメントの入力内容
      アプリケーション	営業
      UI可用性	リスト・ページ
      処理ID	デフォルトを受け入れます。
      ロール・フィルタ	必要に応じて、このスマート処理で使用できるジョブ・ロールを指定します。何も指定しない場合、すべてのジョブ・ロールがこの処理を使用できます。

   7. 「続行」をクリックします。
   8. 「処理タイプ」ステップで、次のように入力します:

      フィールド名	タスクの入力内容	アポイントメントの入力内容
      タイプ	作成	作成
      サブタイプ	タスク	アポイントメント
      ターゲット・オブジェクト	アクティビティ	アクティビティ
      オブジェクト・サブタイプ	タスク	アポイントメント

   9. 「処理タイプ」ステップでは、「フィールド・マッピング」セクションで、2つのフィールド・マッピング条件を追加します。

   10. 「追加」(スクリーンショットのコールアウト1)をクリックします

       
   11. 「処理」列で、「編集」(コールアウト2で強調表示されている鉛筆アイコン)をクリックします

   12. 次のように入力します:

       フィールド名	タスクの入力内容	アポイントメントの入力内容
       名前	Payment ID Activities (Payment_id_Activities)	Payment ID Activities (Payment_id_Activities)
       タイプ	属性	属性
       値	Record ID (Id)	Record ID (Id)

   13. 「完了」をクリックして行を保存します。

   14. もう一度「追加」をクリックして、第2の条件を追加します。「値」にTASKまたはAPPOINTMENTと入力する必要があることを除き、タスクとアポイントメントの入力内容は同じです。

       フィールド名	タスクの入力内容	アポイントメントの入力内容
       名前	Activity (ActivityFunctionCode)	Activity (ActivityFunctionCode)
       タイプ	ユーザー入力	ユーザー入力
       値	TASK	APPOINTMENT

   15. 「完了」をクリックします。
   16. 「続行」を2回クリックして、「UIベースの処理詳細」ステップをスキップします。このステップは、Redwood営業には適用されません。
   17. 必要に応じて、「確認メッセージ」ステップで確認メッセージを入力します。確認メッセージは、レコードの作成後にユーザーに短時間表示されます。
   18. 「続行」をクリックします。
   19. 「レビューおよび発行」ステップで、「発行」をクリックします。

サブビューの作成

支払に対して作成されたアポイントメントおよびタスクを表示するサブビューの新規テンプレートを作成します。次の項で実際のサブビューを構成します。

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

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

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

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

   

5. ページ・デザイナでページを表示していることを確認します。

   

6. パネルおよびサブビューを格納する動的コンテナ・コンポーネントのコメント・タグを削除します。

   

7. サブビューの<oj-dynamic-container>タグを強調表示します。

   

8. 「プロパティ」ペインのケース1リージョンで、セクションの追加アイコンをクリックし、新規セクションをクリックします。

9. 「タイトル」フィールドで、tasksなどのセクションのタイトルを入力します。

10. 「ID」フィールドで、tasksの値を受け入れます。

11. 「OK」をクリックします。

12. このステップを繰り返し、2番目のセクションであるappointmentsを作成します。

13. importsの下に、アクティビティ翻訳用の次のコードを追加します:

     "translations": {
        "activityBundle": {
          "path": "faResourceBundle/nls/oracle.apps.crmCommon.activities.resource.activityManagement"
        }
      },
    

サブビュー・レイアウトの構成

次に、cx-subviewフラグメントを使用してサブビューの構造を構築します。

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

2. 「プロパティ」ペインで、先ほど追加したtasksセクションをクリックします。

   '

   ページ・デザイナでテンプレート・エディタの「payment_c-detail」タブが表示され、tasksテンプレートの設計を続行できます。

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

   

4. 「コンポーネント」パレットで、「フィルタ」フィールドにcx-subviewと入力します。

5. cx-subviewフラグメントを、テンプレート・エディタのtasks templateタグの間にドラッグ・アンド・ドロップします。

   

6. 次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。問合せパラメータの場合は、必ず、外部キー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>
   

7. ステップ2に戻り、appointmentsセクションと同じステップを実行します。

   次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。問合せパラメータの場合は、必ず、外部キー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	最終更新日に基づいた降順ソートなど、サブビューでデータをソートする方法を指定します。
   query	サブビューでデータを問い合せるための基準を含めます。
   types	JavaScript関数(getTaskSubviewTypesDataまたはgetAppointmentSubviewTypesDataのいずれか)を渡します。これらの関数により、各サブビューの「すべてのタスク」、「オープン・タスク」および「期限超過タスク」や「すべてのアポイントメント」および「今後のアポイントメント」などのタブが有効になります。

8. 前のステップでは、各サブビュー・フラグメントにtypesパラメータを追加して、getTaskSubviewTypesDataまたはgetAppointmentSubviewTypesDataいずれかのJavaScript関数を渡しました。

   このステップでは、関数をJavaScriptに手動で追加します:

   1. 「payment_c-detail」タブで、「JavaScript」サブタブをクリックします。

   2. 次の関数を追加します。必ず、外部キー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;
   });
         
   

9. 「payment_c-detail」ページから動的コンテナ・コンポーネントをコメント・アウトします:

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

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

   3. 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>
      

   4. パネルおよびサブビューを格納する動的コンテナ・コンポーネントをコメント・アウトします。

      

サブビューのテスト

payment_c-listページからアプリケーション拡張をプレビューして、サブビューをテストします。

1. payment_c-listページから、「プレビュー」ボタンをクリックして、ランタイム・テスト環境の変更を表示します。

   

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

   https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list

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

   https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list

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

   次のスクリーンショットは、データを含むリスト・ページがどのように見えるかを示しています。

   

4. 処理バーで「タスクの作成」および「アポイントメントの作成」と入力して、タスクおよびアポイントメントを作成します。

   

   タスクおよびアポイントメントを作成したら、処理バーでタスクの表示および商談の表示と入力して、作成したレコードを表示します。

5. リスト・ページで、作成したレコードにドリルダウンしてサブタブおよび処理を表示します。

Gitへの作業内容の保存

Gitのプッシュ・コマンドを使用して、作業内容を保存します:

「Git」タブにナビゲートし、変更をレビューして、Gitのプッシュを実行します(コミットとGitリポジトリへのプッシュの両方が行われます)。