8 ダッシュボード・ページの構築

この章では、WebCenterアプリケーション用のダッシュボード・ページを構築します。ダッシュボード・ページは、ビジネス・アクティビティやビジネス・インテリジェンスに関するメトリックおよび主要なパフォーマンス・インジケータを体系化して表示する、わかりやすいユーザー・インタフェースです。

このサンプル・ダッシュボードでは、エンド・ユーザーはサイトの統計情報の表示、顧客契約の検索および毎日のサービス量の内訳の表示を行うことができます。また、最もアクティブな顧客、顧客の詳細、最も生産性の高い従業員および最もリクエストの多い製品に関する情報も表示できます（図8-1を参照）。

図8-1    ダッシュボード・ページの全体像

画像の説明

この章では、ページを構築し、OmniPortletを使用してダッシュボード・ページ（図8-1）を作成する方法を示します。内容は次のとおりです。

• 手順1: ダッシュボード・ページの作成

• 手順2: ページ・レイアウトの作成

• 手順3: ページへのOmniPortletのインスタンスの追加

• 手順4: Service Request Volumeポートレット用のSelectOneChoiceコンポーネントの追加

• 手順5: 顧客契約の検索機能の追加

• 手順6: Most Productive Employeesポートレットの定義

• 手順7: Service Request Volumeポートレットの定義

• 手順8: Most Requested Productsポートレットの定義

• 手順9: Most Active Customersポートレットの定義

• 手順10: Customer Detailsポートレットの定義

• 手順11: ページ・コンテンツの連結

手順1: ダッシュボード・ページの作成

この項では、ポートレットを配置するページを構築して、ダッシュボード・ページを作成する方法を示します。始める前に、必要なサンプル・ファイルがあることを確認し、サンプル・ファイルに含まれるinstall.htmlファイルの説明に従ってPreconfigured OC4Jを必ず初期化しておきます。

1. JSF JSPページを新規作成します。「JSF JSPの作成」ウィザードで次のオプションを必ず選択してください。

   注意 「JSF JSPの作成」ウィザードにアクセスするには、「ファイル」メニューから「新規」を選択し、「新規ギャラリ」ダイアログ・ボックスで、「Web Tier」の下の「JSF」を選択します。

   • ステップ1/4: ページ名を SRDashboard.jspxとし、ディレクトリ・パスをUserInterface¥public_html¥app¥management¥に設定し、「JSPドキュメント(*.jspx)」タイプを選択します。

   • ステップ2/4: 「新規マネージドBeanでのUIコンポーネントの自動公開」オプションを選択し、このページの残りのオプションはデフォルトのままにしておきます。

     注意 新規マネージドBeanの名前は、必ずapp_management_SRDashboardにします。

   • ステップ3/4: 次のライブラリが「選択済のライブラリ」リストに表示されていることを確認します。
     • JSF Core

     • JSF HTML

     • ADF Faces Components

     • ADF Faces HTML

     • ADF Portlet Components

     • Customizable Components Core

       注意 ページの構築および移入の詳細は、『Oracle WebCenter Framework開発者ガイド』の「ページへの移入」を参照してください。

2. ウィザードを完了してページを作成したら、アプリケーションの「SRDemoSample_Starter」、「UserInterface」、「WEB-INF¥template」の順にフォルダを開きます。

3. 「SRDemoTemplate.jspx」を右クリックし、「開く」を選択します。

4. 「ソース」タブをクリックし、ソース・コードをSRDemoTemplate.jspxページからコピーして新しいSRDashboard.jspxページのソースに貼り付け、新しいページの既存のコードをすべて置き換えます。

5. _PAGE_NAME_を探し、srdashboardで置き換えて、次のようなpanelPageタグにします。

   <af:panelPage title="#{res['srdashboard.pageTitle']}">
   

6. 翻訳可能なページ・タイトルを新しいページに指定するには、「SRDemoSample_Starter」、「UserInterface」、「アプリケーション・ソース」、「oracle.srdemo.view」、「resources」の順に開き、「UIResources.properties」ファイルを開きます。

7. UIResources.propertiesファイルで、次の行をファイルの最後に追加します。

   #WC_DashboardPage
   srdashboard.pageTitle=Dashboard
   

8. 「UserInterface」プロジェクトの「WEB-INF」フォルダの「faces-config.xml」を開きます。

