# Using Realtime Indicators

Guide on how to add realtime indicators to diagrams

Realtime indicators help make your diagrams more readable. They are small colored shapes, backgrounds, or texts you can associate with shapes in your diagram. They can represent different states and their colors allow users to quickly scan diagrams for an informational overview.

This document explains how to add realtime indicators to your diagrams.

{% hint style="danger" %}
**Configure realtime indicators**

Before using the realtime indicators feature in Designer, make sure your ServiceNow admin has configured realtime indicators correctly. See [Realtime indicators](https://github.com/ins-pi-GmbH/designer-app/blob/v5.9.3/Documentation/key-features/realtime-indicators.md) for information on the configuration process.
{% endhint %}

![](/files/HmU3xLZm92EDdNmPrvX0)

Diagram with realtime indicators applied

## Realtime indicators UI

In Designer, you create and edit realtime indicators via the ribbon above the canvas. The indicators available to you are based on those configured by your ServiceNow admin.

* To create realtime indicators select the **Insert** tab. See [Adding realtime indicators](#adding-realtime-indicators) for more information.
* To adjust existing realtime indicators select the **Indicators** tab. See [Adjust existing realtime indicators](#adjust-existing-realtime-indicators) for more information.

## Adding realtime indicators

1. Select **INSERT** from the top ribbon.
2. The insert menu pops up, select **Realtime Indicators**.
3. Select the table, field, and view for the realtime indicator you want to add.

![](/files/1pJ1N4H7c8EFzOo6rwQE)

4. Select the **ADD INDICATOR** button.

### Types of realtime indicators

* *Background*: Adds a colored background to relevant tables in the diagram.

![](/files/7V3XYVZoELRVMM5SBTJC)

* *Border*: Adds a colored border around each relevant tables in the diagram.

![](/files/xntUttFQFniclGlLjXhw) ![](/files/EwLQKagheCqhnq1ZMwrK)

* *Circle*: Adds a small circle to the top right corner of relevant tables diagram.

![](/files/onhWftStSkCsoDrmPwt3) ![](/files/h0sLbVTkWBkPWwgR4dPK)

* *Rhombus*: Adds a colored rhombus circle to the top right corner of relevant tables in the diagram.

![](/files/ZLjAPpvxU2O61VfIz3Nk) ![](/files/x6B4EO2Fe3gKNv2IWttm)

* *Square*: Adds a small colored square to the top right corner of relevant tables in the diagram.

![](/files/qHny0YIUebRczaQSEKB3) ![](/files/bSktVmmsWgUcDrcw7LqW)

* *Text*: Adds text describing the indicator to each relevant table in the diagram.

![](/files/tfdtRSWXNoHHs35qN0aZ)

* *Triangle*: Adds a small circle to the top right corner of relevant tables in the diagram.

### Set realtime indicators' position

In Designer you can choose a *position* and *orientation* of realtime indicators.

To adjust the position:

1. Hover your cursor over the **Position** box. Here you can choose where the indicator is placed inside or outside the element.
2. Select your preferred position for the realtime indicator.

To set the orientation of the realtime indicator:

* Select **Add Indicator**.
* Select either the left-to-right or right-to-left orientation for indicators with horizontal positions.
* Select either top-to-bottom or bottom-to-top orientations for indicators with vertical positions.

To add the realtime indicator to your diagram:

* Select **Add Indicator**.

## Adjust existing realtime indicators

Designer has options to edit existing realtime indicators and hide or remove them. These are accessed via the indicators tab in the menu ribbon.

### Edit existing realtime indicators:

After selecting **INDICATORS** from the ribbon:

1. Select the realtime indicator you want to adjust.
2. Follow the instructions [Adding realtime indicators](#adding-realtime-indicators) to adjust the type, position or orientation of the realtime indicator.
3. When you are ready to commit changes to the realtime indicators, select **Update Indicator**.

### Hide realtime indicators

To hide all realtime indicators:

1. Select **INDICATORS** from the top ribbon.
2. Select the toggle button to turn off all realtime indicators.

### Delete a realtime indicator

In the edit mode:

* Select the **x** icon for the realtime indicator you would like to remove

![](/files/ToJyv1XKB9L4DLxIIbYU)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ins-pi.com/designer/work-in-the-app/using-realtime-indicators.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.