Overview
A component's description file defines the properties, services, and events of an IoT Studio component. This topic describes the structure of this file.
You can configure the properties, services, and events of an IoT Studio component to meet your business needs, such as changing the component style or associating it with a device data source.
The features of an IoT Studio component are implemented in the src/specs/specs.js file. This file consists of three main parts: properties, services, and events.
{
// properties: Describes the list of component properties. For example, configurable properties such as font and color are defined here.
"properties": [
{
"identifier": "fontFamily",
"text": "Font",
"type": "enum",
"dataTypes": [
"String"
],
"options": {
"items": [
{
"label": "Microsoft YaHei",
"value": "\"Microsoft YaHei\""
},
{
"label": "SimSun",
"value": "SimSun, STSong"
},
{
"label": "SimHei",
"value": "SimHei, STHeiti"
}
]
},
{
"identifier": "color",
"text": "Color",
"type": "color",
"defaultValue": {
"r": 51,
"g": 51,
"b": 51
},
}],
// services: Describes the list of services that the component provides. For example, a component can provide a method that returns the value of an internal property.
"services": [{
"identifier": "$getValue",
"text": "Get value",
"effect": false
}],
// events: Describes the list of component actions. For example, a component can provide a click feature. When the component is clicked, it can return property values.
"events": [{
"identifier": "click",
"text": "Click",
"fields": [{
"identifier": "status",
"description": "Current value"
}]
}, {
"identifier": "doubleClick",
"text": "Double-click",
"fields": [{
"identifier": "status",
"description": "Current value"
}]
}, {
"identifier": "mouseEnter",
"text": "Mouseover",
"fields": [{
"identifier": "status",
"description": "Current value"
}]
}]
}this.$emit in the file must match the identifier field of events.fields in the src/specs/specs.js file.
For example, if the value of events.fields.identifier is status, the call to this.$emit must be this.$emit('event', { status }).
For more information, see Local development and testing.
Properties
IoT Studio lets you programmatically customize component properties to implement complex filter interactions.
A component has various properties, such as text, size, and position. These properties can be set dynamically. For example, a component can populate a drop-down list or display different content based on the return values from its data source.
Services
A component can define methods to execute commands, such as returning a property value. When these methods are exposed for external use, they are called the component's services.
Events
A component can define events that are triggered by user actions in the browser interface. When an event is triggered, the component can return its internal state values.