9. 必要に応じて、「ソース」タブをクリックします。

10. ファイルの最後の</faces-config>終了タグの前に、マネージドBean（例8-1）を既存のコードに追加して、「Dashboard」サブタブのメニュー項目を管理するBeanをインスタンス化します。

    例8-1    「Dashboard」サブタブ用のマネージドBean

    <managed-bean>
        <managed-bean-name>subMenuItem_Manage_Dashboard</managed-bean-name>
        <managed-bean-class>oracle.srdemo.view.menu.MenuItem</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
        <managed-property>
          <property-name>label</property-name>
          <value>#{resources['srdemo.menu.manage.dashboard']}</value>
        </managed-property>
        <managed-property>
          <property-name>shown</property-name>
          <value>#{userInfo.manager}</value>
        </managed-property>
        <managed-property>
          <property-name>viewId</property-name>
          <value>/app/management/SRDashboard.jspx</value>
        </managed-property>
        <managed-property>
          <property-name>outcome</property-name>
          <value>Dashboard</value>
        </managed-property>
    <!-- ADF Authorization -->
        <managed-property>
          <property-name>targetPageDef</property-name>
          <value>app_management_SRDashboardPageDef</value>
        </managed-property>
    <!-- End ADF Authorization -->
    </managed-bean>
    

11. ファイルを保存します。

12. 次の行をUIResources.propertiesファイルの最後に追加します。

    srdemo.menu.manage.dashboard=My Dashboard
    

13. faces-config.xmlファイルを開き、<managed-bean-name>menuItem_Manageを探します。

14. サブタブを作成したので、それをメニュー項目として親メニューに追加する必要があります。そのためには、次のコードをlist-entriesタグに追加します。

    例8-2    「Dashboard」サブタブを「Management」ページに追加するためのコード

    <value>#{subMenuItem_Manage_Dashboard}</value>
    

15. 例8-3に示すコードをナビゲーション・ルールに追加して、新しいダッシュボード・メニュー項目をJSPXページにリンクします。

    例8-3    「Dashboard」サブタブをDashboard.jspxページにリンクするためのコード

    <navigation-rule>
       <from-view-id>/app/management/SRManage.jspx</from-view-id>
       <navigation-case>
          <from-outcome>Dashboard</from-outcome>
          <to-view-id>/app/management/SRDashboard.jspx</to-view-id>
       </navigation-case>
    </navigation-rule>
    

16. ページを保存します。

手順2: ページ・レイアウトの作成

この項では、カスタマイズ可能コンポーネント（特にPanelCustomizableコンポーネント）を使用して、ページのレイアウトを設計する方法を示します。カスタマイズ可能コンポーネントの使用方法の詳細は、第7章「ページの構築とコンポーネントの追加」のカスタマイズ可能コンポーネントに関する項を参照してください。

完成したデモのSRDashboard.jspxページを開いてソースを表示すると、完成したページのコードを確認できます。

1. ダッシュボードの1列目を追加するには、まず、SRDashboard.jspx ファイルのソースを開きます。

2. テキストの「Please Insert Main Page Content Here!」を探し、その行の下にカーソルを置きます。

3. コンポーネント・パレットから、「カスタマイズ可能コンポーネント・コア」を選択します。

4. 「カスタマイズ可能コンポーネント・コア」リストで、「PanelCustomizable」をクリックしてPanelCustomizableコンポーネントをページに追加します。コードは、図8-2に示すようなコードになります。

   図8-2    1つ目のPanelCustomizableの配置

   
   

   画像の説明

5. 「構造」ペインで、追加したばかりの「cust:panelCustomizable」を選択し、プロパティ・インスペクタでIsMovableプロパティをfalseに設定します。

6. 2つ目のPanelCustomizableを作成したばかりのPanelCustomizableの下に追加します。

7. 「構造」ペインで、追加したばかりの「cust:panelCustomizable」を選択し、プロパティ・インスペクタで次のプロパティを設定します。
   • DisplayHeader: true

   • Id: panelCustomizable2

   • Layout: horizontal

   • Text: Business Analysis

   • IsMovable: true

   • IsSeededInteraction: true

   この時点で、ページのソース・コードは、図8-3に示すようなコードになります。

   図8-3    ソース・コードでのPanelCustomizable

   
   

   画像の説明

