Keep your Data Flowing

0 of 5 lessons complete (0%)
Exit Course

Lesson 4: Building the Dashboard

You don’t have access to this lesson

Please register or sign in to access the course content.

Add the map to a Dashboard

This lesson assumes some basic knowledge of working with ArcGIS Dashboards. If you have not worked with ArcGIS Dashboards either in ArcGIS Online or ArcGIS Enterprise we recommend that you follow some of the Esri Lessons on learn.arcgis.com.

From the Item Info page of the map you created in the last lesson, choose the “Create app” dropdown on the right and click “Dashboards”. Provide the dashboard a Title, Summary, and Tags, and click “Create Dashboard”.

User interface displaying options for map applications, including 'Instant Apps', 'Experience Builder', 'ArcGIS StoryMaps', 'Dashboards', and 'Indoors'.

When the dashboard first opens, it includes a map. Since we’re only working with tables, go ahead and remove it. With the map removed, you’ll see a view like the screenshot below.

Illustration depicting data visualization with charts and gears, accompanied by text promoting dashboard creation and documentation access.

Pro Tip: Every dashboard element has a General tab that includes a name field. By default, elements appear as “Element type (n)”, so the first indicator added to a dashboard would be named “Indicator (1)”. Naming each element will make your life easier later when setting up Actions. For example, I’d name the Successful Jobs indicator “Indicator (successful)”.

Add a Serial Chart

Click the “+” sign to add a “Serial Chart” and choose the “All jobs last 48 hours” table from the list of tables in the web map.

A user interface dropdown menu showing various data visualization options including Map, Serial chart, Pie chart, Indicator, Gauge, List, Table, Details, Rich text, and Embedded content.
Screenshot of layers from 'FME Demo Map' displaying two items: 'FME_Jobs - Fme nodes' and 'FME_Jobs - All jobs in last 48 hours'.

In the Serial Chart set the following properties for each tab.

Data Tab:

Settings interface for a serial chart displaying filtering options and configurations for FME Jobs over the last 48 hours.

Series Tab:

Settings panel for a serial chart, including options for series stacking, type selection, fill and line opacity sliders, line thickness adjustment, and color labels for different series (FAILURE, SUCCESS, CANCELLED).

Depending on the data currently in the FME Jobs tables, you may need to manually add status values to your series labels and data filters. All values as defined by the FME Flow schema are listed below for your convenience.
SUCCESS, CANCELLED, FAILURE, RUNNING, QUEUED

Choose a color theme that fits your desired palette. A couple of websites that we use are:

Make a note of the Hex values for your color theme, we will use them again when we build the table.

Once you have modified the settings on the Data and Series tabs click the “Done” option in the lower right corner.

You should now have a large bar chart taking up most of the dashboard, with each bar representing one hour, oldest job history data on the left and most recent job history data on the right. It refreshes on the interval you set back in the map properties.

The first and last bars may be a different size than the ones in the middle. That’s expected: since the query only pulls the last 48 hours, each refresh drops the oldest data off the left edge and adds new data to the right edge, so those two bars are mid-transition depending on the time.

Add a Table

Click the plus sign (+) in the upper left corner to add an element and then a plus sign where you want your table to appear, in our example we have placed the table on the bottom of the dashboard. Choose “Table” and then “All jobs last 48 hours”.

Dropdown menu showcasing various data visualization options including Map, Serial chart, Pie chart, Indicator, Gauge, List, Table, Details, Rich text, and Embedded content.
Screenshot of a menu labeled 'Layers from FME Demo Map' displaying two entries: 'FME_Jobs - Fme nodes' and 'FME_Jobs - All jobs in last 48 hours'.

Data Tab:

Configure the Data tab to look like the settings below.

Dashboard interface displaying data options for the FME_Jobs layer, including settings for filtering, table types, value fields such as job ID and status, sorting options, and maximum rows.

Feel free to adjust the field headers on the Header tab if you would like.

Values Tab:

On the Values tab, set “Advanced formatting” to Enabled. This opens a code editor with an Arcade script, which we’ll modify below.

User interface showing value options with 'Advanced formatting' label and an 'Enable' button

The changes for this lesson are listed here, and the line numbers refer to the finished script. To go further, the ArcGIS Learn lessons linked at the top of this page cover advanced formatting in more depth.

  • Lines 1 to 6: Define a statusColor variable that maps each status to a background color. Reusing the hex values from the bar chart keeps the theme consistent.
  • Line 10: Wrap the Job ID in an HTML hyperlink so clicking it opens the job summary in FME Flow. Replace the URL with your own FME Flow hostname.
    • Note: At the time of writing, FME Flow still serves its web interface under /fmeserver/. If the link doesn’t resolve on your version, open a job summary in your browser and copy the path from the address bar.
  • Lines 22, 34, and 46: Format the datetime values (for example, HH:mm:ss MM-DD-YYYY) so they’re easier to read.
  • Line 94: Wrap the status value in <strong> tags so it stays readable against the colored background.
  • Line 97: Set the cell’s background color to statusColor so failed jobs stand out.
