Component inputs

The inputs list is the part of the manifest file that describes all the inputs for the component. These eventually translate into component properties in the Studio. Inputs are for configuring the component on a page, for example the text that it should display or a data source tag it should monitor.

  • key
    The logical name of the input, which will be used to provide the input value in the component code as this.context.inputs.<key>

  • type
    The type of the input. See the input types overview below.

  • label
    The text to display in the component properties dialog above the input field.

  • required
    Indicates whether the field is a required field.

  • defaultValue
    An initial value to use for the field.

  • description
    An optional descriptive text to display along with the input field. The text can be formatted using Markdown.

  • placeholder
    The text to display in the component properties dialog in the input field if it has no value yet.


Input types

TypePresented in Studio asValue type in context
StringInput fieldstring
TextTextareastring
NumberNumeric input fieldnumber
CheckboxCheckboxboolean
SelectionDropdown liststring
MaterialIconFilterable list of material design iconsstring
ColorColor pickerstring
ImageImage file uploadstring
RawMetricDropdown list showing the tags of the selected agentobject with keys selector, decimals, unit, factor
AggregatedMetricDropdown list showing the tags of the selected agent and an aggregation formulaobject with keys selector, decimals, unit, factor, aggregator, transform
LiveMetricDropdown list showing the variables of the selected agentobject with keys selector, decimals, unit, factor
Group *Grouped combination of its childrenobject with the key values of its child inputs as keys
List *List with Add and Removearray

Most types are pretty self-explanatory. Two input types are special (*), as they are of a structural kind.

String

The String type represents a single line of text.

{
  "key": "title",
  "type": "String",
  "label": "Title",
  "placeholder": "Enter title text"
}

Text

The Text type represents longer pieces of text, usually spanning multiple lines.

Depending on the component, you may use some markup language such as Markdown, but the input type itself does not specify nor dictate which syntax can be used.

{
  "key": "body",
  "type": "Text",
  "label": "Body",
  "placeholder": "Enter body text"
}

Number

The Number type represents a number. It has three fields, all optional.

  • min and max specify the bounds of the input value (inclusive).
  • step specifies the increment between values when using the spinner buttons of the input.
{
  "key": "level",
  "type": "Number",
  "label": "Level",
  "min": 0,
  "max": 10,
  "step": 2,
  "defaultValue": 1,
  "required": true
}

Checkbox

The Checkbox type represents a single true/false option, visualized as a checkbox.

{
  "key": "showLegend",
  "type": "Checkbox",
  "label": "Show legend",
  "defaultValue": true
}

Selection

The Selection type represents a single selection out of multiple options, visualized as a dropdown list.

{
  "key": "objectFit",
  "type": "Selection",
  "label": "Object fit",
  "options": [
    { "value": "cover", "label": "Cover entire box (maintains aspect ratio)" },
    {
      "value": "contain",
      "label": "Contained in box (maintains aspect ratio)"
    },
    { "value": "fill", "label": "Fill (stretch to fit)" },
    { "value": "scale-down", "label": "Scale down (maintains aspect ratio)" },
    { "value": "none", "label": "None" }
  ],
  "defaultValue": "cover"
}

MaterialIcon

The MaterialIcon type represents a string that can be used to identify an official Google Material Design icon.

{
  "key": "icon",
  "label": "Icon",
  "type": "MaterialIcon"
},

Color

The Icon type represents a string that can be used to identify a color in hexadecimal format.

{
  "key": "color",
  "label": "Color",
  "type": "Color",  
  "defaultValue": "#FF0000",
},

Image

The Image type represents a URL for an uploaded image file that can be used as a source to display that image.

{
  "key": "image",
  "label": "Image",
  "type": "Image"
},

RawMetric

The RawMetric type represents the specification of a request for raw logging data from the Cloud Logging database.

The allowedTypes subfield specifies which types of metric values are allowed in this input. The field is an array, with one or more of the following string values: "bool", "int", "float", "str". Note: If the subfield is not specified, or has value null or [], then all types are considered allowed.

{
  "key": "metric",
  "label": "Raw metric",
  "type": "RawMetric",
  "allowedTypes": ["int", "float"]
}

AggregatedMetric

The AggregatedMetric type represents the specification of a request for aggregated logging data from the Cloud Logging database.

The allowedTypes subfield specifies which types of metric values are allowed in this input. The field is an array, with one or more of the following string values: "bool", "int", "float", "str". Note: If the subfield is not specified, or has value null or [], then all types are considered allowed.

{
  "key": "metric",
  "label": "Aggregated metric",
  "type": "AggregatedMetric",
  "allowedTypes": []
}

LiveMetric

The LiveMetric type represents the specification of a request for live logging data directly from the router.

The allowedTypes subfield specifies which types of metric values are allowed in this input. The field is an array, with one or more of the following string values: "bool", "int", "float", "str". Note: If the subfield is not specified, or has value null or [], then all types are considered allowed.

{
  "key": "temperature",
  "label": "Temperature",
  "type": "LiveMetric",
  "allowedTypes": ["str"]
}

Group

Groups let components structurally combine multiple configurable inputs. For example to configure a graph for a data variable and a line pattern. It is particularly useful in combination with a List type, such that a Page manager can multiple graph lines, each with their own data variable and line pattern.

A Group can have two appearances, expanded and summarized. In the expanded mode, all child inputs are shown at the same level as the group. In summary mode, child inputs are shown in a dialog window.

  • children
    The required children field specifies the inputs in the group.

  • summary
    The optional summary field specifies how a group should be summarized. It has two subfields, label and colorField. The label field contains a Mustache template string, with the tags referring to the text values of the child inputs. The optional colorField field specifies which child input should be used to color the summary.

{
  "key": "graphLine",
  "type": "Group",
  "label": "Graph Line",
  "summary": {
    "label": "{{name}}",
    "colorField": "alternate"
  },
  "children": [
    { "key": "name", "type": "String", "label": "Name" },
    { "key": "color", "type": "Color", "label": "Color" },
    { "key": "alternate", "type": "Color", "label": "Alternate color" },
    {
      "key": "metric",
      "type": "RawMetric",
      "label": "Data Metric"
    }
  ]
}

List

Lists allow components to offer a dynamic number of configurable inputs. For example to show a dynamic list of device properties that is configurable by a Page manager.

The required itemType field specifies the type of items in the list.

{
  "key": "properties",
  "type": "List",
  "label": "Device Properties",
  "itemType": {
    "key": "property",
    "type": "Text",
    "label": "Device property",
    "placeholder": "Enter the device property name"
  }
}