8. 「カスタマイズ可能コンポーネント・コア」コンポーネント・パレットから「ShowDetailFrame」を選択して、作成したばかりのPanelCustomizableの下にShowDetailFrameコンポーネントを作成します。

9. 新しいShowDetailFrameのTextプロパティをCustomer Contractsに設定します。コードは、図8-4に示すようなコードになります。

   図8-4    ソース・コードでのShowDetailFrame

   
   

   画像の説明

10. 作成したばかりのShowDetailFrameコンポーネントの後にスペーサを挿入します。そのためには、コンポーネント・パレットから「ADF Faces Core」を選択し、「ObjectSpacer」を選択します。コードは、図8-5に示すようなコードになります。

    図8-5    ソース・コードでのObjectSpacer

    
    

    画像の説明

11. 2つ目のPanelCustomizableコンポーネントを作成して次のプロパティを設定し、2列目をページに追加します。

    プロパティ	値
    DisplayHeader	false
    Layout	horizontal
    Text	Service Requests Volume
    IsMovable	true
    IsSeededInteractionAvailable	true

12. ShowDetailFrame追加し、TextプロパティをService Requests Volumeに設定します。

    この時点で、ページのソース・コードは、図8-6に示すようなコードになります。

    図8-6    2つのカスタマイズ可能コンポーネントがあるダッシュボード・ページのソース・コード

    
    

    画像の説明

13. 次に、Customer ContractsというShowDetailFrame内に水平パネルを追加します。

    そのためには、ShowDetailFrameの後の行にカーソルを置きます。コンポーネント・パレットから、「ADF Faces Core」を選択し、リストから「PanelHorizontal」を選択します。

14. 次に、PanelHorizontalの中に入力テキスト・フィールドを追加します。

    そのためには、追加したばかりのPanelHorizontalの後の行にカーソルを置き、コンポーネント・パレットから「InputText」を選択します。

15. ソースで「InputText」コンポーネントを選択します。

16. プロパティ・インスペクタで、LabelプロパティをCustomerに設定します。

17. Valueプロパティを%に設定します。

18. Bindingプロパティを#{backing_app_management_SRDashboard.inputText1}に設定します。図8-7に、適切な値を設定したプロパティ・インスペクタを示します。

    図8-7    入力テキスト・フィールドのプロパティ・インスペクタ

    
    

    画像の説明

    結果のコードは、図8-8に示すソースのようになります。

    図8-8    入力テキスト・フィールドのソース・コード

    
    

    画像の説明

19. 次に、ユーザーが顧客契約を検索できるようにするコマンド・ボタンを追加します。

    そのためには、InputTextコンポーネントの下にカーソルを置き、コンポーネント・パレットから「CommandButton」を選択します。

20. TextプロパティをSearchに設定します。

21. Actionプロパティを#{backing_app_management_SRDashboard.commandButton_action}に設定します。

22. プロパティ・インスペクタで、Bindingプロパティを#{backing_app_management_SRDashboard.commandButton1}に設定します。

23. 「ソース」で、Disabledプロパティを追加し、#{!bindings.search.enabled}と定義します。

    この時点で、コードは図8-9に示すようなコードになります。

    図8-9    入力テキスト・フィールドおよびコマンド・ボタンのソース

    
    

    画像の説明

24. InputTextおよびCommandButtonの下に表を追加して、各種ポートレットがページに水平に表示されるようにします。

手順3: ページへのOmniPortletのインスタンスの追加

この項では、OmniPortletのインスタンスをページ・レイアウトに追加します。この章の後の手順ではポートレットを定義し、最終的にこれらのポートレットを1つに連結します。

1. レイアウトを作成したので、ポートレットをページに追加できます。

   ページのソースで、Customer ContractsというShowDetailFrameの後、かつ作成したObjectSpacerの前にカーソルを置き、次に「構造」ビューで、1つ目のPanelCustomizableの上にカーソルを置きます。

2. コンポーネント・パレットから、「OmniPortlet Producer」を選択し、「OmniPortlet」をクリックします。この時点で、ページのソース・コードは、図8-10に示すようなコードになります。

   図8-10    ページのソース・コードでのOmniPortlet

   
   

   画像の説明

   注意 コンポーネント・パレットのドロップダウン・リストにOmniPortlet Producerが表示されない場合は、この例に関連するプロデューサを登録する必要があります。

