70 Contributorインタフェースのダッシュボードのカスタマイズ

Oracle WebCenter Sites: Contributorインタフェースのダッシュボードをカスタマイズするには、ダッシュボードの構成に精通している必要があります。また、サンプル・コードを使用してダッシュボードのカスタマイズを試してみることもできます。

Contributorインタフェースのダッシュボードのカスタマイズの詳細は、次の項を参照してください。

70.1 ダッシュボードのカスタマイズについて

Contributorインタフェースにログインすると、ダッシュボードが表示されます。デフォルトでは、図70-1に示すような使用準備済のウィジェット(「ブックマーク」、「SmartLists」、「チェックアウト」および「割当て」)がダッシュボードに開きます。

図70-1 デフォルトのウィジェットが表示されたダッシュボード

「図70-1 デフォルトのウィジェットが表示されたダッシュボード」の説明

ダッシュボードおよびそのウィジェットの次の部分をカスタマイズできます。

列の数
列幅
表示名、高さおよびダッシュボード位置
ウィジェットの数

70.2 ダッシュボードのカスタマイズ

システム定義のダッシュボードは、コントローラ・エレメントUI/Layout/CenterPane/DashboardContentsConfigによって生成されます。このエレメントをオーバーライドできます。

ダッシュボード構成は、グローバルまたはサイト固有にすることができます。デフォルトのウィジェットのカスタマイズ、新しいウィジェットの追加、および必要でないウィジェットの削除が行えます。

ダッシュボードをカスタマイズするには、CustomElementsの下に独自のDashBoardContentsConfig.jspを作成し、そのプロパティをカスタマイズすることによって、エレメントUI/Layout/CenterPane/DashBoardContentsConfigをオーバーライドします。

注意:

新しいウィジェットが追加されるか、既存のウィジェットが更新される場合、変更が行われるようにWEM UIのユーザー・プリファレンスを消去する必要があります。

次に、UI/Layout/CenterPane/DashBoardContentsConfigエレメントを示します。表70-1のプロパティの説明が続きます。

エレメントUI/Layout/CenterPane/DashboardContentsConfig

<dashboardconfig>
   <dashboardlayout>
      <numberofcolumns></numberofcolumns>
      <columnwidths></columnwidths>
   </dashboardlayout>
   <components>
      <component id="widgetId"> 
         <name>widgetName</name>
         <url>widgetURL</url>
         <height>height_in_px</height>
         <dragRestriction>true | false </dragRestriction>
         <column>number_of_column_in_which_to_display_widget</column>
     </component>
         …
         … 
         …
   </components>
</dashboardconfig>

表70-1 UI/Layout/CenterPane/DashBoardContentsConfig.jspのプロパティ

プロパティ	説明	値
`<numberofcolumns>`	ダッシュボード表示の列数。	0より大きい整数。システム・デフォルトは`2`です。
`<columnwidths>`	列のカンマ区切りの幅。	たとえば、`<numberofcolumns>`に`3`列ある場合、`<columnwidths>`を`30、30、40`にすることができます。
`<components>`	このセクションを使用して、ダッシュボード・ウィジェットを定義します。	該当なし
`<component>`	単一ウィジェットの定義に使用します。	該当なし
`<id>`	ウィジェットのID。	ウィジェット間で一意な英数字値。特殊文字は使用できません。
`<name>`	ウィジェットの表示名。	任意の文字列。
`<url>`	コントローラURL。	`UI/Layout/CenterPane/DashBoard/<Your_Element>`/ディレクトリにあるウィジェットのファイルの場所。
`<height>`	ウィジェットの高さ。	高さ(ピクセル単位)。たとえば、`300px`です。
`<dragRestriction>`	ウィジェットのドラッグを制限します。	`true \| false`
`<column>`	ウィジェットが表示される列。	`1`から`n`。ここで、nは`<numberofcolumns>`で指定された値です。

70.3 ダッシュボードのカスタマイズの例

Contributorダッシュボードに新しいウィジェットを追加できます。新しいウィジェットを追加するには、次の手順を実行します。

ウィジェット・エレメントを作成します。
カスタムDashBoardContentsConfig.jspエレメントに新しいウィジェットを登録します。

この項では、ダッシュボードにウィジェットを追加するプロセスについて説明します。

70.3.1 Hello World'ウィジェットの追加

