5 Developing the Home Page

At the end of the previous lesson, you ran the application from Page Designer. Doing so opened the Calendar page of the application runtime in a window in your web browser.

Note that when you run a desktop application from App Builder, the Runtime Developer toolbar displays at the bottom of any editable running page:

Description of the illustration GUID-F94050CA-633D-4A5D-B310-0DA71943DBAB-default.png

You can use the Developer toolbar to quickly edit the current application or currently running page. The Developer Toolbar only appears for you and other users with developer-level privileges.

To begin developing the Home page, you could go back to Page Designer and find the Home page in App Builder—or, you can take a shortcut with the Developer Toolbar in the runtime.

To navigate back to the Home page in Page Designer with the Developer Toolbar:

1. In the top-left of the application runtime, do one of the following:
   • Click the name of the app Demo Projects.
   • Click the Home link in the sidebar. (Do not click Home on the Developer Toolbar.)
   The Home page appears, which is blank.
2. On the Developer Toolbar, click Edit Page 1.

   Note:

   The number in the Edit Page # button corresponds to its assigned page number in Page Designer.
   Your browser switches back to the Page Designer window automatically.

To add a chart to a page:

1. In Page Designer, click the Regions tab in the Gallery.
2. Locate the Chart element.
3. Right-click Chart, select Add To, and select Content Body.

   Tip:

   You can also drag and drop content from the Gallery into the Layout. When you drag the region up and hover over the small yellow section below Content Body, the yellow section expands. A darker yellow section with a black box around it indicates where the region appears.

   Tip:

   
   
   

   Undo a previous action by clicking the Undo button.

To change the name of a chart region:

1. In the Rendering tree under Content Body, click the New chart to select it.
2. In the Property Editor, locate the Identification group.

   Tip:

   Attributes are organized into functional groups. To expand or collapse these groups, click the Show Common, Show All, Collapse All, and Expand All icons.

   To search for an attribute, enter a keyword search in the Filter Properties field. The groups and attributes containing the term appear.

3. For Title, enter Project Tasks and press Enter.

   The name of the region updates in the Rendering tab and Layout.

   Also note that a marker (blue triangle) appears near the group name after you changed it. These markers appear next to fields with unsaved changes. You still have additional changes to make to the region, so complete those before saving.

   Note:

   Fields in the Property Editor also update automatically if you click somewhere else within Page Designer.

Next, resize the chart by editing the appearance template in the Property Editor.

To change the Template Options of a region:

4. In the Property Editor, locate Appearance - Template Options.
   
   
   Description of the illustration GUID-A467D99E-6BEA-49F7-B010-8922966FC5E1-default.png
   

   Tip:

   
   
   

   Click the Go to Group icon to view all the groups currently listed in the Property Editor. Select the name of a group in the list to jump to it in the Property Editor.

   You can also use the search filter at the top of the Property Editor to narrow the displayed fields, or Ctrl + F or Cmd + F to use your browser’s search function to find items in Page Designer.

5. Click the Template Options button (Use Template Defaults, Scroll - Default).
   
   
   Description of the illustration GUID-87D6D68B-D04D-4132-A892-9BBCAF2577EE-default.png
   
   The Template Options dialog appears.
6. For Common - Body Height, select 480px and click OK.
   The Template Options button updates to Use Template Defaults, 480px, Scroll - Default to reflect its current configuration.

Next, configure the chart by selecting its Attributes item in the Rendering tab and editing it in the Property Editor.

So far, you have configured the properties of a region in the Property Editor. These properties control how the region displays on the page in relation to the rest of the regions on the page.

Next, you modify the Attributes of a region by selecting its Attributes folder in the Rendering tree. Attributes are specific to the region type (in this case, a chart region) and control the internal characteristics of the region. For example, you choose the chart type (bar chart), the orientation (vertical), and the axis labels in the Attributes.

To edit the chart’s region attributes:

7. In the Rendering tab, select the Attributes folder.
   
   Description of the illustration GUID-8679450C-7A0F-4DB8-834D-BF2222EDEDF5-default.png
8. In the Property Editor:

   • Appearance: Orientation - select Horizontal

   • Appearance: Stack - select Yes

   • Layout: Height - enter 480

   Note:

   Attributes within the Property Editor are organized into groups. The Property Editor bulleted lists specify Group: Attribute - Action to make it easier to locate the given attribute.

Finally, you must define the SQL query of the chart to pull in data from the DEMO_PROJECTS table in the database.

The SQL query is the dynamic part of the chart. As your users update their progress in the app, the chart reflects those changes and updates each time that a user refreshes the page.

You define two queries for this chart. Both query the IS_COMPLETE_YN column of the DEMO_TASKS table, but the first displays items marked Y (for yes) while the second displays items marked N (for no). Your users populate the IS_COMPLETE_YN column when they indicate whether a task is complete in the app.

Tip:

Data series are contained in the Series folder in the Rendering pane. Currently, the New series appears with a red X next to it.

Description of the illustration GUID-099ABFE2-FAD0-47BD-BEB8-8BD1707CA3A1-default.png

This is an error message to indicate that a required element is defined improperly (in this case, because you have not entered the query yet). Also note that the Messages tab of the central pane indicates that three system messages now appear. You can click the Messages tab to view the specific errors and where they appear in Page Designer. In this case, all the messages indicate that a required element for the chart’s data series is missing.

To define the "Yes" SQL query for the Series item in the Rendering pane:

1. In the Rendering tab, under Series, click New.
2. In the Property Editor:
   1. Identification: Name - enter Completed Tasks
   2. Locate the Source: SQL Query field. Copy and paste the following code:

      select p.created
      , p.id
      , p.name
      , count(t.id) tasks
      from demo_projects p
      , demo_tasks t
      where p.id = t.project_id
      and nvl(t.is_complete_yn,'N') = 'Y'
      group by p.created, p.id, p.name
      order by p.created
      

   3. Column Mapping: Label - select NAME
   4. Column Mapping: Value - select TASKS

Next, add a second series to apply the second query. Because the queries are so similar, you can duplicate this series and make some minor tweaks instead of defining from scratch.

To duplicate the SQL query and reconfigure it:

3. In the Rendering tree, right-click the Completed Tasks series.
4. Select Duplicate.
   The series "Completed Tasks_1" appears under the Series folder and is selected.
5. In the Property Editor:
   1. Identification: Name - enter Incomplete Tasks
   2. Locate the Source: SQL Query field. Copy the following code and paste it to replace the current contents:

      select p.created
      , p.id
      , p.name
      , count(t.id) tasks
      from demo_projects p
      , demo_tasks t
      where p.id = t.project_id
      and nvl(t.is_complete_yn,'N') = 'N'
      group by p.created, p.id, p.name
      order by p.created
      

   Note:

   The two series ("Completed Tasks" and "Incomplete Tasks") are defined by counting the DEMO_TASKS for each project record and using an appropriate WHERE condition.

Finally, update the axes with appropriate labels.

6. In the Rendering tree, nested under the Axes folder, click the x axis.
7. For Identification: Title, enter Projects.
8. Click the y axis.
9. For Identification: Title, enter Tasks.
10. Click Save on the Page Designer toolbar.

To add a classic report region:

1. In the Rendering tree, right-click Content Body and select Create Region.
   A new region appears.
2. In the Property Editor, edit the region properties:

   1. Identification: Title - enter My Outstanding Tasks

   2. Identification: Type - select Classic Report

   3. SQL Query - copy and paste the following:

      select p.name project
      , t.name task
      , t.end_date
      from demo_tasks t
      , demo_projects p
      , demo_milestones m
      , demo_team_members tm
      where p.id = t.project_id
      and m.id = t.milestone_id (+)
      and tm.id = t.assignee and nvl(t.is_complete_yn, 'N') = 'N'
      and upper(tm.username) = upper(:APP_USER)
      order by t.end_date
      

      Tip:

      The where condition of username = :APP_USER restricts the records to those assigned to the person running the application.
3. Click Save and Run Page. If prompted, log into the app.

To edit page elements in the runtime with the Developer Toolbar:

1. On the runtime Developer Toolbar, click Quick Edit.
   
   
   Description of the illustration GUID-6C862D4B-A0F0-49FC-822B-10EA1C482A20-default.png
   
2. Hover over the My Outstanding Tasks region (bottom of the page) and click the wrench icon.
   
   
   

   The Live Template Options dialog appears.

   
   
   Description of the illustration GUID-24EFA060-F8F0-4319-AB43-61123ED347CB-default.png
   
3. In the Region tab, enter the following:
   1. General: Remove Body Padding - click the checkbox to enable
   2. Body Height - select 480px
   The region changes with each option.

Region Template Options (such as Body Height, Header, and Style) alter the overall presentation of a region. The Region properties determine how the region is displayed.

Some region types also contain Attribute properties (such as classic reports and charts). The Attributes for a region define how the contents of the region are displayed.

4. In the Live Template Options dialog, click the Attributes tab.
5. Enter the following:
   1. General: Stretch Report - click the checkbox to enable
   2. Report Border - select No Outer Borders
6. Click Save.

   The settings are saved.

To update the Navigation Menu icons in Shared Components:

1. On the Developer Toolbar in the application runtime, click Application #### (where #### represents your application ID).
   The Application home page appears.
2. Click Shared Components.
3. Under Navigation, click Lists.
4. In the Lists report, select Desktop Navigation Menu.
5. In List Details report, select Home.
6. Locate the Image/Class item. At the end of the field, click the up arrow icon (^).

   The Images library opens in a separate window.

   Review the images provided by the Font APEX library (abbreviated with the prefix "fa-"). These images can be used throughout the application to improve aesthetics and provide visual indicators rather than text only.

7. Locate and click fa-home.

   Tip:

   You can use your browser’s search function (Ctrl + F or Cmd + F) to search the page.
   The name of the image (fa-home) appears in the Image/Class field.

If this were the only change you need to make, you would click the Apply Changes button to save your changes; however, you still need to update the rest of the Navigation Menu entries.

You can also enter the name of the image in Image/Class rather than browse the Images library every time.

8. To update the remaining entries in the Navigation Menu:
   1. In the top-left of the screen, click the Next icon (>) to navigate to the next entry (Team Members).
   2. On the Team Members list entry, for Image/Class enter fa-users
   3. Click the Next icon (>).
   4. On the Projects list entry, for Image/Class enter fa-folder
   5. Click the Next icon (>).
   6. On the Calendar list entry, for Image/Class enter fa-calendar
9. Click Apply Changes.
10. In the top-right of the List Details page, click the Run Page 1 icon (play button ).

    The Home page reloads.

11. Review the new icons in the Navigation Menu on the left side of the screen.
12. When you are finished, return to the Shared Components - List Details window and click Application #### in the page breadcrumbs to return to the Application home page.