3. 「OmniPortlet」を選択し、プロパティ・インスペクタでIDをcustomerContractsに設定します。

4. ページのソースで、追加したばかりのOmniPortletの後にカーソルを置き、OmniPortletの2つ目のインスタンスを追加してIDをmostProductiveEmployeesに変更します。

5. 「構造」ペインで、3つ目の「PanelCustomizable」の下の「ShowDetailFrame」を選択してOmniPortletを追加し、IDをserviceRequestVolumeに設定します。

6. 「構造」ペインで、3つ目の「PanelCustomizable」を選択して別のOmniPortletを追加し、IDをmostRequestedProductsに設定します。

7. 3つ目の「PanelCustomizable」を再度選択して別のOmniPortletを追加し、IDをcustomerDetailsに設定します。

手順4: Service Request Volumeポートレット用のSelectOneChoiceコンポーネントの追加

この項では、Service Request Volumeポートレット用にSelectOneChoiceコンポーネントを追加します。

1. 「構造」ビューで、3つ目の「PanelCustomizable」の下の「ShowDetailFrame」を選択し、ADF Coreコンポーネント・パレットからSelectOneChoiceコンポーネントを追加します。

2. SelectOneChoiceコンポーネントに、次のプロパティを設定します。
   • ID: dayPicker

   • label: Volume for last

   • default value: 360

   • items: 1、2、3、5、10、30、60、90、180、360 days

   • autoSubmit: true

   次のコードがJSPXに表示されます。

   <af:selectOneChoice label="Label 1" value="360" autoSubmit="true"
   id="dayPicker">
   <af:selectItem label="1 day" value="1"/>
   <af:selectItem label="2 days" value="2"/>
   <af:selectItem label="3 days" value="3"/>
   <af:selectItem label="5 days" value="5"/>
   <af:selectItem label="10 days" value="10"/>
   <af:selectItem label="30 days" value="30"/>
   <af:selectItem label="60 days" value="60"/>
   <af:selectItem label="90 days" value="90"/>
   <af:selectItem label="180 days" value="180"/>
   <af:selectItem label="360 days" value="360"/>
   </af:selectOneChoice>
   

3. 「構造」ビューで、2つ目の「PanelCustomizable」から「ShowDetailFrame」を選択します。

4. 最初のタブで、「リストの作成」を選択し、ドロップダウン・リストの内容を入力します。

5. 「アイテムの追加」をクリックします。

6. 「アイテム・ラベル」フィールドに1 dayと入力し、「アイテム値」フィールドに1と入力します。

7. 前の手順を、2、3、5、10、30、60、90、180および360の各日数について繰り返します。

8. 「共通プロパティ」タブをクリックします。

9. 「ラベル」フィールドに、Volume for lastと入力します。

10. 「値」フィールドに、360と入力します。

11. 「アドバンスト・プロパティ」タブで、autoSubmitオプションにtrueと入力します。

12. 「OK」をクリックしてコンポーネントを作成します。

13. 「プロパティ」ビューで、SelectOneChoiceのidをdayPickerに更新します。

14. ShowDetailFrame内で、dayPickerコンポーネントをOmniPortletの上にドラッグ・アンド・ドロップします。

手順5: 顧客契約の検索機能の追加

次の手順では、ユーザーが既存の顧客契約を検索できるようにするコンポーネントを追加します。

1. ページ・ソースで、Customer ContractsというShowDetailFrameを探し、そのShowDetailFrameの下にあるPanelHorizontalの下にカーソルを置きます。

2. データ・コントロール・パレットで、「ContentRepository」データ・コントロールを開き、「Search」を開きます。

3. SearchメソッドをADFコマンド・ボタンとしてPanelHorizontalの下にドラッグ・アンド・ドロップします。

4. 「構造」ペインで、「Search」メソッドを選択します。

5. アクション・バインディング・エディタで、/contractsをパスとして指定します。

6. isRecursiveをtrueに設定し、「OK」をクリックします。

7. データ・コントロール・パレットで、「Search」の下の「Parameters」を開きます。

8. NamePatternメソッドをラベル付きの入力テキスト・コンポーネントとしてSearchボタンの前にドラッグ・アンド・ドロップします。

