---
title: "Schema"
slug: "schema-widget"
updated: 2026-02-25T17:43:07Z
published: 2026-02-25T17:43:07Z
canonical: "learn.servitly.com/schema-widget"
---

> ## 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.

# Schema

This widget shows a synoptic of the Thing with overlayed metric data.

![Schema](https://components-manager.servitly.com/components/Schema_1/IMAGES/_screenshot?owner=AG_Servitly)

Code View

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

            <schema-widget class="svg" width="1200px" style="width:1200px">
            <composite-part filter="ovenSchemaSvg">
            <metric name="Status"></metric>
            <metric name="Temperature"></metric>
            <metric name="Humidity"></metric>
            </composite-part>
            </schema-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Schema `&lt;schema-widget&gt;`

| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Schema'"` |
| --- | --- |
| **Rendering** |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| *Width* | The width of the widget (e.g. 500px). **Name**: width **Type**: STRING \| Optional `width="500px"` |
| **Sub Elements** |
| [*Metric*](/docs/schema-widget/#metric) | The metric whose label and current value must be displayed within the schema. |
| [*Property*](/docs/schema-widget/#property) | The property whose label and current value must be displayed within the schema. |
| [*Composite Part*](/docs/schema-widget/#composite-part) | The widget part combining multiple properties and metrics. |

#### Metric `&lt;metric&gt;`

| *Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| --- | --- |
| *Label* | The metric alternative label. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *Name* | The metric whose value(s) must be loaded by the widget. **Name**: name **Type**: METRIC \| Required `name="Temperature"` |
| *Unit* | The unit of measurement to be displayed along the value. **Name**: unit **Type**: STRING \| Optional `unit="&amp;deg;C"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

#### Property `&lt;property&gt;`

| *Description* | The property description. **Name**: description **Type**: STRING \| Optional `description="abc"` |
| --- | --- |
| *Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| *Label* | The property alternative label. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *Name* | The property whose value must be loaded by the widget. **Name**: name **Type**: PROPERTY \| Required `name="serialNumber"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

#### Composite Part `&lt;composite-part&gt;`

| *Description* | The composite-part description. **Name**: description **Type**: STRING \| Optional `description="abc"` |
| --- | --- |
| *Filter* | The filter applied on the composite-part to transform or display its value. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| *Label* | The label displayed by the widget. **Name**: label **Type**: STRING \| Optional `label="abc"` |
| *Name* | The composite-part name. **Name**: name **Type**: STRING \| Optional `name="abc"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| **Sub Elements** |
| [*Metric*](/docs/schema-widget/#metric) | The metric whose value must be loaded within the composite-part. |
| [*Property*](/docs/schema-widget/#property) | The property whose value must be loaded within the composite-part. |

#### Metric `&lt;metric&gt;`

| *Name* | The metric whose value(s) must be loaded by the widget. **Name**: name **Type**: METRIC \| Required `name="Temperature"` |
| --- | --- |

#### Property `&lt;property&gt;`

| *Name* | The property whose value must be loaded by the widget. **Name**: name **Type**: PROPERTY \| Required `name="serialNumber"` |
| --- | --- |

## Full Syntax Example

```xml

<schema-widget    
    [title]="'Schema'"
    width="500px"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null">
    <metric        
            name="Temperature"
            label="Temperature"
            filter="fooBarFilter"
            unit="&deg;C"
            *ngIf="getUser().organizationId != null"></metric>
    <property        
            name="serialNumber"
            label="Temperature"
            description="abc"
            filter="fooBarFilter"
            *ngIf="getUser().organizationId != null"></property>
    <composite-part        
            name="abc"
            label="abc"
            description="abc"
            filter="fooBarFilter"
            *ngIf="getUser().organizationId != null">
            <metric            
                        name="Temperature"></metric>
            <property            
                        name="serialNumber"></property>
    </composite-part>
</schema-widget>
```