1. チュートリアル: アプリケーションの構築
  2. ダッシュボード・ページの開発

8 ダッシュボード・ページの開発

ページ・デザイナを使用して、ダッシュボード・ページに新しいリージョンを更新して追加します。

このレッスンについて

このレッスンでは、ウィザードを利用せずに、既存のページのリージョンを変更します。

既存の1つのチャート・リージョン以外をすべて削除して、アプリケーションの作成ウィザードで生成されたダッシュボード・ページを開発します。残したチャート領域の「シリーズ」、「属性」および「テンプレート・オプション」を更新して、使いやすさと外観を向上させます。

新規レポート・リージョンは、ウィザードではなく「ギャラリ」を使用して最初から作成して追加します。レポートのSQL問合せおよびテンプレート・オプションを再構成します。

ここから開始:

8 - ダッシュボード

前のレッスンを完了していない場合、付録「作業領域へのアプリケーションのインストール」を使用して上述のSQLスクリプトを作業領域にインポートし、このレッスンから先に学習を続けられます。このスクリプトは、このチュートリアル付属の.zipファイルを解凍した場所の/filesサブディレクトリにあります。

8.1 ページ・デザイナでのリージョンの削除

アプリケーションの作成ウィザードで、複数のチャートをダッシュボードに作成しました。ランタイムの出力を確認します。

ランタイムを表示するには、次のステップを実行します。

  1. アプリケーションのホーム・ページで、「2 - ダッシュボード」をクリックします。
  2. 「ページの保存と実行」をクリックします。

ページにある4つのチャートに注目してください。折れ線グラフや円グラフ(チャート3およびチャート4)ではなく棒グラフが、コスト情報を表示する最適な方法であると決定します。1つのチャート(Project Status)を後でレポートで置き換えることも決定します。


runtime_dashboard_charts.pngの説明が続きます
図runtime_dashboard_charts.pngの説明

まず、不要になったグラフを削除し、残したグラフを別のシリーズで更新して、予算情報をさらに表示します。

ページ・デザイナで複数のリージョンを削除するには、次のステップを実行します。

  1. 実行時開発者ツールバーで「ページ2の編集」をクリックします。
  2. ページ・デザイナで、[Ctrl]キーを押しながら次の3つのアイテムをクリックして選択します。

    • プロジェクト・ステータス

    • チャート3

    • チャート4


    page_designer_dashboard_charts_selected.pngの説明が続きます
    図page_designer_dashboard_charts_selected.pngの説明

  3. 3つのチャートのリージョンを選択した状態で、次のいずれかの操作を行います。

    • 「削除」を押します。

    • 選択したチャート・リージョンのいずれかを右クリックし、「削除」を選択します。

    「Project Costs」のみがコンテンツ本体に残ります。

  4. 「ページの保存と実行」をクリックします。

8.2 「Project Costs」チャートのシリーズの更新

「Project Costs」チャートには、原価のみが表示されています。比較のためのプロジェクト予算もこのチャートに表示されれば、わかりやすくなります。

まず、(他の更新とともに)チャートの既存シリーズのSQLを更新して列の表示順序を変更し、新しいシリーズをチャートに作成してプロジェクト予算を表示します。

最初のシリーズを更新する手順は、次のとおりです。

  1. 実行時開発者ツールバーで「ページ2の編集」をクリックします。
  2. 「Project Costs」をクリックします。
  3. プロパティ・エディタで、次のように操作します。
    1. 「識別: タイトル」- 「Project Budgets and Costs」と入力します
  4. 「レンダリング」タブの「シリーズ」の下にある「シリーズ1」をクリックします。
  5. プロパティ・エディタで、次のように操作します。
    1. 識別: 名前 - 「Costs」と入力します
    2. ソース: SQL問合せ - 「コード・エディタ」アイコン(SQL問合せ)をクリックします。
    3. 次のコードをコピーして貼り付けます。
      select p.name, sum(cost) value
from sample$project_tasks t
, sample$projects p
where p.id = t.project_id
group by p.name
order by 1
    4. 「OK」をクリックします。

      「列のマッピング: 値」にエラー・メッセージが表示されます。

      注意:

      前述のSQLは、古いコードに対する大幅な更新です。この改訂されたSQLでは、SAMPLE$PROJECT_TASKS表とSAMPLE$PROJECTS表が結合されて、プロジェクトIDではなくプロジェクト名がグラフに表示されます。これには、Projects (p.id)の主キー列とTasks (t.project_id)の外部キー列をリンクするためのwhere条件を含める必要があります。最後に、指定された列(PROJECT_ID)が表示されなくなった(p.nameに変更された)ため、group by句が更新されました。
    5. 列のマッピング: ラベル - 「VALUE」を選択します

シリーズをグラフに追加するには、次のステップを実行します。

  1. 「レンダリング」タブで、「シリーズ」を右クリックして、シリーズの作成を選択します。
  2. プロパティ・エディタで、次のように操作します。
    1. 識別: 名前 - 「Budgets」と入力します
    2. ソース: 表名 - 「LOV」アイコンをクリックします。
    3. 「SAMPLE$PROJECTS」を選択します。
    4. 列のマッピング: ラベル - 「NAME」を選択します
    5. 列のマッピング: 値 - 「BUDGET」を選択します
  3. 「ページの保存と実行」をクリックします。X軸のラベルの変更および各プロジェクトの新しい列を確認します。また、各列の上にマウス・カーソルを合せると詳細が表示されます。

