---
title: "Visibility Conditions"
slug: "visibility-conditions"
updated: 2026-03-20T14:27:01Z
published: 2026-03-20T14:27:01Z
canonical: "learn.servitly.com/visibility-conditions"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Visibility Conditions

You can change the visibility of the elements composing the interface by adding visibility conditions. A visibility condition is an expression that is evaluated on the client during page rendering, taking into account the page context.

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

```javascript
getUser().country == "Germany"
```

Visibility condition can be defined on:

#### Pages and Tab Visibility

#### ![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(262).png?sv=2026-02-06&spr=https&st=2026-10-16T17%3A10%3A14Z&se=2026-10-16T18%3A10%3A14Z&sr=c&sp=r&sig=1I9NVIdup76EApKzrw53hPuQXVB0GWxmhGBpcb9RZYI%3D) Template Element Visibility

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(263).png?sv=2026-02-06&spr=https&st=2026-10-16T17%3A10%3A14Z&se=2026-10-16T18%3A10%3A14Z&sr=c&sp=r&sig=1I9NVIdup76EApKzrw53hPuQXVB0GWxmhGBpcb9RZYI%3D)

#### Widget Sub-Element Visibility

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(265).png?sv=2026-02-06&spr=https&st=2026-10-16T17%3A10%3A14Z&se=2026-10-16T18%3A10%3A14Z&sr=c&sp=r&sig=1I9NVIdup76EApKzrw53hPuQXVB0GWxmhGBpcb9RZYI%3D)

> [!NOTE]
> Access to context elements
> 
> To access the context elements within visibility conditions you can use these App Utils [Context Methods](/docs/app-utils#context-methods) (e.g. *getUser()*).

## Visibility by Service Level

> [!CAUTION]
> Deprecated Feature
> 
> This feature has been deprecated and will no longer maintained, so we stronghly suggest you move to the new [Digital Services](/v1/docs/digital-services). The concept of Service Level has been replaced by Digital Plan. For more details refer to the [Subscription Main Concepts](/v1/docs/subscriptions-main-concepts) article.

You can leverage the [Service Level](/docs/service-levels) active to a thing to drive the visibility of dashboard elements (single metrics and properties, widgets, tabs). In 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.

```javascript
// 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.

## Visibility by Feature

You can leverage the [Features](/v1/docs/digital-services) included in subscribed Plans and Add-ons to drive the visibility of dashboard elements (single metrics and properties, widgets, tabs).

```javascript
// The element is visible only if the my-feature-name is included in a subscribed plan or add-on
hasFeature('my-feature-name')
```

Sample widget with visibility based on a feature.

```xml
<thing-details-widget>
  <property name="serialNumber"></property>
  <property name="properties.uptime_last_30days" *ngIf="hasFeature('uptime')"></property>
</thing-details-widget>
```

## Template Coding

In templates, 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.

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

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

```xml
<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 to partner users (e.g., TAC technicians).

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

For more details about the expression syntax, refer to the [AngularJS](https://docs.angularjs.org/guide/expression) documentation.