var statusColor = When(
  $datapoint.status == 'SUCCESS', '#3d787e',
  $datapoint.status == 'CANCELLED', '#d0cd94',
  $datapoint.status == 'FAILURE', '#d5703d',
  'gray'
)
return {
  cells: {
    job_id: {
      displayText: "<a href='https://your-fme.your-domain.com/fmeserver/job/" + $datapoint.job_id + "/summary' target='_blank'>" + $datapoint.job_id + "</a>", 
			hoverText: $datapoint.job_id,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    date_queued: {
      displayText: Text($datapoint.date_queued, 'hh:mm:ss MM-DD-YYYY'), 
			hoverText: $datapoint.date_queued,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    date_started: {
      displayText: Text($datapoint.date_started, 'hh:mm:ss MM-DD-YYYY'), 
			hoverText: $datapoint.date_started,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    date_finished: {
      displayText: Text($datapoint.date_finished, 'hh:mm:ss MM-DD-YYYY'), 
			hoverText: $datapoint.date_finished,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    repository_name: {
      displayText: $datapoint.repository_name, 
			hoverText: $datapoint.repository_name,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    workspace_name: {
      displayText: $datapoint.workspace_name, 
			hoverText: $datapoint.workspace_name,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    engine_instance: {
      displayText: $datapoint.engine_instance, 
			hoverText: $datapoint.engine_instance,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    status: {
      displayText: Concatenate('<strong>'+$datapoint.status+'</strong>'), 
			hoverText: $datapoint.status,
      textColor: '',
      backgroundColor: statusColor,
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    username: {
      displayText: $datapoint.username, 
			hoverText: $datapoint.username,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    }
  }
}

Add Indicators:

This lesson walks you through adding the Successful Jobs indicator. You’ll want to add more to cover the information you want to track. A useful shortcut is duplicating an existing indicator and adjusting it, rather than building each one from scratch. In this dashboard, that works well for the Failed Jobs, Cancelled Jobs, Running Jobs, and Queued Jobs indicators.

Click the plus sign (+) in the upper left corner to add an element and then a plus sign where you want your indicator to appear, in our example we’ve placed all the indicators on right side of the dashboard. Choose “Indicator” and then “All jobs last 48 hours”.

A dropdown menu displaying various data visualization options including Map, Serial chart, Pie chart, Indicator, Gauge, List, Table, Details, Rich text, and Embedded content.
Screenshot of a map interface showing layers from 'FME Demo Map' with two options: 'FME_Jobs - Fme nodes' and 'FME_Jobs - All jobs in last 48 hours'.

Data Tab:

Configure the Data Tab like the settings below, pay close attention to the status filter.

Screenshot of a data options panel featuring settings for filtering job statuses in an FME application, displaying options for filtering by status equal to 'SUCCESS', with a count statistic based on job IDs.

Indicator Tab:

On the Indicator tab, add the top and bottom text to clarify what the indicator shows. This is also a good time to add an icon and set its fill and outline colors. We matched these to the theme used in the bar chart and table.

A user interface panel showing options for configuring an indicator, including settings for text, icon position, fill and outline colors, and value formatting styles.

The filters for the job indicators are outlined below:

  • Successful Jobs: status = SUCCESS
  • Failed Jobs: status = FAILURE
  • Cancelled Jobs: status = CANCELLED
  • Running Jobs: status = RUNNING
  • Queued Jobs: status = QUEUED

For the node (Cores and Engines) count indicators add a new indicator like we did before but this time we are going to use the “Fme nodes” table as shown below.

User interface dropdown menu displaying various data visualization options including Map, Serial chart, Pie chart, Indicator, Gauge, List, Table, Details, Rich text, and Embedded content.
Display of layers from 'FME Demo Map' showing FME nodes and jobs from the last 48 hours.

Configure the filters for each indicator as follows:

  • Core Count: role = Core
  • Engine Count: role = Engine

Add the top and bottom text, stylings, and any icons help understand what the indicator is showing on the dashboard.

Configure Filters:

Click the plus sign (+) in the upper left corner to add a header element to the dashboard. Click “Done” on the header element settings, we won’t be making any changes here.

Click the plus sign (+) in the upper left corner again and then choose the plus (+) sign in the right side of the Header. Choose a “Category selector”.

We are going to begin by creating the option to filter by status. Configure the Data tab like the image below.

Configure the Selector tab like the settings below.

On the Actions tab, configure the settings as shown below. Note the use of each element’s name, as recommended earlier in this lesson.

We are also going to add a “Category selector” to filter by Workbench Name.

Data tab:

Selector tab:

Actions Tab:

for the workbench selector we are filtering quite a few more elements, this provides us with the stats on how that specific workbench is performing.

Follow the steps above to add any other filters you’d like. We’ve found a filter by “engine” name especially useful in a multi-machine environment.

At this point your dashboard should be complete. We would love to see your version, please share a screenshot on LinkedIn and be sure to @spatialty so we can see it.

You can connect with us on LinkedIn using the link below.