Visual indicators on the project progress

In Relatics, most information is managed in tables and trees. For end users, this makes entering information and creating excerpts of the data very intuitive. Over time, the need for a visual way to have a simple and quick insight into the project information often arises. By making a few small additions to the theme, a progress bar can be created with conditional formatting. Examples include a bar that indicates verification progress, or a bar which shows the current risk score compared to the maximum possible! In this article, I will explain step by step how to set this up.

Step 1 - Retrieve data

To display the progress of a certain element in Relatics, we need two values: the current value, and the 'end point'. In the example, I am using properly completed Verifications of an Object. To retrieve the values, I will consistently use this Query as an example in this step-by-step instruction.

In Relatics, you can count the instances that are retrieved by a Query using an 'Aggregate function', as described here in the Knowledge Base. Using the Query in this example, I retrieve the number of planned verifications and the number of completed verifications via two Derived Fields (on the root node).

Derived Field: completed


Derived Field: planned


Step 2 - Compiling the HTML progress element

Because Relatics is a web-based tool, we can use HTML and CSS to modify our visualisation. One of the elements which can be used in HTML5 is the progress element. With this element we can quite easily create a progress bar, for which we only need the value and the maximum.

Below, the following Derived Field with references to the earlier Derived Fields in bold.

Derived Field: progressbar

<progress value=[completed] max=[planned]></progress>

Step 3 - Show the progress bar

A progress element cannot be displayed directly in a cell using HTML, which is why I enclose it within a div element. As it is fairly easy to expand the view, I also place the calculated value in front of the bar, and the 'end point' behind it.

Check the selection-box for the output of this Derived Field, and have a quick look at the first result.

Derived Field: Verification progress

concatenate("<div>",[completed]," ",[progressbar]," ",[planned],"</div>")

Step 4 - Prepare the formatting with threshold values

We will use CSS to format the progress bar. To do this, we have to include a calculation in our Query that converts the threshold values ​​of the progress into a colour. In this example, I use the following threshold values (but you could also set absolute values, ​​for example):

  • More than 90% completed: Green
  • More than 75% completed: Orange
  • Less than 75% completed: Red

Derived Field: class


Step 5 - Adding the styling with the class attribute

For the design, we still have to link the class we need (containing the reference to the colour) to the progress bar we created earlier.

Note: because the CSS has not yet been modified, you will not see any difference until Step 6 is completed.

Derived Field: progress bar

<progress class=[class] value=[completed] max=[planned]></progress>

Final settings of the Derived Fields

Step 6 - Modify Relatics.css to format the progress bar

The final step is to adjust Relatics.css in the File explorer. To do this, we need to know which theme we have to change (in practice, I have noticed that there are sometimes multiple themes in the File explorer). You can find the theme via Workspace Studio | User Interface | Portals | ‘Your portal’ | table Theme and logo | Theme.

Once you know the theme you need, you can look up the Relatics.css in Workspace Studio | User Interface | File explorer.

Add the code below to the Relatics.css of your theme. Before making any adjustments, it is wise to make a backup, or have one at hand.  

Extension to Relatics.css

/* ========== Progress Bar =========== */


progress {

    /* Reset the default appearance */

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;


    /* Dimensions*/

    width: 170px;


    /* Remove default border in Firefox. */

    border: none;



/* Format background of progress-bar */

progress[value]::-webkit-progress-bar {

    background-color: #eee;

    border-radius: 2px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;




/* Default color of progress-bar */



    border-radius: 2px;

    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.25) inset;



progress[value]::-webkit-progress-value {

    border-radius: 2px;

    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.25) inset;



/* Alternative colors of the progress-bar */[value]::-webkit-progress-value{

    background-color: #F55;

}[value]::-moz-progress-bar {

    background-color: #F55;

}[value] {

    color: #F55;


    background-color: orange;

}[value]::-moz-progress-bar {

    background-color: orange;

}[value] {

    color: orange;


    background-color: green;


    background-color: green;


    color: green;


The final result

When we view the detailed presentation of one of the objects, we can see the progress bar we have designed! You might have to clear your cache to see the result.


Upload the following RCS file in your Relatics environment to view the examples in this article.

About Tom Rupke

After finishing his study in Civil Engineering, with a masters in Hydraulic Structures, Tom has been working as Specialist Risk Analysis & Contract Management at an engineering company. Since 2016, he works at Relatics as a Business Information Consultant. Tom enjoys working on new ideas and innovations to make the most out of Relatics. He also likes transferring know-how and specific knowledge to end-users and functional designers (both on projects and with customers as by teaching different training courses and workshops).

Relatics Portret-127 (Small)


Do you need help in applying the techniques and tips in your own case? Or do you have questions, comments or suggestions about this article? If so, don’t hesitate to contact one of our consultants