VB Studioでのメトリック・カードの直接作成

最初にメトリック・カードをビジュアライゼーションとして作成するかわりに、Oracle Visual Builder Studioで直接作成できます。

これで、トピック「コンテンツ・コンテナの作成とメトリック・カードへのリンク」の説明に従って、タブのコンテンツ・コンテナを構成する準備が整いました。

メトリック・カードの作成

メトリック・コンテナ・コピーで「セクションの追加」をクリックします。 (このボタンは、スクリーンショットで強調表示されているプラス記号です)。
リストの上部にある「新規セクション」をクリックします。

重要: VB StudioではOracleが提供するメトリック・カードを複製できますが、小規模な変更を行っている場合でも、かわりに新しいセクションを追加する必要があります。セクションは複製できません。
「セクションの作成」ウィンドウで、設定時にのみ表示されるタイトルを入力します。実際のタブ・タイトルをパラメータとしてコードに入力します。たとえば、Sales Manager Hardware Pipelineと入力します。
作成した新しいセクションにドリルダウンします。
「コード」をクリックします。
新しい「Sales Managerハードウェア・パイプライン」セクションには、空のプレースホルダーtemplateタグが表示されます。
```
<template id="salesManagerHardwarePipelineMetrics">
</template>
```
「コンポーネント」パレットの「フィルタ」フィールドに、cx-metric-cardと入力します。
cx-metric-cardフラグメントをテンプレート・エディタのテンプレート・タグの間にドラッグ・アンド・ドロップします。

アクションによって、次のコードが挿入されます:
```
<oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-metric-card"></oj-vb-fragment>
```
次のクラス情報をフラグメントに追加: class="oj-flex oracle-cx-fragmentsUI-cx-fragment-full-height.
結果のコードは次のようになります:
```
<oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-metric-card" class="oj-flex oracle-cx-fragmentsUI-cx-fragment-full-height></oj-vb-fragment>
```
メトリック・カードの次のコードを</oj-vb-fragment>タグの前に挿入
1. ビジネス・オブジェクトを識別する必須の「リソース」パラメータを追加します。リソース・パラメータはオブジェクトごとに異なります。
  
  パイプライン情報のオブジェクトである商談のリソース・パラメータを次に示します:
```
<oj-vb-fragment-param name="resource" value='[[ {"name": "opportunities", "primaryKey": "OptyId", "puid": "OptyNumber", "endpoint": "cx" } ]]'></oj-vb-fragment-param>
```
  サポートされているその他のビジネス・オブジェクトについては、「表、メトリック・カードおよびリスト・ビューの標準コンポーネントのコードで使用する値」のリソース・パラメータのリストを参照してください。
2. 必要な「問合せ」パラメータを追加します。このパラメータは、データのソースである保存済検索を指定します。
  
  この例では、ソースはIDがcaf84b9d-b975-4b9d-b78e-41718b78f36eの保存済検索です。保存済検索のIDを取得するには、「Redwoodユーザー・エクスペリエンスのOracle Salesで、保存済検索のUUIDとそのフィルタのIDを検索するにはどうすればよいですか。」のトピックの説明に従って、Chromeブラウザのコードを調べてください。
```
  <oj-vb-fragment-param name="query" value='[[ [{"type": "savedSearch", "params": [{"key": "queryUuid", "value": "caf84b9d-b975-4b9d-b78e-41718b78f36e"}]},
                                                                                                    ] ]]'></oj-vb-fragment-param>
```
3. オプションで、ソースからデータをフィルタできます。たとえば、このサンプル・パラメータでは、マネージャの下位が所有するオープン商談のみが含まれるようにデータがフィルタされます。
  
  ヒント: 保存検索にはすでにフィルタが含まれている可能性があるため、将来更新する場所をもう1つ持たずに、そこにフィルタを追加できます。
