Commands

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

Commands

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.


<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 <commands-widget>
PROPERTIES
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional class="my-custom-class"
Feedback Enabled	The flag indicating whether to enable the execution feedback. Type: BOOLEAN \| Optional \| Values: true false [enableFeedback]="true"
Feedback Timeout	The number of seconds after that the widget shows an error in case no feedback has been received. Type: INTEGER \| Optional [timeout]="120"
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional [title]="'Details'"
Visibility Condition	The expression that allows you to reduce the visibility of the element. Type: STRING \| Optional *ngIf="getUser().organizationId != null"
SUB-ELEMENTS
Command	The sub-element referencing a thing command. Multiple \| Required <command></command>

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

Component Reference

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

Commands `<commands-widget>`

Feedback Enabled	The flag indicating whether to enable the execution feedback. 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. Type: INTEGER \| Optional `timeout="120"`
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional `[title]="'Details'"`
Rendering
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional `class="my-custom-class"`
Visibility Condition	The expression that allows you to reduce the visibility of the element. Type: STRING \| Optional `*ngIf="getUser().organizationId != null"`
Sub Elements
Command	The sub-element referencing a thing command.

Command `<command>`

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

Commands

Template Syntax

Component Reference

Component Reference

Commands <commands-widget>

Command <command>

Commands `<commands-widget>`

Command `<command>`