9. 「構造」ペインで、追加したばかりの「InputText」コンポーネントを選択し、LabelプロパティにName (use % as wildcard)と設定します。

10. データ・コントロール・パレットの「Search」の下で、ReturnメソッドをADF読取り専用表としてPanelHorizontalの下にドラッグ・アンド・ドロップします。

11. ページを保存します。

手順6: Most Productive Employeesポートレットの定義

次の手順では、複数のOmniPortletsを定義します。次に、この章の最後で、これらのポートレットを1つに連結してインタラクティビティを作成します。

この項では、組織で最も生産性の高い従業員を表示するポートレットを定義します。OmniPortletインスタンスを定義するには、まず、JSPXページを実行してブラウザに表示し、OmniPortletウィザードを使用してポートレットを定義します。

注意 OmniPortletウィザードの使用方法の詳細は、『Oracle WebCenter Framework開発者ガイド』の「OmniPortletを使用したポートレットの作成」を参照してください。

1. SRDashboard.jspxページを実行してブラウザに表示します。

2. 最初のポートレットの「定義」リンクをクリックし、データ・タイプとして「SQL」を選択して、「次へ」をクリックします。

3. 「ソース」タブで、例8-4に示すようなSQL文を入力します。

   例8-4    Most Productive Employeesポートレット用のSQL文

   select count(SH.CREATED_BY) as NB_REQ, SH.CREATED_BY,U.FIRST_NAME, U.LAST_NAME
   FROM SERVICE_HISTORIES SH INNER JOIN USERS U ON U.USER_ID = SH.CREATED_BY WHERE
   SH.SVH_TYPE = 'Technician' OR SH.SVH_TYPE = 'Hidden' GROUP BY SH.CREATED
   BY,U.FIRST_NAME,U.LAST_NAME ORDER BY NB_REQ DESC
   

4. 「次へ」をクリックし、再度「次へ」をクリックします。

5. ビュー・タブで、「表」を選択し、「次へ」をクリックします。

6. 「レイアウト」タブで、次のオプションを更新します。

   タイトル: Most Productive Employees

   レイアウト: Service Request (NB_REQ)

   First Name (FIRST_NAME)

   Last Name (LAST_NAME)

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

手順7: Service Request Volumeポートレットの定義

この項の手順では、サービス・リクエストに関する情報を円グラフで表示する方法を示します。

1. ブラウザで、SRDashboard.jspxページの2つ目のポートレットの「定義」リンクをクリックします。

2. 「タイプ」タブで、「SQL」を選択し、「次へ」をクリックします。

