Build-On Tutorial:

Job Charts

Job Charts: Lesson 1

Job Charts

Lesson Overview

The purpose of this build-on is to allow you to view a quick summary of a job. You will create a new tab control with two new charts to accomplish this. The first chart will show counts of job tasks by status, and the second will show billable and non-billable job time.

Step 1 - Add a new tab

Add a new tab on the Job Detail layout to hold your new charts.

  1. Enter Layout mode using the Edit Layout button in the status toolbar and navigate to the Job Detail layout (Desktop > Job > Job Detail).

    Note: You can also enter Layout mode using the View > Layout Mode menu item, or the keyboard shortcut Command-L (macOS) / Control-L (Windows).
  2. Select and double-click the Tab Control on the layout and add a new tab named “Charts”.
  1. Each tab panel has a blue line under the tab name to indicate the active tab. To add this to the new Charts tab:
    1. Click the Charts tab to make sure it is the active tab.
    2. Scroll to the right and notice the object off the visible right edge of the layout.
    3. Duplicate the blue horizontal line (Command-D (macOS) / Control-D (Windows)) and drag it under the Charts tab name.

Step 2 - Add a new field

This purpose of this field is to count a total of related tasks.

  1. Open the Manage Database window by using the File > Manage > Database… menu item.
  2. Choose the Fields tab to view the list of existing tables, and select Task in the Table dropdown.
  3. Create a new Summary field and name it z_Count (if you did not create this field in a previous lesson). In the options for the new field, choose Count of and select ID.
  1. Click the OK button to dismiss the Options dialog.
  2. Click the OK button again to close the Manage Database dialog

Step 3 - Add a chart for Job tasks

  1. Using the Chart tool, draw a rectangle for the chart on the left side of your new tab.
  1. In the Chart Setup dialog, in the Chart section, set the title to "Tasks", and choose the Column type.
  2. Set the data for the X-Axis and Y-Axis. Select the Specify Field Name… icon next to the Data fields, and choose the fields you want to show in your chart:
    1. For the X-axis data, select job_TASK::Status by selecting job_TASK from the pull down menu and selecting the Status field.
    2. For the Y-axis data, select job_TASK::z_Count by selecting job_TASK from the pull down menu and selecting the z_Count field.
  3. Set the X-Axis label angle to 45 degrees. This will help users more easily read the labels.
  4.  Select Show data points on chart.
  1. Set the data type to Number
  2. Go to the Styles section of the Chart Setup.
    1. Select the style Solid - Flat.
    2. Select the Blue color scheme, and make the chart background Transparent.
  1. Use the Data Source section to set the final options for your chart.
    1. For Chart Data, select Related Records, and then set the Related Table to job_TASK.
    2. Click on Specify... and in the Sort Records dialog sort the related records by the Status field. Select Custom order based on value list and select the Task Status value list and click OK.
    3. Select the option Summarized groups of records to display the chart data when sorted by Status.
  1. Close the Chart Setup dialog and select the chart.

    If it is not already open, open the Inspector using the View > Inspector menu item (you can also access it using keyboard shortcut Command-I (macOS) / Control-I (Windows)). Select the chart and style it as chart Minimal, using the Styles tab of the Inspector.
  2. Size the chart to approximately half of the width of the tab panel, positioned on the left side of the tab panel, leaving room for one more chart next to it.
  3. On the Position tab of the Inspector under Autosizing with the chart selected, adjust the Autosizing to anchor to the top, right, left, and bottom.
  1. Enter Browse mode to save your changes and view your work

Step 4 - Add a chart for Time Entries

  1. Open the Manage Database dialog using the File > Manage > Database... menu item.

    Note: You can also open the Manage Database dialog while in Layout mode by selecting the Manage drop-down icon in the top right of the tool bar, and then selecting Database, or you can use the keyboard shortcut Command-Shift-D (macOS) / Control-Shift-D (Windows).
  2. On the Fields tab of the TimeEntry table create a new Summary field named zz_Hours_Total. In the options for the new field, select Total of the Hours field.
  1. Click the OK button to dismiss the Options dialog.
  2. Click the OK button again to close the Manage Database dialog.
  3. Enter Layout mode and use the Chart tool to add a second chart to the right side of your new tab.
  4. In the Chart Setup dialog, set the title to "Time Entries", and choose the Pie chart type.
  5.  Choose the data you want to display:
    1. For the Category Labels, select job_TIMEENTRY::Type_Billable by selecting job_TIMEENTRY from the pull down menu and selecting the Type_Billable field.
    2. For the Slice Data, select job_TIMEENTRY::zz_Hours_Total by selecting job_TIMEENTRY from the pull down menu and selecting the zz_HOURS_Total field.
  6. While still on the Chart section of the Chart Setup window:
    1.  Choose to Show values on chart.
    2.  Select Actual Values.
    3.  Set the data type to Number, format to Decimal, and select Fixed number of decimals: 2.
    4.  Add a notation suffix of “h” so it is clear to users that the pie data is summarizing hours (eg. four hours total will appear as 4h). Refer to the screenshot below.
  1. Go to the Styles section of the Chart Setup.
    1. Select the stye Solid - Flat.
    2. Select the Blue color scheme.
    3. Make the chart background Transparent.
  1. Use the Data Source section to set the final options for your chart.
    1. For Chart Data, select Related Records, and then select job_TIMEENTRY for Related Table.
    2. For Sort Order of Related Records click Specify... and in the Sort Records dialog sort the related records by the Type_Billable field in ascending order and click OK.
  1. Close the Chart Setup dialog and select the chart. On the Position tab of the Inspector adjust the Autosizing for the chart to anchor top, right, and bottom, turning off the left.
  1. On the Styles tab of the Inspector style the chart as chart Minimal. Your layout will look like this:

Step 5 - Show a label when there is no chart data to display

If the job does not have data to display in one of the charts, it will be nicer for your users to see a controlled message rather than simply an empty chart.

  1. Back on the Job Detail layout, use the Text tool to add the text "No Data Available", styled as caption Center via the Styles tab of the Inspector.
  2. Users should only see this text if the Tasks chart is empty. To achieve that, perform the following steps:
    1. Go to the Data tab of the Inspector. In the Hide Object When section, set the Hide condition to not IsEmpty ( job_TASK::ID )
    2. Position the label in the center of the Tasks chart.
  1. Select the Tasks chart and choose to hide it if it is empty. Set the hide condition to IsEmpty ( Job_TASK::ID ).
  2. Do the same for the Time Entries chart. First, duplicate the No Data Available text and position it in the center of the Time Entries chart.
  3. Go to the Data tab of the Inspector. In the Behavior section, set the Hide Object When condition to not IsEmpty ( job_TIMEENTRY::ID )
  4. Add a hide condition to the Time Entries chart as well: Select the chart object, then set a Hide Object When condition to IsEmpty ( job_TIMEENTRY::ID ).

Step 6 - Review your work

Congratulations, you have completed the Build-On for creating Job Charts!

  1. When you view the Job Detail layout, you should see a new tab named Charts.
  2. On the Charts tab, you should be able to view two charts that summarize the job's tasks and time entries.
  3. If there are no related tasks or time entries, you should see a label that says No Data Available.