---
title: "Composite"
slug: "composite-widget"
updated: 2026-07-31T10:14:50Z
published: 2026-07-31T10:14:50Z
canonical: "learn.servitly.com/composite-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.

# Composite

Displays multiple widgets into a single frame.

With this widget you can include inside the same frame multiple components (widgets, controls), arranging them in multiple rows. The included components will be displayed without a frame and will be displayed according to how the rows inside the composite widget have been defined.

For example, below you can see a single box containing three gauges on two rows.

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

The [Template Editor](https://help.servitly.com/hc/en-us/articles/5118493413521) allows you to add the Composite widget and edit its content in the same way you are editing the main template.

## Template Syntax

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

```xml

            <composite-widget>

            <div class="d-flex justify-content-around">

            <gauge-widget [iconName]="'fa-clock-o'" backgroundColorClass="bg-white" [hideLastUpdate]="true" measureUnitPosition="METRIC_VALUE_RIGHT">
            <metric name="Temperature" filter="singleDecimalFormat"></metric>
            </gauge-widget>

            </div>

            <div class="d-flex justify-content-around">

            <gauge-widget [iconName]="'fa-clock-o'" backgroundColorClass="bg-white" [hideLastUpdate]="true" measureUnitPosition="METRIC_VALUE_RIGHT">
            <metric name="TempSetpoint"></metric>
            </gauge-widget>

            <gauge-widget [iconName]="'fa-clock-o'" backgroundColorClass="bg-white" [hideLastUpdate]="true" measureUnitPosition="METRIC_VALUE_RIGHT">
            <metric name="Power" filter="singleDecimalFormat"></metric>
            </gauge-widget>

            </div>

            </composite-widget>
        
```

## Component Reference

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

#### Composite `&lt;composite-widget&gt;`

| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Composite'"` |
| --- | --- |
| **Expandable Details** |
| *Details Button Icon* | The Angular Material icon displayed inside the details button. **Name**: expandableDetails.expandIcon **Type**: STRING \| Optional `[expandableDetails]="{expandIcon: 'abc'}"` |
| *Mode* | The way the details is opened. **Name**: expandableDetails.mode **Type**: ENUM \| Optional **Values**: *EMBEDDED*, *POPUP* **Default Value**: *POPUP* `[expandableDetails]="{mode: 'EMBEDDED'}"` |
| *Popup Title* | The title displayed on the top part of the popup. **Name**: expandableDetails.popupTitle **Type**: STRING \| Optional `[expandableDetails]="{popupTitle: 'abc'}"` |
| *Template* | The name of the template to display. **Name**: expandableDetails.template **Type**: STRING \| Optional `[expandableDetails]="{template: 'abc'}"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *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"` |
| **Sub Elements** |
| [*Link*](/docs/composite-widget/#link-element) | Make the widget clickable by defining an address to browse. |

#### Link `&lt;link-element&gt;`

| *Description* | The description displayed as link tooltip. **Name**: description **Type**: STRING \| Optional `description="Show more details..."` |
| --- | --- |
| *Icon* | The [Google Fonts](https://fonts.google.com/icons) icon (e.g. save) or [Google Fonts (5 free)](https://fontawesome.com/v5/search?ic=free-collection) icon (e.g. fas fa-home) to be displayed before the link label. **Name**: icon **Type**: STRING \| Optional `icon="abc"` |
| *URL* | The URL to browse, '/..' for application relative URL, 'https://....' for external URLs, else it is considered relative to the current page. **Name**: url **Type**: STRING \| Required `url="abc"` |
| **Rendering** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the link. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<composite-widget    
    [title]="'Composite'"
    [expandableDetails]="{
        mode: 'EMBEDDED',
        expandIcon: 'abc',
        template: 'abc',
        popupTitle: 'abc'
    }"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <link-element        
            description="Show more details..."
            url="abc"
            icon="abc"
            *ngIf="getUser().organizationId != null"></link-element>
</composite-widget>
```