Visuele indicatoren voor de voortgang van het project

In Relatics wordt de meeste informatie beheerd in tabellen en trees. Voor eindgebruikers werkt het erg intuïtief om zo informatie in te voeren en dwarsdoorsnedes van de informatie te maken. Over de tijd ontstaat er vaak de behoefte om op een visuele manier eenvoudig en snel inzicht in het project te krijgen. Met een aantal kleine toevoegingen aan de theme kan een voortgangsbalk gemaakt worden met voorwaardelijke opmaak. Denk bijvoorbeeld aan een balk die de voortgang van de verificaties aangeeft, of die de huidige risicoscore in vergelijking met het maximaal mogelijke toont! In dit artikel leg ik stap voor stap uit hoe je dit instelt.

Stap 1 - Ophalen van de data

Voor het weergeven van de voortgang van een bepaald element in Relatics hebben we twee waarden nodig: de huidige waarde en het ‘eindpunt’. In het voorbeeld ga ik uit van de goed afgeronde Verificaties van een Object. Om de waarden op te halen houd ik deze Query als voorbeeld in dit stappenplan.

In Relatics kun je de instanties die door een Query worden opgehaald tellen door een ‘Aggregate function’, zoals hier beschreven op de Knowledge Base. Met de Query uit dit voorbeeld haal ik door middel van twee Derived Fields (op de root-node) het aantal geplande verificaties en het aantal afgeronde verificaties op.

Derived Field: completed

count([Verification].id)

Derived Field: planned

count([Verificationplan].id)

Stap 2 – Samenstellen van het HTML-element progress

Omdat Relatics een web-based tool is, kunnen we gebruik maken van HTML en CSS om onze visualisatie aan te passen. Een van de beschikbare elementen in HTML5 is het progress element. Met dit element kunnen we een voortgangsbalk maken, zelfs zonder veel moeite. Alleen de waarde en het maximum zijn benodigd.

Hieronder het volgende Derived Field met dikgedrukt de verwijzingen naar de eerdere Derived Fields.

Derived Field: progressbar

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

Stap 3 – Tonen van de voortgangsbalk

Vanuit HTML kan een progress-element niet direct in een cel worden weergegeven. Daarom omsluit ik er een div-element omheen. Aangezien het nu niet veel moeite is om de weergave uit te breiden zet ik ook de berekende waarde voor de balk en het ‘eindpunt’ erachter.

Zet het vinkje van de output van dit Derived Field aan en kijk maar eens naar het eerste resultaat.

Derived Field: Verification progress

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

Stap 4 – Voorbereiden van de opmaak met drempelwaarden

Voor het opmaken van de voortgangsbalk gaan we CSS gebruiken. Hiervoor moeten we wel in onze Query een berekening opnemen die de drempelwaarden van de voortgang omzet in een kleur. In dit voorbeeld hou ik de volgende drempelwaarden aan (maar je kunt ze ook op bijvoorbeeld absolute waarden inrichten):

  • Meer dan 90% afgerond: Groen
  • Meer dan 75% afgerond: Oranje
  • Minder dan 75% afgerond: Rood

Derived Field: class

if([completed]/[planned]<0.9,if([completed]/[planned]<0.75,"red","orange"),"green")

Stap 5 – Toevoegen van de opmaak door het class attribuut

Voor het opmaken moet de class die we nodig hebben (met de verwijzing naar de kleur) nog worden gekoppeld aan de voortgangsbalk die we eerder hebben gemaakt.

Let op: omdat de CSS nog niet is aangepast zal je geen verschil zien, dat komt na stap 6.

Derived Field: progress bar

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

Eind-instelling van de Derived Fields

Stap 6 – Relatics.css aanpassen voor opmaak van de voortgangsbalk

De laatste stap is het aanpassen van de Relatics.css in de File explorer. Hiervoor moeten we echter wel weten welke theme we moeten aanpassen (in de praktijk zie ik dat er nog wel eens meerdere themes in de File explorer staan). Deze kun je vinden via Workspace Studio | User Interface | Portals | ‘Jouw portal’ | tabel Theme and logo | Theme.

Als je weet welke theme je moet hebben, kun je de Relatics.css opzoeken in Workspace Studio | User Interface | File explorer.

De onderstaande code voeg je toe aan de Relatics.css van jouw theme. Voordat je de aanpassingen doet is het verstandig een backup te maken (of beschikbaar te hebben).

Toevoeging aan 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 */

 

progress[value]::-moz-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 */

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

    background-color: #F55;

}

 

progress.red[value]::-moz-progress-bar {

    background-color: #F55;

}

 

progress.red[value] {

    color: #F55;

}

 

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

    background-color: orange;

}

 

progress.orange[value]::-moz-progress-bar {

    background-color: orange;

}

 

progress.orange[value] {

    color: orange;

}

 

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

    background-color: green;

}

 

progress.green[value]::-moz-progress-bar{

    background-color: green;

}

 

progress.green[value]{

    color: green;

}

Het eindresultaat

Als we op de detail presentatie van een van de objecten kijken, dan zien we daar de opgemaakte voortgangsbalk! Mogelijk moet je eerst nog de cache leegmaken om het resultaat te zien.

Downloads

Upload onderstaand RCS-bestand in je Relatics environment om de voorbeelden van dit artikel zelf te bekijken.

Over Tom Rupke

Na het afronden van de studie Civiele Techniek met een specialisatie in Constructieve Waterbouw werkte Tom als Specialist Risicoanalyse & Contractmanagement bij een ingenieursbureau. Sinds 2016 werkt hij bij Relatics als Business Information Consultant. Tom werkt het liefst aan nieuwe ideeën en innovaties om meer uit Relatics te kunnen halen. Hij draagt graag kennis over aan eindgebruikers en functioneel beheerders (zowel op projecten en bij klanten als door het geven verschillende trainingen en workshops).

Relatics Portret-127 (Small)

Contact

Heeft u hulp nodig bij het toepassen van de genoemde technieken in uw eigen casus? Of heeft u vragen, opmerkingen of suggesties over dit artikel? Laat het ons dan weten via onderstaand formulier.