---
title: "Configuration Parameters"
slug: "configuration-parameters-widget"
updated: 2026-04-10T16:04:08Z
published: 2026-04-10T16:04:08Z
canonical: "learn.servitly.com/configuration-parameters-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.

# Configuration Parameters

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.

#### Configuration Parameters `&lt;configuration-parameters-widget&gt;`

| *Confirm Message* | The confirm messagge displayed in the confirm dialog. **Name**: confirmDialogMessage **Type**: STRING \| Optional `confirmDialogMessage="abc"` |
| --- | --- |
| *Feedback Timeout* | The number of seconds after that the widget shows an error in case no feedback has been received. **Name**: timeout **Type**: INTEGER \| Optional `timeout="120"` |
| *Request Confirmation* | The flag prompting the user to confirm the update execution. **Name**: confirmDialog **Type**: BOOLEAN \| Optional **Default Value**: *false* `[confirmDialog]="true"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Configuration Parameters'"` |
| *Update Button Label* | The label displayed within the widget update button. **Name**: buttonLabel **Type**: STRING \| Optional **Default Value**: *Update* `buttonLabel="abc"` |
| *Update Policy* | The update policy in case of multiple parameters. **Name**: updatePolicy **Type**: ENUM \| Optional **Values**: *FULL*, *LAZY* `updatePolicy="FULL"` |
| **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** |
| [*Configuration Parameter*](/docs/configuration-parameters-widget/#configuration-parameter) | The sub-element referencing a thing configuration parameter. |

#### Configuration Parameter `&lt;configuration-parameter&gt;`

| *Label* | The configuration parameter alternative displayed label. **Name**: label **Type**: STRING \| Optional `label="abc"` |
| --- | --- |
| *Name* | The configuration parameter whose value must be set. **Name**: name **Type**: CONFIGURATION_PARAMETER \| Optional `name="paramName"` |
| *Placeholder* | The text input placeholder. **Name**: placeholder **Type**: STRING \| Optional `placeholder="abc"` |

## Full Syntax Example

```xml

<configuration-parameters-widget    
    [title]="'Configuration Parameters'"
    buttonLabel="abc"
    timeout="120"
    updatePolicy="FULL"
    [confirmDialog]="true"
    confirmDialogMessage="abc"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <configuration-parameter        
            name="paramName"
            label="abc"
            placeholder="abc"></configuration-parameter>
</configuration-parameters-widget>
```