3. 「ソース」タブの「SQL文」フィールドに、次のように入力します。

   例8-5    Service Request Volumeポートレット用のSQL文

   select count(SVR_ID) as NB_REQ, STATUS FROM SERVICE_REQUESTS
   WHERE REQUEST_DATE > (SYSDATE - ##Param1##)
   GROUP BY STATUS ORDER BY NB_REQ
   

4. データベースへのグローバル接続を設定します。

   「接続」で、「接続の編集」をクリックします。

5. 「接続名」フィールドに、SRDemoと入力します。

6. 「ユーザー名」フィールドに、hrと入力します。

7. 「パスワード」フィールドに、hrと入力します。これらは、サンプル・ファイルのダウンロード時にインストールしたSRDemoスキーマ用のユーザー名およびパスワードです。

8. 「接続文字列」フィールドに、データベースへのパス（mydemo.mycompany.com:1522:XEなど）を入力し、「OK」をクリックします。これで、「ソース」タブの「接続」セクションに接続情報が表示されます。

9. Param1というポートレット・パレメータを作成し、デフォルト値を360に設定して、「次へ」をクリックします。

10. 「フィルタ」タブで、「次へ」をクリックします。

11. ビュー・タブで、「チャート」を選択し、「次へ」をクリックします。

12. 「レイアウト」タブで、「円グラフ」を選択し、「幅」には300、「高さ」には200と入力します。

13. 「凡例」を「右揃え」に設定し、「3D効果」チェック・ボックスを選択します。

14. 「グループ」リストから、「なし」を選択します。

15. 「カテゴリ」リストから、「ステータス」を選択します。

16. 「値」リストから、「NB_REQ」を選択し、「終了」をクリックします。

手順8: Most Requested Productsポートレットの定義

この項の手順では、SQL文を使用してデータベースのデータにアクセスし、最もリクエストされた製品を表示するポートレットを定義する方法を示します。

1. ブラウザで、SRDashboard.jspxページの3つ目のポートレットの「定義」リンクをクリックします。

2. 「タイプ」タブで、「SQL」を選択し、「次へ」をクリックします。

3. 「ソース」タブの「SQL文」フィールドに、次のように入力します。

   例8-6    Most Requested Productsポートレット用のSQL文

   select count(SR.SVR_ID) as NB_REQ, SR.PROD_ID, P.NAME FROM
   SERVICE_REQUESTS SR INNER JOIN PRODUCTS P ON SR.PROD_ID = P.PROD_ID
   GROUP BY SR.PROD_ID, P.NAME ORDER BY NB_REQ DESC
   

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

5. 「フィルタ」タブで、「次へ」をクリックします。

6. ビュー・タブで、「チャート」を選択し、「次へ」をクリックします。

7. 「レイアウト」タブで、「棒グラフ」を選択し、次のオプションを設定します。

   幅: 300

   高さ: 250

   グループ: Name

   カテゴリ: <なし>

   値: NB_REQ

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

手順9: Most Active Customersポートレットの定義

この項の手順では、最もアクティブな顧客を表示するポートレットを定義する方法を示します。

ページの「Customer Information」セクションに2つのポートレットを作成するには、次のようにします。

1. ブラウザで、SRDashboard.jspxページの4つ目のポートレットの「定義」リンクをクリックします。

2. 「タイプ」タブで、「SQL」を選択し、「次へ」をクリックします。

3. 「ソース」タブで、次のSQL文を入力し、「次へ」をクリックします。

   例8-7    Most Active Customersポートレット用のSQL文

   select count(SH.CREATED_BY) as NB_REQ, SH.CREATED_BY , U.FIRST_NAME, U.LAST_NAME
   FROM SERVICE_HISTORIES SH INNER JOIN USERS U ON U.USER_ID = SH.CREATED_BY WHERE
   SH.SVH_TYPE = 'Customer' GROUP BY SH.CREATED_BY,U.FIRST_NAME,U.LAST_NAME ORDER BY
   NB_REQ DESC
   

4. 「フィルタ」タブで、変更せずに「次へ」をクリックします。

5. ビュー・タブで、「HTMLレイアウト」を選択してタイトルにMost Active Customersと入力し、「次へ」をクリックします。

6. 「レイアウト」タブで、「ソート可能テンプレート」を選択し、「適用」をクリックします。

7. ヘッダー・セクションのコードはデフォルトのままにしておきます。

8. 「繰返しセクション」で、次のようなコードに更新します。

   <tr class="portlet-section-alternate opRowColorPI1146522302846_##OP_ROWNUM_MOD2##">
   <td class=PortletText1>##NB_REQ##</td>
   <td class=PortletText1>##CREATED_BY##</td>
   <td class=PortletText1>##FIRST_NAME##</td>
   <td class=PortletText1><a href="/SRDemo/faces/app/management/SRDashboard.jspx?
   customerID=##CREATED_BY##" target="_top">##LAST_NAME##</a></td>
   </tr>
   

9. フッター・セクションで、次のようなコードに更新します。

   </tbody>
   </table>
   <font class=PortletText1>Total Rows: ##OP_ROWNUM##</font>
   

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

手順10: Customer Detailsポートレットの定義

この項では、特定の顧客に関する詳細を表示するポートレットを定義します。

1. ブラウザで、SRDashboard.jspxページの5つ目のポートレットの「定義」リンクをクリックします。

2. 「タイプ」タブで、「SQL」を選択し、「次へ」をクリックします。

3. 「ソース」タブで、次のSQL文を入力します。

   例8-8    Customer Detailsポートレット用のSQL文

   select * from USERS where USER_ID = '##Param1##')
   

4. Param1をデフォルト値の320に設定し、「次へ」をクリックします。

5. ビュー・タブで、「HTMLレイアウト」を選択してタイトルにCustomer Detailsと入力し、「次へ」をクリックします。

6. 「レイアウト」タブで、フィールドの値を削除します。