次の手順では、図70-2に示す、単純なウィジェットを作成および登録する方法を示します。

図70-2 Hello Worldウィジェット

「図70-2 Hello Worldウィジェット」の説明

ダッシュボードにウィジェットを追加するには、次のようにウィジェットを作成します。

CustomElementsの下にJSPエレメントを作成します。この例では、エレメントにHelloWorldHtmlという名前を付けます。
ウィジェット・コードについては、このガイドで提供されているサンプル・ファイルに移動して、その内容をコピーできます。

ウィジェットを登録(ダッシュボードに追加)するには:

カスタムDashBoardContentsConfig.jspを開き、<components>セクションを見つけて、新しく作成されたウィジェットの仕様を追加します。次に例を示します。

<component id="helloworld">
  <name>Hello World</name>
  <url>Path_to_your_widget_under_CustomElements</url>
  <height>300px</height>
  <closable>false</closable>
  <open>true</open>
  <dragRestriction>true</dragRestriction>
  <style>checkoutPortlet</style>
  <column>2</column>
</component>

<applicationServer_install_directory>/webapps/<cs_context>/WEB-INF/classes/ReqAuthConfig.xmlファイルに移動して、excludedControllerElementsリストの下にあるサンプル・エレメントへのパスを追加します。この例では、パスは次のとおりです。
```
<property name="excludedControllerElements">
   <list>
       <value>UI/Layout/CenterPane/DashBoard/HelloWorld</value>
   </list>
</property>
```
Contributorインタフェースのホームページをリフレッシュします。新しいウィジェットがダッシュボードに表示されます(図70-2)。

70.3.2 最近変更されたアセットを表示するウィジェットの追加

この項では、前の週に変更されたアセットを表示するウィジェットを作成します。この項の手順を完了したら、ダッシュボードに図70-3のようなウィジェットが表示されます。

図70-3 「最近変更されたアセット」ウィジェット

「図70-3 「最近変更されたアセット」ウィジェット」の説明

ダッシュボードにウィジェットを追加するには、次のようにウィジェットを作成します。

CustomElementsの下にAction JSPエレメントを作成します。この例では、エレメントにRecentlyModifiedAssetsAction.jspという名前を付けます。ウィジェット・コードについては、このガイドで提供されるサンプル・ファイルに移動して、その内容をコピーできます。
前の手順で作成したアクション・エレメントのJson JSPエレメントを作成します。この例では、エレメントにRecentlyModifiedAssetsJson.jspという名前を付けます。コードについては、このガイドで提供されるサンプル・ファイルに移動して、その内容をコピーできます。このエレメントをRecentlyModifiedAssetsAction.jspエレメントと同じ場所にエレメントを置きます。
ウィジェットのCustomElementsの下にプレゼンテーション・エレメントを作成します。ウィジェット・エレメントと同じ名前を付けます。この例では、表示エレメントにRecentlyModifiedAssetsHtml.jspという名前を付けます。コードについては、このガイドで提供されるサンプル・ファイルに移動して、その内容をコピーできます。

注意:
プレゼンテーション・エレメントはRecentlyModifiedAssetsAction.jspエレメントをコールします。そのエレメントへのパスを入力します。

ウィジェットを登録(ダッシュボードに追加)するには:

カスタムDashBoardContentsConfig.jspを開き、<components>セクションを見つけて、新しく作成されたウィジェットの仕様を追加します。次に例を示します。

<component id="myrecent">
<!-- a unique identifier for the component. This must be unique among all the components. It can be alpha numeric but no special characters allowed --> 
      <name>Recently Modified Assets</name>
      <url>Path_to_your_custom_widget's presentation_element</url>
      <height>300px</height>
      <closable>false</closable>
      <open>true</open>
      <dragRestriction>false</dragRestriction>
      <style>checkoutPortlet</style>
      <column>2</column>
</component>

<applicationServer_install_directory>/webapps/<cs_context>/WEB-INF/classes/ReqAuthConfig.xmlファイルに移動して、excludedControllerElementsリストの下にあるサンプル・エレメントへのパスを追加します。この例では、パスは次のとおりです。
```
<property name="excludedControllerElements">
   <list>
      <value>UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssets</value>
   </list>
</property> 
```
ダッシュボードをリフレッシュして、新しく構成されたウィジェットを表示します。図70-3に示す例を参照してください。