Progress tracker

Progress tracker displays the current status of an intended target via an API.

Breakdown

Progress tracker: Octo

Progress tracker is designed to display dynamic content by retrieving data from a Liferay object via an API call. The fragment controls how the content looks on the page, the object stores the data while the API connects the two.

Progress tracker: Bar

The bar variant shares the same functionality displayed in a different format.

Usage

Managing content (Object)

Liferay objects are essentially tables of data. Similar to an Excel spreadsheet.

Liferay objects are essentially tables of data. Similar to an Excel spreadsheet.
Click ‘Control panel’ found in the application menu. Access this from the grid icon at the top right of the page.
Under ‘Object’, click ‘Progress trackers’.
This location may change in future. If you do not see ‘Progress trackers’ look within the Liferay sidebar under ‘Configuration’.

From here, you can create new entries and edit existing entries. This is also where you can retrieve the ID of an entry, which is what you need when adding data to the progress tracker, so that it knows which specific entry to look for.

Fields explained

Target Date: The date you want to reach your target value by.
Target Value: The value you are trying to reach.
Current Value: The current value.
Name: The name you want to call your entry.
Webpage: N/A
ID: This will be automatically created when you add an entry to the object. The ID is used as the value for the ‘Tracker ID’ field on the progress tracker configuration options.

Adding data

Click the blue plus icon at the top right of the screen.
Complete the relevant fields.
Save your entry.
The ID will be created automatically.

Editing data

Click the three dots next to an entry.
Click on ‘View’.
This will take you to the same screen you would see when creating a new entry, this time with the data filled out.
Update the data and save.

Deleting data

Click the three dots next to an entry.
Click on ‘Delete’.
Important: Ensure no trackers are using the current entry you delete.
Delete your entry.

Managing the display (Fragment)

Progress tracker will display the data added in the object using the ID. This is what connects the fragment to the object.

Adding the fragment

Navigate to the page you want to add the fragment.
Select Progress tracker from the sidebar, found under ‘Keystone Components’

Fragment configuration

Type of tracker

This dropdown lets you choose between the two variants ‘Octo’ and ‘Bar’.

Tracker ID

Add the ID of the entry you want to display.

Click the plus icon and select ‘Tracker ID’.
Choose an entry by selecting the relevant name and ID.

Primary unit (Largest text at the top)

An input field, with added functionality. You can access some of the data from an object by wrapping a word in square brackets [ ].

The data you can retrieve is ‘currentValue’, ‘targetValue’ and ‘daysLeft’.

currentValue: Retrieves the ‘Current value’ field from the object entry with the associated ID you added in the Tracker ID field.

targetValue: Retrieves ‘Target value’.

daysLeft: Rather than retrieving the ‘Target date value’, it uses the current date and the target date value and display the days between them.

Important: To display the large number on the octo variant to display as a H2, wrap the ‘current value’ with an asterisk, followed by a line break by adding //.

Secondary unit (Text at the bottom)

Overall, the same rules apply from the primary unit. However the asterisk can still be added to secondary unit but will apply bold text rather than h2 styling.

The asterisk can still be added to secondary unit but will apply bold text rather than h2 styling.

Useful text formatting

[ ] Access data from the object. Example: [daysLeft].
// Line break
* Bold text, e.g *This is bold text*

Text colour

Toggle between light (Rabbit white) and dark (Swallow blue) text colours.

Colour

Choose from a list of colours that change the appearance of the octo and the bar shape.

Other information

Error messages

When you first add the tracker to a page you will see an error message. This is only because an ID has not yet been selected for the fragment.

Punctuation in primary and secondary unit fields

Due to security restrictions, some punctuation has been disabled in the primary and secondary unit configuration fields. If you have added certain punctuation, e.g an angled bracket ‘<’, the fragment will no longer work. You can still use common punctuation such as question and exclamation marks.