7. 「テンプレート」ドロップダウン・リストから「ソート可能表」を選択し、ヘッダー・セクションに次のコードを入力します。

   <TABLE BORDER='0' WIDTH="100%">
   

8. 「繰返しセクション」のコードを次のコードで置き換えます。

   <TR CLASS='PortletText1'>
   <TD CLASS='PortletHeading1'>ID</TD>
   <TD>##USER_ID##</TD>
   </TR>
   <TR CLASS='PortletText1'>
   <TD CLASS='PortletHeading1'>Email</TD>
   <TD>##EMAIL##</TD>
   </TR>
   <TR CLASS='PortletText1'>
   <TD CLASS='PortletHeading1'>First Name</TD>
   <TD>##FIRST_NAME##</TD>
   </TR>
   <TR CLASS='PortletText1'>
   <TD CLASS='PortletHeading1'>Last Name</TD>
   <TD>##LAST_NAME##</TD>
   </TR>
   <TR CLASS='PortletText1'>
   <TD CLASS='PortletHeading1'>Street</TD>
   <TD>##STREET_ADDRESS##</TD>
   </TR>
   <TR CLASS='PortletText1'>
   <TD CLASS='PortletHeading1'>City</TD>
   <TD>##CITY##</TD>
   </TR>
   <TR CLASS='PortletText1'>
   <TD CLASS='PortletHeading1'>State</TD>
   <TD>##STATE_PROVINCE##</TD>
   </TR>
   

9. フッター・セクションのコードを次のコードで置き換えます。

   </tbody>
   </table>
   <font class=PortletText1>Total Rows: ##OP_ROWNUM##</font>
   

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

手順11: ページ・コンテンツの連結

この項の手順では、作成したばかりのポートレットにインタラクティビティを追加する方法を示します。この項では、1つのページ・パラメータおよび複数のポートレット・パラメータを作成し、ページ上のポートレットを1つに連結します。

1. ページ・パラメータを作成するには、Oracle JDeveloperに戻り、SRDashboardPageDef.xmlファイルを開きます。

2. custIDというページ・パラメータを作成します。

   そのためには、「構造」ペインで「Parameters」を右クリックし、新しいページ・パラメータを挿入して次のように設定します。

   <parameter id ="custID" value="$param.customerID)"/>

3. 作成したSRDashboard.jspxページのソースを開きます。

4. ポートレット・パラメータをCustomer Detailsポートレットに追加します。

5. Param1の値には、bindings.custIDからのページ・パラメータ値を設定します（デフォルト値を320に設定して、少なくとも1人の顧客が表示され、ページをアクティブにしますが、顧客は選択されないようにします）。

   <parameter name="Param1" value="${(bindings.custID == null || bindings.custID == 
   '') ? 320 : bindings.custID }"/>
   

6. Service Request Volumeポートレット用のパラメータを追加して、SelectOneChoiceから値が選択されるとポートレットがリフレッシュされるようにします。

   「構造」ビューで、「parameters」を右クリックします。

7. 「パラメータの中に挿入」を選択し、「parameter」を選択します。

8. Param1の値を360に設定します。デフォルトで1年または360日を使用して、すべての結果を表示します。

9. ページ定義の「executables」→「variables」内の「OmniPortlet3_1_Param1」を選択します。

10. プロパティ・インスペクタの「DefaultValue」フィールドに、次のように入力します。

    ${( app_management_SRDashboard.dayPicker.value == null) ? 360 : 
    app_management_SRDashboard.dayPicker.value}
    

11. 「構造」ペインで、5つ目のポートレット（Most Active Customersポートレット）を選択します。

12. プロパティ・インスペクタで、SubmitUrlParametersプロパティをtrueに設定します。この設定により、ポートレットはURLを介してパラメータをページに送信できるようになります。

13. ページを保存します。

14. SRDashboard.jspxページを実行してブラウザに表示し、追加したばかりのポートレットを確認します。

まとめ

この章の手順では、WebCenterアプリケーション用のダッシュボード・ページを構築する方法を示しました。カスタマイズ可能コンポーネントおよびADF Faces Coreコンポーネントを使用してレイアウトを作成し、ページを作成する方法を学びました。また、関連情報を表示するポートレットを作成し、ページ上で1つに連結してエンド・ユーザーが単一のエントリ・ポイントで顧客に関する情報を簡単に表示できるようにする方法も学びました。