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 within a dashboard
• Sub-Pages within a page
• Rows in a template
• Component in a template row
• sub-elements in a template component  

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"   

Template Coding 

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>

Context Functions

To access the page context, you can use the following functions:

• getCustomer(): returns the object describing the current customer. Available only when entering into a location details page, a thing dashboard, or when logged in as a customer user.  
• getCustomerServiceLevel(): returns the object describing the service level associated with the current customer.
• getLocation(): returns the object describing the current location. Available only when entering into a location details page, a thing dashboard.
• getServiceLevel(): returns the object describing the service level associated with the current thing
• getThing(): returns the object describing the current thing. Available only when entering into a thing dashboard.  
• getUser(): returns the object describing the logged-in user.
• isMobile(): returns true in the case of mobile app navigation.

For more details about the properties available within each object, refer to the REST API Reference page.

For more details about the expression syntax, refer to the AngularJS documentation.