📌
Creators studio
  • Aitheon Creators Studio Overview
  • Quick Start
  • Your First App
  • Create Project
  • Compose App
  • Run on Device
  • Release App
  • Publish App
  • Main Elements
    • Home Page
    • Sandboxes Page
    • App Projects
      • Application Example
    • Flow
    • Marketplace
  • Main Components Use
  • Basics
  • Standard Components
    • common
    • function
    • network
    • dashboard
    • sequence
    • parser
  • Aitheon Components
  • Writing Functions Guide
  • New Component Creation Tutorial
    • New Component Guide Overview
    • Your First Component
    • General Requirements
    • config.json
    • component.js
    • component.html
      • Main Definitions
      • Properties Edit Dialog
      • Help Text
    • app-component.json
    • Additional TS
    • Vue.js for UI Components Creation
    • Configuration Components
    • Component Styling Guide
  • Terminology
    • Terminology
Powered by GitBook
On this page
  • Defining a Config Component
  • remote-server.html
  • remote-server.js
  • Using a Config Component

Was this helpful?

  1. New Component Creation Tutorial

Configuration Components

PreviousVue.js for UI Components CreationNextComponent Styling Guide

Last updated 4 years ago

Was this helpful?

Some components need to share configuration. For example, the MQTT In and MQTT Out components share the configuration of the MQTT broker, allowing them to pool the connection. Configuration components are scoped globally by default, this means the state will be shared between flows.

You can find configuration components in the menu:

Defining a Config Component

A configuration component is defined in the same way as other components. There are two key differences:

  • its category property is set to config;

the edit template <input> elements have ids of node-config-input-<propertyname>.

remote-server.html

remote-server.js

In this example, the component acts as a simple container for the configuration - it has no actual runtime behavior.

A common use of config components is to represent a shared connection to a remote system. In that instance, the config component may also be responsible for creating the connection and making it available to the components that use the config component. In such cases, the config component should also handle the close event to disconnect when the component is stopped.

Using a Config Component

Components register their use of config components by adding a property to the defaults array with the type attribute set to the type of the config component.

As with other properties, the editor looks for an <input> in the edit template with an id of node-input-<propertyname>. Unlike other properties, the editor replaces this <input> element with a <select> element populated with the available instances of the config component, along with a button to open the config component edit dialog.

The component can then use this property to access the config component within the runtime.