---
title: "Commands"
slug: "commands-widget"
updated: 2026-04-10T16:03:10Z
published: 2026-04-10T16:03:10Z
canonical: "learn.servitly.com/commands-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.

# Commands

This widget allows displaying some buttons triggering commands on the remote Thing.

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

When a button is pressed, the server will run the command to the remote Thing by sending all the parameters configured within the Command Definition.

If the *feedback* has been enabled the button will be highlighted in green or in red for a while depending on whether the command execution succeeds or fails.

### Template Syntax

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

```xml

            <commands-widget title="Commands" class="vertical-buttons">
            <command name="Reset"></command>
            <command name="Clean"></command>
            <command name="Update"></command>
            </commands-widget>
        
```

## Component Reference

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

#### Commands `&lt;commands-widget&gt;`

| *Feedback Enabled* | The flag indicating whether to enable the execution feedback. **Name**: enableFeedback **Type**: BOOLEAN \| Optional **Default Value**: *false* `[enableFeedback]="true"` |
| --- | --- |
| *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"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Commands'"` |
| **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** |
| [*Command*](/docs/commands-widget/#command) | The sub-element referencing a thing command. |

#### Command `&lt;command&gt;`

| *Confirm Execution* | The flag prompting the user to confirm the command execution. **Name**: confirmExecution **Type**: BOOLEAN \| Optional `[confirmExecution]="true"` |
| --- | --- |
| *Name* | The thing-definition command to invoke. **Name**: name **Type**: COMMAND \| Optional `name="commandName"` |
| *Off Color* | The colore of the button when the status is OFF. **Name**: offStatus.color **Type**: STRING \| Optional `[offStatus]="{color: '#28A745'}"` |
| *Off Icon* | The icon displayed within the button when the status is OFF (eg. fa-power-on). **Name**: offStatus.icon **Type**: STRING \| Optional `[offStatus]="{icon: 'fa-start'}"` |
| *Off Label* | The label displayed within the button when the status is OFF (eg. TURN ON). **Name**: offStatus.label **Type**: STRING \| Optional `[offStatus]="{label: 'TURN ON'}"` |
| *On Color* | The colore of the button when the status is ON. **Name**: onStatus.color **Type**: STRING \| Optional `[onStatus]="{color: '#DC3545'}"` |
| *On Icon* | The icon displayed within the button when the status is ON (eg. fa-power-off). **Name**: onStatus.icon **Type**: STRING \| Optional `[onStatus]="{icon: 'power-off'}"` |
| *On Label* | The label displayed within the button when the status is ON (eg. TURN OFF). **Name**: onStatus.label **Type**: STRING \| Optional `[onStatus]="{label: 'TURN OFF'}"` |
| *Running Color* | The colore of the button when the status is RUNNING. **Name**: runningStatus.color **Type**: STRING \| Optional `[runningStatus]="{color: '#007bff'}"` |
| *Running Icon* | The icon displayed within the button when the status is RUNNING (eg. fa-running). **Name**: runningStatus.icon **Type**: STRING \| Optional `[runningStatus]="{icon: 'fa-running'}"` |
| *Running Label* | The label displayed within the button when the status is RUNNING (eg. HEATING). **Name**: runningStatus.label **Type**: STRING \| Optional `[runningStatus]="{label: 'HEATING'}"` |

## Full Syntax Example

```xml

<commands-widget    
    [title]="'Commands'"
    [enableFeedback]="true"
    timeout="120"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <command        
            name="commandName"
            [onStatus]="{
                icon: 'power-off',
                label: 'TURN OFF',
                color: '#DC3545'
            }"
            [offStatus]="{
                label: 'TURN ON',
                icon: 'fa-start',
                color: '#28A745'
            }"
            [runningStatus]="{
                label: 'HEATING',
                color: '#007bff',
                icon: 'fa-running'
            }"
            [confirmExecution]="true"></command>
</commands-widget>
```