8 Developing the Dashboard Page

Update and add new regions to the Dashboard page with Page Designer.

About This Lesson

In this lesson, you modify the regions of an existing page without the aid of a wizard.

You develop the Dashboard page generated by the Create App Wizard by deleting all but one of the existing chart regions. You update the series, attributes, and Template Options of the remaining chart region to improve usability and appearance.

You add a new report region from scratch using the Gallery instead of a wizard. Reconfigure the report's SQL query and Template Options.

Starting from here:

8 - Dashboard

If you have not completed the previous lessons, you can use the appendix "Importing an Application into a Workspace" to import the above SQL script into your workspace and continue working from this lesson forward. You can find this script in the /files subdirectory of where you unzipped the .zip file accompanying this tutorial.

8.1 Deleting Regions in Page Designer

You created multiple charts for the Dashboard in the Create App Wizard. Review the output in the runtime.

To view the runtime:

1. On the Application home page, click 2 - Dashboard.
2. Click Save and Run Page.

Note the four charts on the page. You decide that the bar chart is the best way to present Costs info rather than a line or pie chart (Chart 3 and Chart 4). You also decide to replace one chart (Project Status) with a report later.

Description of the illustration runtime_dashboard_charts.png

Start by deleting the charts you no longer want, then update the remaining chart with another series to display more budget information.

To delete multiple regions in Page Designer:

3. Click Edit Page 2 on the Runtime Developer toolbar.
4. In Page Designer, hold Ctrl and click the three following items to select them:

   • Project Status

   • Chart 3

   • Chart 4

   
   

   
   Description of the illustration page_designer_dashboard_charts_selected.png

   
   
5. With the three chart regions selected, do one of the following:

   • Press Delete.

   • Right-click one of the selected chart regions and select Delete.

   Only Project Costs remains in Content Body.

6. Click Save and Run Page.

8.2 Updating the Series in the Project Costs Chart

The Project Costs chart only displays costs. This chart would be more meaningful if it also displayed project budgets for comparison.

First, update the SQL for the existing series in the chart to change the display order of the columns (among other updates), then create a new series in the chart to display project budgets.

To update the first series:

1. Click Edit Page 2 on the Runtime Developer toolbar.
2. Click Project Costs.
3. In Property Editor:
   1. Identification: Title - enter Project Budgets and Costs
4. In the Rendering tab, under Series, click Series 1.
5. In Property Editor:
   1. Identification: Name - enter Costs
   2. Source: SQL Query - click the Code Editor icon ().
   3. Copy and paste the following code:

      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. Click OK.

      An error message displays under Column Mapping: Value.

      Note:

      The above SQL is a significant update to the old code. This revised SQL joins the SAMPLE$PROJECT_TASKS and SAMPLE$PROJECTS tables so the chart displays the project name instead of the project ID. This requires including the where condition to link the primary key column from Projects (p.id) with the foreign key column from Tasks (t.project_id). Finally, the group by clause was updated because the specified column (PROJECT_ID) no longer displays (changed to p.name).
   5. Column Mapping: Label - select VALUE

To add a series to a chart:

6. In the Rendering tab, right-click Series and select Create Series.
7. In Property Editor:
   1. Identification: Name - enter Budgets
   2. Source: Table Name - click the LOV icon.
   3. Select SAMPLE$PROJECTS.
   4. Column Mapping: Label - select NAME
   5. Column Mapping: Value - select BUDGET
8. Click Save and Run Page. Review the changes to the labels along the X-axis and the new columns for each project. You can also mouse over each column for more details.
   
   

   
   Description of the illustration runtime_dashboard_chart_budget_series.png

   
   

8.3 Updating the Appearance of the Dashboard Chart

While the chart is more usable now, it still needs some aesthetic improvements:

• The labels are too constrained by the space.

• The chart lacks a legend to indicate which column represents which value (cost or budget).

• The chart does not fit vertically in the region (note the scroll bar).

• The cost and budget values lack a dollar sign.

These changes are in the region attributes and axis properties for the chart.

To change the attributes of a region:

1. Click Edit Page 2 on the Runtime Developer toolbar.
2. In the Rendering tab, under Project Budgets and Costs, click Attributes.
3. In Property Editor:
   1. Layout: Height - enter 600
   2. Legend: Show - click Yes
   3. Legend: Position - select Top
   4. Legend: Hide and Show Behavior - select No Rescaling

To change the properties of an axis:

4. In the Rendering tab, under Axes, click y.
5. In Property Editor:
   1. Value: Format - select Currency
   2. Value: Currency - enter $
6. Click Save and Run Page.

8.4 Updating the Live Template Options for the Dashboard Chart

If you scroll down the chart region in the runtime, you can see your changes. (You may need to maximize your window to view all the labels properly.) The individual elements look good, but obviously you must alter the way the region displays on the page.

The final changes you need to make are in the Live Template Options, which you access using Quick Edit on the Runtime Developer toolbar.

To open Live Template Options:

1. Click Quick Edit on the Runtime Developer toolbar.

   You enter Quick Edit mode (screen darkens, mouse cursor becomes a crosshair).

2. Mouse over the Project Budgets and Costs chart region so that a wrench icon displays (top-right).
   
   

   
   Description of the illustration runtime_dashboard_quick_edit.png

   
   
3. Click the wrench icon.

   The Live Template Options dialog displays.

   
   

   
   Description of the illustration runtime_dashboard_live_template_options.png

   
   
4. In Live Template Options:
   1. Body Height - select Auto - Default
   2. Click Save.

The dashboard chart is complete.

Next, add a report region to replace the Project Status chart you deleted.

8.5 Adding a Classic Report Region from Gallery

Add a report to the page to display incomplete tasks.

Located beneath the central Layout tab, the Gallery is a quick way to peruse your options for a variety of elements.

To add a classic report region from the Gallery:

1. Click Edit Page 2 on the Runtime Developer toolbar to return to Page Designer.
2. In the Gallery, right-click Classic Report, select Add To, select Content Body, select Project Budgets and Costs, and select After.

   Tip:

   You can also add elements from the Gallery with the mouse using drag and drop.

   
   

   
   Description of the illustration page_designer_dashboard_add_classic_report.png

   
   

   
   

   
   Description of the illustration page_designer_dashboard_new_report.png

   
   
3. In Property Editor:
   1. Identification: Title - enter Incomplete Tasks
   2. Source: Type - select SQL Query
   3. Source: SQL Query - copy and paste the following code:

      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. Click Save and Run Page. Scroll down to view the report in the runtime.
   
   

   
   Description of the illustration runtime_dashboard_report_initial.png

   
   

The report displays an the appropriate amount of information and columns, but it has some residual layout problems. You can change this value in Live Template Options.

To open Live Template Options in the runtime:

5. On the Runtime Developer toolbar, click Quick Edit.
6. Mouse over the Incomplete Tasks region and click the wrench icon (top-right).
7. In Live Template Options:
   1. General - check Remove Body Padding
   2. Click the Attributes tab (top).
   3. General - check Stretch Report
   4. Click Save.

The report is finished. Your application is complete. Congratulations!