8.3 ダッシュボード・チャートの外観の更新

このグラフは使いやすくなりましたが、まだ外観をよくする必要があります。

  • ラベルのスペースに制約がありすぎます。

  • どの列がどの値(コストまたは予算)を表すかを示す凡例がグラフにありません。

  • リージョンの縦方向にグラフがうまく収まっていません(スクロール・バーに注目してください)。

  • コストおよび予算の値にドル記号がありません。

これらの変更は、チャートのリージョン属性および軸プロパティで行います。

リージョンの属性を変更するには、次のステップを実行します。

  1. 実行時開発者ツールバーで「ページ2の編集」をクリックします。
  2. 「レンダリング」タブの「Project Budgets and Costs」で、「属性」をクリックします。
  3. プロパティ・エディタで、次のように操作します。
    1. レイアウト: 高さ - 「600」と入力します
    2. 凡例: 表示 - 「はい」をクリックします
    3. 凡例: 位置 - 「トップ」を選択します
    4. 凡例: 表示および非表示の動作 - 「サイズ変更なし」を選択します

軸のプロパティを変更するには、次のステップを実行します。

  1. 「レンダリング」タブの「軸」で「はい」をクリックします。
  2. プロパティ・エディタで、次のように操作します。
    1. 値: 書式 - 「通貨」を選択します
    2. 値: 通貨 - 「$」を入力します
  3. 「ページの保存と実行」をクリックします。

8.4 ダッシュボード・チャートのライブ・テンプレート・オプションの更新

ランタイムのチャート・リージョンをスクロール・ダウンすると、変更内容が表示されます。(すべてのラベルが適切に表示されるように、ウィンドウを最大化する必要がある場合があります。)個々の要素の表示は適切ですが、リージョンをページに表示する方法を変更する必要があります。

最後の変更は、実行時開発者ツールバーの「クイック編集」からアクセスする「ライブ・テンプレート・オプション」で行う必要があります。

「ライブ・テンプレート・オプション」を開くには、次のステップを実行します。

  1. 実行時開発者ツールバーで「クイック編集」をクリックします。

    クイック編集モードになります(画面が暗くなり、マウス・カーソルが十字になります)。

  2. 「Project Budgets and Costs」チャート・リージョンにマウス・カーソルを合せると、レンチ・アイコン(右上)が表示されます。
  3. レンチのアイコンをクリックします。

    「ライブ・テンプレート・オプション」ダイアログが表示されます。


    runtime_dashboard_live_template_options.pngの説明が続きます
    図runtime_dashboard_live_template_options.pngの説明

  4. 「ライブ・テンプレート・オプション」で次のように操作します。
    1. ボディの高さ - 自動 - デフォルトを選択します
    2. 「保存」をクリックします。

ダッシュボード・チャートが完成しました。

次に、レポート・リージョンを追加して、削除した「Project Status」チャートを置き換えます。

8.5 ギャラリからのクラシック・レポート・リージョンの追加

未完了のタスクを表示するためのレポートをページに追加します。

中央の「レイアウト」タブの下にある「ギャラリ」を使用すると、様々な要素に対して簡単にオプションを適用できます。

ギャラリからクラシック・レポート・リージョンを追加するには、次のステップを実行します。

  1. 実行時開発者ツールバーの「ページ2の編集」をクリックしてページ・デザイナに戻ります。
  2. ギャラリで、「クラシック・レポート」を右クリックして、「追加先」、「コンテンツ本体」、「Project Budgets and Costs」、「後」の順に選択します。

    ヒント:

    ドラッグ・アンド・ドロップを使用して、ギャラリから要素をマウスで追加することもできます。

    page_designer_dashboard_add_classic_report.pngの説明が続きます
    図page_designer_dashboard_add_classic_report.pngの説明


    page_designer_dashboard_new_report.pngの説明が続きます
    図page_designer_dashboard_new_report.pngの説明

  3. プロパティ・エディタで、次のように操作します。
    1. 識別: タイトル - 「Incomplete Tasks」と入力します
    2. ソース: タイプ - 「SQL問合せ」を選択します
    3. ソース: SQL問合せ - 次のコードをコピーして貼り付けます。
      select p.name project
, m.name milestone
, m.due_date
, t.name task
, t.start_date
, t.end_date
from sample$projects p
, sample$project_milestones m
, sample$project_tasks t
where p.id = m.project_id
and p.id = t.project_id
and t.milestone_id = m.id (+)
and nvl(t.is_complete_yn, 'N') = 'N'
  4. 「ページの保存と実行」をクリックします。下にスクロールして、ランタイムでレポートを表示します。

レポートには、適切な量の情報と列が表示されていますが、レイアウトにいくらか問題が残っています。この値は、「ライブ・テンプレート・オプション」で変更できます。

ランタイムに「ライブ・テンプレート・オプション」を開くには、次のステップを実行します。

  1. ランタイム開発者ツールバーで、「クイック編集」をクリックします。
  2. 「Incomplete Tasks」リージョンにマウス・カーソルをあわせて、レンチ・アイコン(右上)をクリックします。
  3. 「ライブ・テンプレート・オプション」で次のように操作します。
    1. 一般 - ボディ・パディングの削除チェック・ボックスを選択します
    2. 「属性」タブ(上部)をクリックします。
    3. 一般 - レポートの拡大チェック・ボックスを選択します
    4. 「保存」をクリックします。

レポートは終了しました。アプリケーションが完成しました。お疲れ様でした。