```
  <oj-vb-fragment-param name="query" value='[[ [{"type": "savedSearch", "params": [{"key": "queryUuid", "value": "caf84b9d-b975-4b9d-b78e-41718b78f36e"}]},
                                                  {"type": "qbe", "params": [{"key": "StatusCode", "operator": "in", "value": ["OPEN"] },
                                                                            {"key": "RecordSet", "value": "ORA_MYSUBORDSSALESTEAMOPTIES" }]},
                                                  ] ]]'></oj-vb-fragment-param>
```
4. オプションで、「メトリック・カードへのバッジの追加」のセクションの説明に従って、重要な情報に注意を引くバッジを追加します。
5. タブに表示されるタイトルを含む「タイトル」パラメータを追加します。
```
<oj-vb-fragment-param name="titleItem" value="[['Hardware Pipeline']]"></oj-vb-fragment-param>
```
6. タブに合計を表示するには、計算する「集計」パラメータを追加します。この例では、パラメータによって保存済検索の商談売上の合計が計算されます:
```
<oj-vb-fragment-param name="aggregate" value="[[ {'field': 'PrimaryRevenue.RevnAmount','functionType': 'sum' } ]]"></oj-vb-fragment-param>
```
オプションのフィルタおよびバッジを使用しない商談保存検索のサンプル・コードを次に示します:
```
<template id="salesManagerHardwarePipelineMetrics">
  <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-metric-card" class="oj-flex oracle-cx-fragmentsUI-cx-fragment-full-height">
  <oj-vb-fragment-param name="resource" value='[[ {"name": "opportunities", "primaryKey": "OptyId", "puid": "OptyNumber", "endpoint": "cx" } ]]'></oj-vb-fragment-param> 
  <oj-vb-fragment-param name="query" value='[[ [{"type": "savedSearch", "params": [{"key": "queryUuid", "value": "caf84b9d-b975-4b9d-b78e-41718b78f36e"}]},
                                              ] ]]'></oj-vb-fragment-param>
    <oj-vb-fragment-param name="aggregate" value="[[ {'field': 'PrimaryRevenue.RevnAmount','functionType': 'sum' } ]]"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="titleItem" value="[['Hardware Pipeline']]"></oj-vb-fragment-param>                                          
  </oj-vb-fragment>
</template>
```
「ページに戻る」をクリックします。

メトリック・カードへのバッジの追加

まず、表示条件を決定します。各条件は、メトリック・カードに表示される集計合計数の範囲です。各範囲について、表示するバッジのタイプを決定します。たとえば、次のタイプの設定を構成できます。

期限超過タスクが5件未満の場合、バッジはまったく表示されません。
期限超過タスクが5件から10件存在する場合は、警告バッジを表示します。
10件を超える期限超過タスクが存在する場合は、クリティカル・バッジを表示します。

メトリック・カードの表示条件を定義する場合、それらの条件の順序が重要です。各条件は、定義した順に上から下に評価されます。最初に満たされる条件が、適用される条件です。

また、カードの集計合計に関係なく、カードに常に同じバッジが表示されるようにメトリック・カードを構成することもできます。

次の表に、一連のバッジおよび表示条件の定義に使用できるバッジ・プロパティを示します:

バッジ・プロパティ

バッジ・プロパティ	説明
`status`	危険 info 普通成功警告各タイプのバッジ( `status`)には、変更できない特定の色が表示されます。テキスト「Critical」を含む「危険」バッジの例を次に示します:
`min`	特定のバッジの表示条件の下限。
`max`	特定のバッジの表示条件の上限。
`text`	バッジに表示されるテキスト。各タイプのバッジ(`status`)にはデフォルトのテキストが表示されますが、このプロパティを使用して変更できます。

次に、一連のバッジおよび表示条件の定義に使用できるコードの例を示します:

[{status : "success", text : "All Good", min : "0", max : "10"}, {status : "warning", text : "Attention", min : "11", max : "50"},{status : "danger", text : "Critical", min : "51"}]

表示するバッジのタイプを指定します(status)。
各バッジとオプションの説明を表示する条件(minおよびmax)を定義します。
バッジ・テキスト(text)を指定します(たとえば、警告または「問題」)。

ヒント:

上限を指定せずに下限のみを指定できます(たとえば、10より大きい集計合計を指定する場合)。
metaTextは、範囲条件なしで追加できます。したがって、どの範囲も適用されない場合は、メトリック・カードに摘要を表示します。