Progress Tracker

The Progress Tracker content item enables you to visually display progress towards a goal based on the results of an IQA query. For example, connect the Progress Tracker content item to a fundraising query, so that your members can easily track the progress of a fundraising effort towards a specific goal. Or connect Progress Tracker to an events query, so that you can see at a glance how many people have registered for an event.

Viewing a Progress Tracker content item example

Progress Tracker configuration options

This content item uses the Common content item configuration options, in addition to the following:

  • Source query - Click select and browse to the IQA query for which you want to see results in the Progress Tracker. The query must contain specific aliases:
    • Goal_Amount: Indicates which property is the goal amount.
    • Sum_Total: Indicates which property is the amount to be summed.
    • End_Date: Indicates which property specifies the end date. This alias is only required if you want to display an end date.
  • Filter Options - This section can be used if you want to dynamically filter the query results based on the value of a particular property. When you choose a data column on which to filter, iMIS looks for a URL parameter to set the value for that property. The URL parameter it looks for is the one specified in the URL parameter field. For example, to filter the query to show only the item ID passed in the URL, choose the query column for the item ID and specify ItemId as the URL parameter:
    • Filter on data column - Select a data column on which to filter the query results.

      • Note: Each property you select on the Display tab of your query in IQA is available as a Filter on data column option.

    • URL parameter - If you choose a data column on which to filter the query, enter the parameter name by which you want to filter values. You can use an existing URL parameter, for example ItemId (which the Donation Creator content item also uses), or you can enter a unique value.
  • Display Messages:
    • Description - If you want to display a description below the Progress Tracker, enter the text for the description here. The variables below can be used in the description. For example, "Help us reach our goal of [GoalTotal] new members by [EndDateLong]."
      • [GoalTotal] displays the goal total.
      • [CurrentTotal] displays the current sum total or count.
      • [EndDateLong] displays the end date in a long format (for example, Tuesday, October 28, 2014).
      • [EndDateShort] displays the end date in a short format (for example, 02/10/2014).
    • Successful message - The message displayed with the progress bar once a goal has been successfully reached.
  • Caption Options:
    • Progress bar location - Choose to display the progress bar above or below the captions. If (None) is selected, no progress bar is displayed. The progress bar indicates the current percentage of the goal.
    • Display percent - Displays the percentage of the goal.
      • Percent description - The description for the percentage amount.
    • Display total - Displays the total amount.
      • Total description - The description for the total amount.
    • Display days remaining - Display the days remaining count.
      • Days remaining description - The description for the days remaining count.
  • Navigation
    • Enable hyperlink – Enables and disables all child navigation options.
    • Navigate to – Options for navigation endpoints.
      • Shortcut – Allows users to pick an existing system shortcut.
      • URL or Content - Allows users to select an existing content record or enter any valid URL.
      • Query results – Allows users to pick an existing IQA query. This option is available to staff only.
    • Target – Options for type of navigation window.
      • Same window – The Progress Tracker opens in the same window of the previous screen.
      • New window - The Progress Tracker opens in a new window or tab, depending on your browser settings.
      • Pop-up window - The Progress Tracker opens in a pop-up window.

    • Note: For sample IQA queries that work with this content item, go to the $/Samples/ProgressTracker folder.

Setting up the Progress Tracker

Do the following to setup the Progress Tracker:

  1. Create a query for the Progress Tracker content item.

    2. Note: For sample queries that will work with this content item, see $/Samples/ProgressTracker/ in IQA.

    When you build your query for the Progress Tracker content item, the query must contain specific aliases. In IQA, create a new query and choose the business object on which you want to query. From the Display tab, choose properties to which you will assign the following aliases:

    • Goal_Amount: Indicates which property is the goal amount. You can apply this alias to a property of a business object, or apply it to a Custom SQL Expression property. For example, add CAST(25000 AS INT) as a property to set the goal amount to 25,000.
    • Sum_Total: Indicates which property is the amount to be summed. The percentage displayed in the Progress Tracker content item is based on the Sum_Total amount compared to the goal. It can be a monetary amount or any other number, such as the number of event registrations.

      • Note: From the Function drop-down for this property, select Sum, so that only one row is sent to the content item. This is not required, but it will improve performance.

    • End_Date: Indicates which property specifies the end date. This alias is only required if you want to display an end date in the Progress Tracker content item. You can apply this alias to a property of a business object, or apply it to a Custom SQL Expression property. For example, add CAST('2012-12-25' AS DATE) as a property to set the end date to 25 December, 2012.
  2. Add the content item to a content record.
  3. Configure the Progress Tracker content item:
    1. Enter the CSS class to style the Progress Tracker content item. The following are pre-defined styles:
      Table 1: Viewing the CSS Class, Description, and Image
      CSS ClassDescriptionImage

      ProgressTracker_Dashboard_Overview

      Displays the Progress Tracker as a clickable tile. When hovering over the Progress Tracker, the border darkens to alert the user the tile is clickable.

      ProgressTrackerNumberGradient

      		Displays the number using a soft gradient for visual effect and a white background. This class is only available for use in the Staff site theme.
      AlignCenter

      Aligns the Progress Tracker content in the middle of the tile.

      		 
      ProgressTrackerDisplays the contents of the Progress Tracker in a compact form with simple black letters on a white background.
      ProgressTracker2Displays the Progress Tracker with black letters and large white numbers to call attention to the content displayed.
      AltBgColor2Applies a background color as specified by the site's theme. For example, this CSS class applies a dark purple background color in the Staff Site.
      AltBgColor3Applies a background color as specified by the site's theme. For example, this CSS class applies a purple background color as specified in the Staff Site.
      AltBgColor4Applies a background color as specified by the site's theme. For example, this CSS class applies a pinkish-purple background color as specified in the Staff Site.
      AltBgColor5Applies a background color as specified by the site's theme. For example, this CSS class applies a dark orange background color as specified in the Staff Site.

      2. Note: The AlignCenter and various AltBgColor CSS classes can be applied to other content items to further customize website content.

      You can edit these classes to change the look and feel, or you can create your own style for the Progress Tracker. To begin making changes to the Progress Tracker styles, you must edit the associated theme files. See Creating custom themes.

    2. Select a Source query.
    3. (optional) Select a data column by which you want to filter from the Filter on data column drop-down. You can use this feature to dynamically update your Progress Tracker, based on the value passed to it in the URL. If you choose to filter on a data column, then also enter the name of the URL parameter, which is used by the Progress Tracker content item to identify the value on which to filter. For example, to limit the results of an event query to a specific event, you can select the EventCode property and give the URL parameter a name such as EventCode. The progress displayed will then reflect only the event code which is included in the URL as EventCode=[EventCodeValue].
    4. (optional) Enter any messages you want to be displayed in the Progress Tracker content item. The following variables can be used in the descriptions. For example, Help us reach our goal of [GoalTotal] new members by [EndDateLong]!
      • [GoalTotal] displays the goal total.
      • [CurrentTotal] displays the current sum total or count.
      • [EndDateLong] displays the end date in a long format.
      • [EndDateShort] displays the end date in a short format.
    5. Select the Caption Options. In addition to the progress bar, you can also display the values as text. If any of the Caption Options are unavailable after selecting a query, then the required aliases have not been defined in the query.
    6. Select the Progress bar location. The bar can be displayed above or below the captions.

      7. Note: You can also use the Progress Tracker content item to display a countdown only (days remaining to a certain date). Select the caption option Display days remaining only, then select (None) for the Progress bar location.

    7. Click OK.