概要
Yellowfinは、ヘッダーおよびフッターパネルを削除または置き換えることで、既存または新しいアプリケーションとの統合が可能です。また、この操作によって独自のナビゲーションをカスタマイズしたパネル内に組み込むことができます。
ログインページと同様に、標準のYellowfinヘッダーおよびフッターのカスタマイズは次の2つの方法で実行できます:
- シンプル- イメージの置き換えおよびヘッダーおよびフッターに使用されているCSSファイルの変更を伴います。パネルを記述する必要はありません。一般的に、このオプションは簡易的なモックアップに使用され、スタイルが変更された最終版としては使用されません。
- 全面的- カスタムファイルを記述してヘッダーおよびフッターパネルを置き換える作業を伴います。この方法は高度な技術的知識および時間を必要とします。
ヘッダー
Yellowfinヘッダーはシステム内の各ページの上部に位置します:
フッター
フッターはページの下部に位置し、ダッシュボードの位置が中央揃えに設定されている場合はダッシュボードの中央で位置揃えされます。
シンプル
一時的なカスタムヘッダーおよびカスタムフッターを簡易的に作成する場合、Yellowfinの「ROOT」ディレクトリ(Yellowfin\appserver\webapps\ROOT\images)で以下のイメージをカスタマイズしたバージョンと置き換えます:
- header_logo.gif
- logoFooter.png
これらのイメージを置き換えたら、新しいイメージが表示されるようにブラウザーのキャッシュをクリアする必要があります。
注意: 置き換えとして使用するイメージは、上記のファイルと同じ名前にしてページで使用されるようにする必要があります。
例
コンポーネント |
標準 |
カスタム |
---|---|---|
ヘッダー全体 |
|
|
フッター全体 |
|
|
header_logo.gif |
|
|
logoFooter.png |
|
|
全面的
作成方法
含まれるHTMLは、完全なHTMLドキュメント自身ではなく、別のHTMLページにインラインで含めるための構成要素である必要があります。つまり、<HTML>、<HEAD>、または<BODY>タグを含めることはできません。このHTML内のすべてのリンクは、すべてYellowfinページに対して相対的となります。絶対的なHTMLリンクを使用することをお勧めします。
標準のYellowfinヘッダーには、ユーザーがシステムからログアウトするための1つのリンクのみが提供されていることに留意することも重要です。置き換えたヘッダーでこのリンクを提供する場合は、次を含めます:
javascript:on_submit('logoff');
Yellowfinの「examples」ディレクトリ(Yellowfin\development\examples\CustomHeaderExample.jsp)には、サンプルのヘッダーファイルが含まれており、これを使用してカスタムヘッダーの作成を開始できます。
- カスタムのヘッダーおよびフッターファイルをYellowfinの「ROOT」ディレクトリ(Yellowfin\appserver\webapps\ROOT)に保存します。
- 必要なすべてのイメージをYellowfinの「images」ディレクトリ(Yellowfin\appserver\webapps\ROOT\images)に保存します。
- 使用するすべてのCSSファイルを更新するか、新しいCSSファイルをYellowfinの「css」ディレクトリ(Yellowfin\appserver\webapps\ROOT\css)に追加します。
- Yellowfinで、「管理」>「設定」>「インテグレーション」(タブ)に移動します。
ここで、カスタムファイルの場所を指定します。たとえば、次のように指定します:
## 「ページヘッダー」オプションを、「標準ヘッダー」から「カスタムヘッダー」に変更して、ヘッダーファイルのURLを指定します。- 「ページフッター」オプションを、「標準フッター」から「カスタムフッター」に変更して、フッターファイルのURLを指定します。
カスタムURLは、毎回ページが読み込まれるときの実行時に含まれるHTML構成要素へのリンクです。この構成要素は、Yellowfinサービスがアクセス可能な任意のサーバーに配置できますが、最高のパフォーマンスを得るために、同一のサーバー上に配置することをお勧めします。この例では、構成要素ファイルをYellowfinの「ROOT」ディレクトリ(Yellowfin\appserver\webapps\ROOT\header.jsp)に配置し、header.jspを介して見つかるようにしています。
注意: 既存のYellowfinディレクトリを使用せずに、Yellowfin\appserver\webapps\ROOT内に新しいフォルダーを作成してカスタムファイルを格納し、これらのファイルを簡単に特定できるようにすることも可能です。
例
コンポーネント |
標準 |
カスタム |
---|---|---|
ページ全体 |
|
|