Visibility Conditions

  • 1 minute(s) read

You can change the visibility of the elements composing the interface by adding visibility conditions.

A visibility condition is an expression, which is evaluated on the client during the page rendering, and taking in account the page context.

For instance, an element may be made visible only to German users: 

getUser().country == "Germany"

Visibility condition can be defined on:

  • Pages and Tab Visibility

  • Template Element Visibility

  • Widget Sub-Element Visibility

To access the context objects within visibility conditions you can use the Context Functions (e.g. getUser()).

Visibility by Service Level

You can leverage the Service Level active to a thing to drive the visibility of dashboard elements (single metrics and properties, widgets, tabs).

Into Service Levels you can define features that are then enabled by Service Level, and within a visibility condition you can use these feature flags to display or hide elements.

// The element is visible only if the myFeatureName is selected
getServiceLevel()?.features.myFeatureName

Try to use feature flags and do not define conditions by the name of the active service level, so it will be easier to change service levels without touching all the templates and pages.

Template Coding

In templates, a visibility is handled through the use of the *ngIf attribute.

To avoid errors in case of null objects, you can use the '?' before the dot used to access a specific field.

getUser().customer?.country == "Germany"

Here is an example of a template element that is visible only for customer users.

<div *ngIf="getUser().customerId">
 <gauge-widget ....></gauge-widget> 
</div>

You can also add visibility conditions on widget sub-elements.
In the following example, the Service Due Date is visible only by partner users (e.g. TAC technicians). 

<thing-details-widget>
 <property name="Serial Number"></property>
 <property name="Service Due Date" *ngIf="getUser().partnerId"></property>
</thing-details-widget>