Custom UI JS-API reference

This section provides the JavaScript API specification for creating custom UIs in HTML. See below for instructions on creating a custom UI in HTML.

Create Custom UI: Create Definition File Using HTML

Callback Functions#

When the parameter settings dialog is displayed, and when you save and close the settings, you need callback functions to exchange parameter information with the main UI screen of SpeeDBee Synapse.

Define the two functions described below, onLoad and onSave, in JavaScript within a custom UI (HTML). They are called from the main UI screen of SpeeDBee Synapse.

onLoad ... Custom UI load hook#

Hook function called when the custom component settings dialog is displayed to the user

Definition

onLoad?: (editable: boolean, parameter: {}, newComponent: boolean, componentId?: string, locale: string) => Promise<void>;

Arguments

editable: True to allow editing of the currently displayed settings dialog, or false otherwise
parameter: Saved parameter object
newComponent: True when the component is newly created, or false when it is updated
componentId: ID of the target component instance
locale: Use ja for Japanese, en for English, etc., depending on the currently selected language settings.

Return value

None

Description

This property registers a function to be called when the custom component settings dialog is displayed to the user. This is required to retrieve the saved parameters, so be sure to register it as follows.

window.customUiLib.onLoad = function (editable, parameter, newComponent, componentId, locale) {
  :
};

The previously saved parameter object can be received as an argument of this function. Set the initial values in the input boxes in the HTML based on this object.

In Run Mode, editable is false. In this case, take measures, such as making the input items inactive, so that the user cannot change the settings.

Otherwise, the user can change the values on the screen. However, the parameters still cannot be saved.

The fourth argument, componentId, can be used as an argument when using the API in the window.customUiLib.api object. However, when creating a new component, componentId will be undefined because the component has not yet been created.

The fifth argument, locale, passes the code for the currently used language settings (for example, ja for Japanese, en for English, e.g.). Every time the custom component's settings dialog appears, it fetches updated information. This enables dynamic multilingual UI support. If multilingual support is not required, this argument can be ignored.

onSave ... Parameter save hook#

Hook function that is automatically called when the user presses the Save button to save parameters in the custom component settings dialog

Definition

onSave?: () => Promise<{} | null>;

Arguments

None

Return value

null: Returns null to cancel saving parameters.
{}: Returns the parameters to be saved.

Description

This function is automatically executed when the user presses the Save button. Implement the processing to be performed at the time of saving as one function and register it to onSave as follows.

window.customUiLib.onSave = function () {
  :
  return ..;
};

When this function is called, the parameter information to be saved must be returned as an object. The object must be data that can be converted to JSON. The returned object is saved as parameters of the relevant component and the settings dialog is closed.

If null is returned, saving the parameters is canceled. In this case, the dialog is not closed. Saving can be cancelled in this way if, for example, a problem is found with the input after the check of the format of the data entered by the user on the custom UI screen.

However, since the cancellation is not automatically notified to the user, implement error display, etc. in the HTML of the custom UI to show the cause of the cancellation of saving.

SpeeDBee Synapse Settings Acquisition Functions#

The window.customUiLib.api object defines utility functions that can retrieve various information set on the SpeeDBee Synapse screen. Although you are not required to use these functions, you can improve user convenience and operability for input assistance and other purposes by using them appropriately.

getComponentbases ... Get componentbase list#

Function to get a list of componentbase information

Definition

window.customUiLib.api.getComponentbases: () => Promise<ComponentbaseResponse[]>;

Arguments

None

Return value

ComponentbaseResponse[]: List of componentbase information

Description

This function gets componentbase information in a list.

getPanels ... Get panel list#

Function to get a panel list

Definition

window.customUiLib.api.getPanels: () => Promise<PanelResponse[]>;

Arguments

None

Return value

PanelResponse[]: List of panel information

Description

This function gets information of all panels in a list.

getPanel ... Get panel information#

Function to get panel information

Definition

window.customUiLib.api.getPanel: (id: number) => Promise<PanelResponse>;

Arguments

No	Item	Description
1	`id` number	Panel ID

Return value

PanelResponse: Panel information

Description

This function gets the panel information for the specified panel ID.

getComponents ... Get component list#

Function to get a component list

Definition

window.customUiLib.api.getComponents: (panelId?: number) => Promise<ComponentResponse[]>;

Arguments

No	Item	Description
1	`panelId` *number	undefined*

Return value

ComponentResponse[]: Component list

Description

This function gets component information in a list.
You can specify a panel ID to get only the components placed on that panel.

getComponent ... Get component information#

Function to get component information

Definition

window.customUiLib.api.getComponent: (id: string) => Promise<ComponentResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

ComponentResponse: Component information

Description

This function gets component information for the specified component ID.

getInPort ... Get inport setting#

Function to get inport setting

Definition

window.customUiLib.api.getInPort: (id: string) => Promise<InportResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

InportResponse: Inport setting of the component

Description

This function gets the inport setting of the component.
The inport setting includes settings for incoming data, aggregation, delay time, and events.

getInPortData ... Get IN Port information#

Function to get information about the data received at the IN Port

Definition

window.customUiLib.api.getInPortData: (id: string) => Promise<PortDataResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

PortDataResponse: Information of the data received at the IN Port of the component

Description

This function gets information about the data received at the IN Port of the component.
The IN Port information includes information such as the type of the incoming data, whether it is an array, etc.

getInPortDataValue ... Get IN Port data#

Function to get the data received at the IN Port

Definition

window.customUiLib.api.getInPortDataValue: (id: string) => Promise<PortDataValueResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

PortDataValueResponse: Data received at the IN Port of the component

Description

This function gets the data and timestamp received at the IN Port of the component.
The value that can be acquired is the most recent one for each data.

getSystemPort ... Get system port setting#

Function to get system port setting

Definition

window.customUiLib.api.getSystemPort: (id: string) => Promise<OutportResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

OutportResponse: System port setting of the component

Description

This function gets the system port setting of the component.
The system port setting includes settings for the storage, conversion, conditions of the data to be emitted, and added comments.

getSystemPortData ... Get SYSTEM Port information#

Function to get information about the data emitted from the SYSTEM Port

Definition

window.customUiLib.api.getSystemPortData: (id: string) => Promise<PortDataResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

PortDataResponse: Information of the data emitted from the SYSTEM Port of the component

Description

This function gets information about the data emitted from the SYSTEM Port of the component.
The SYSTEM Port information includes information such as the type of data to be emitted, whether it is an array, etc.

getSystemPortDataValue ... Get SYSTEM Port data#

Function to get the latest data emitted from the SYSTEM Port

Definition

window.customUiLib.api.getSystemPortDataValue: (id: string) => Promise<PortDataValueResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

PortDataValueResponse: Data emitted from the SYSTEM Port of the component

Description

This function gets the data and timestamp emitted from the SYSTEM Port of the component. The value to be acquired is the most recent one for each data.

getOutPort ... Get outport setting#

Function to get outport setting

Definition

window.customUiLib.api.getOutPort: (id: string) => Promise<OutportResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

OutportResponse: Outport setting of the component

Description

This function gets the outport setting of the component.
The outport setting includes settings for the storage, conversion, conditions of the data to be emitted, and added comments.

getOutPortData ... Get OUT Port information#

Function to get information about the data emitted from the OUT Port

Definition

window.customUiLib.api.getOutPortData: (id: string) => Promise<PortDataResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

PortDataResponse: Information of the data emitted from the OUT Port of the component

Description

This function gets information about the data emitted from the OUT Port of the component.
The OUT Port information includes information such as the type of data to be emitted, whether it is an array, etc.

getOutPortDataValue ... Get OUT Port data#

Function to get the latest data emitted at the OUT Port

Definition

window.customUiLib.api.getOutPortDataValue: (id: string) => Promise<PortDataValueResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to get

Return value

PortDataValueResponse: Data emitted from the OUT Port of the component

Description

This function gets the data and timestamp emitted from the OUT Port of the component. The value to be acquired is the most recent one for each data.

runMethod ... Run component instance method#

Function to execute the component instance method.

Caution

You must be a Manager or higher to execute a method.

Definition

runMethod: (id: string, methodName: string, parameter: string | object | null) => Promise<ComponentMethodResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the component to execute
2	`methodName` string	Name of the method to get
3	`parameter` *string	object

Return value

ComponentMethodResponse: Result and return value of the executed instance method

Description

This function executes the instance method implemented in the component.
For information about instance methods, see .

getFlowlinks ... Get flowlink list#

Function to get a flowlink list

Definition

window.customUiLib.api.getFlowlinks: (componentId?: string) => Promise<FlowlinkResponse[]>;

Arguments

No	Item	Description
1	`componentId` string	ID of the component to get (all flowlinks if not specified)

Return value

FlowlinkResponse[]: Flowlink list

Description

This function gets flowlink information.
If a component ID is specified, the flowlinks connected to that component are acquired, otherwise all flowlinks are acquired.

getFlowlink ... Get flowlink information#

Function to get flowlink information

Definition

window.customUiLib.api.getFlowlink: (id: string) => Promise<FlowlinkResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the flowlink to get

Return value

FlowlinkResponse: Flowlink information

Description

This function gets flowlink information by ID search.

getFlowlinkFilter ... Get flowlink filter information#

Function to get the filter information set for a flowlink

Definition

window.customUiLib.api.getFlowlinkFilter: (id: string) => Promise<FlowlinkFiltersResponse>;

Arguments

No	Item	Description
1	`id` string	ID of the flowlink to get

Return value

FlowlinkFiltersResponse: Flowlink information

Description

This function gets the filter information set for the flowlink by ID search.

Types#

ComponentbaseResponse#

Componentbase information registered in SpeeDBee Synapse

Definition

type ComponentbaseResponse = {
    id: string,
    name: string,
    tag: string,
    inports: number,
    outports: number,
    required_point: number,
    error_types: {
        id: string,
        parameter_names: string[],
    }[],
}

Configuration

No	Item	Description
1	`id`	Componentbase ID
2	`name`	Componentbase name
3	`tag`	Tag
4	`inports`	Number of IN Ports
5	`outports`	Number of OUT Ports
6	`required_point`	Number of points required at startup
7	`error_types`	List of error type objects

error_types

No Item Description

1 id Error ID

2 parameter_names Parameter name

Description

This is a data type for the base information of each component.
A list can be acquired as a return value when getComponentbases is used.

PanelResponse#

Panel information

Definition

type PanelResponse = {
    id: number,
    order: number,
    name: string,
    type: string,
    options: any,
    components: any[],
};

Configuration

No	Item	Description
1	`id`	Panel ID
2	`order`	Display order
3	`name`	Name
4	`type`	Kind
5	`options`	Options
6	`components`	Component information

Description

This is a data type for each registered panel.
It can be acquired as a return value when getPanels or getPanel is used.

ComponentResponse#

Component information

Definition

type ComponentResponse = {
    id: string,
    baseid: string,
    name: string,
    enable: boolean,
    parameter: any | undefined,
    options: any | undefined,
};

Configuration

No	Item	Description
1	`id`	Component ID
2	`baseid`	Componentbase ID
3	`name`	Name
4	`enable`	Enable/Disable
5	`parameter`	Parameters
6	`options`	Options

Description

This is a data type for getting each component set by the user.
It can be acquired as a return value when getComponents or getComponent is used.

InportResponse#

Inport setting

Definition

type InportResponse = {
    setting_option: 'reception' | 'regexp',
    column_data: {
        target: {
            source_name: string,
            data_name: string,
            data_types?: string[],
        }[],
        raw_data: boolean,
        typical_value?: string,
        basic_statistics: string[],
    }[],
    window: {
        window_type: 'tumbling' | 'value_change',
        time_span?: number,
        columns?: {
            source_name: string,
            data_name: string,
            data_types: string[]
        },
        max_duration?: number
    },
    delaytime: number,
    event?: {
        source_name: string,
        data_name: string,
        pre_event_time: number,
        post_event_time: number
    },
    column_order_output?: {
        specify_columns: {
            source_name: string,
            data_name: string,
            outputname?: string,
        }[],
        order_type: string
    }
};

Configuration

No	Item	Description
1	`setting_option`	Whether to filter by regular expression or by data
2	`column_data`	Input data information
3	`window`	Window settings
4	`delaytime`	Delay time (nanoseconds)
5	`event`	Settings for turning data to the IN Port ON/OFF in response to an external event
6	`column_order_output`	Settings for sorting data coming into the IN Port and aliases

column_data

No Item Description

1 target Pattern of source and data to be aggregated

2 raw_data Use of raw data

3 typical_value Setting of representative values. Newest value (newer) or oldest value (older)

4 basic_statistics Basic stats data

target

No Item Description

1 source_name Regular expression indicating the pattern of the target component name

2 data_name Regular expression indicating the pattern of the target data name

3 data_types List of the target data types (omission/null matches any type)

window

No Item Description

1 window_type Window type

2 time_span Search time width (nanoseconds)

3 columns List of the target data information

4 max_duration Maximum window time width (nanoseconds)

columns

No Item Description

1 source_name Regular expression indicating the pattern of the target component name

2 data_name Regular expression indicating the pattern of the target data name

3 data_types List of the target data types (omission/null matches any type)

event

No Item Description

1 source_name Name of the component that generates the column for the external event

2 data_name Column name of the external event (only bool type is valid)

3 pre_event_time Pre-event time (nanoseconds)

4 post_event_time Post-event time (nanoseconds)

column_order_output

No Item Description

1 specify_columns Sort order and output name

2 order_type Sort order of data that is not specified

specify_columns

No Item Description

1 source_name Component name

2 data_name Data name

3 outputname Output name assigned to the column

Description

This is a data type for the inport setting of the component.
It can be acquired as a return value when getInPort is used.

OutportResponse#

System port, outport setting

Definition

type OutportResponse = {
    setting_option: 'reception' | 'regexp';
    pattern_settings: {
        target: {
            source_name?: string,
            data_name: string,
            data_types?: string[],
        }[],
        storage_type: string,
        file_index: boolean,
        conversion?: {
            data_type?: string,
            expression?: string,
        },
        value_filter?: {
            expression: string,
        },
        comment?: string,
    }[];
};

Configuration

No	Item	Description
1	`target`	Pattern definition for specifying target data
2	`storage_type`	Storage
3	`file_index`	Flag to create a search index
4	`conversion`	Conversion
5	`value_filter`	Conditions
6	`comment`	Comment

target

No Item Description

1 source_name Regular expression indicating the pattern of the target component name

2 data_name Regular expression indicating the pattern of the target data name

3 data_types List of the target data types (omission/null matches any type)

conversion

No Item Description

1 data_type Data type after conversion

2 expression Conversion expression

value_filter

No Item Description

1 expression Conditional expression

This is a data type for the outport setting of the component.
It can be acquired as a return value when getSystemPort or getOutPort is used.

PortDataResponse#

Information about the data received and emitted by the IN/OUT Ports

Definition

type PortDataResponse = {
    id: string;
    name: string;
    data?: {
        name: string;
        source?: string;
        column_type: string,
        sampling_rate?: number,
        data_type: string;
        data_array?: number;
    }[]
};

Configuration

No	Item	Description
1	`id`	Component ID
2	`name`	Name
3	`data`	Data information received at the IN Port

data

No Item Description

1 name Data name

2 source Component name

3 column_type Column type

4 sampling_rate Sampling rate

5 data_type Data type

6 data_array Array size

Description

This is a data type for the data received and emitted by the IN/OUT Ports of the component.
It can be acquired as a return value when getInPortData, getSystemPortData, or getOutPortData is used.

PortDataValueResponse#

Data received and emitted by the IN/OUT Ports

Definition

type PortDataValueResponse = {
    id: string;
    name: string;
    data?: {
        value: any | any[];
        timestamp?: number;
        name: string;
        source?: string;
        data_type: string;
        data_array?: number;
    }[]
};

Configuration

No	Item	Description
1	`id`	Component ID
2	`name`	Name
3	`data`	Data received at the IN Port

data

No Item Description

3 value Value

4 timestamp Timestamp (nanoseconds)

1 name Data name

2 source Component name

5 data_type Data type

6 data_array Array size

Description

This is a data type for the data received and emitted by the IN/OUT Ports of the component.
It can be acquired as a return value when getInPortDataValue, getSystemPortDataValue, or getOutPortDataValue is used.

ComponentMethodResponse#

Result after executing the instance method of component

Definition

type ComponentMethodResponse = {
    method_name: string,
    result: string | object | null
};

Configuration

No	Item	Description
1	`method_name`	Name of the executed function
2	`result`	Return value of the executed function

Description

This is a data type for the data returned after executing the instance method of the component.
The content of result depends on the implementation of the custom component, so implement the return value of the custom component according to the processing that is to be performed later.

FlowlinkResponse#

Flowlink information

Definition

type FlowlinkResponse = {
    id: string,
    source?: {
        id: string,
        port: number,
    },
    destination?: {
        id: string,
        port: number,
    }
};

Configuration

No	Item	Description
1	`id`	Flowlink ID
2	`source`	Connection source information
3	`destination`	Connection destination information

source, destination

No Item Description

1 id Port ID of the connection destination

2 port Port number

Description

This is a data type for the flowlink to which the component is connected.
It can be acquired as a return value when getFlowlinks or getFlowlink is used.

FlowlinkFiltersResponse#

Flowlink filter information

Definition

type FlowlinkFiltersResponse = {
    setting_option: 'reception' | 'regexp',
    pattern_settings: {
        target: {
            data_name: string,
            data_types?: string[]
        },
        pass: boolean,
    }[],
};

Configuration

No	Item	Description
1	`setting_option`	Whether to filter by regular expression or by data
2	`pattern_settings`	List of filter setting objects

pattern_settins

No Item Description

1 target Pattern definition for specifying target data

2 pass Flag to determine whether to pass the value

target

No Item Description

1 data_name Regular expression indicating the pattern of the target data name

2 data_types List of the target data types (omission/null matches any type)

Description

This is a data type for the filter set for the flowlink to which the component is connected. It can be acquired as a return value when getFlowlinkFilter is used.

No	Item	Description
1	`target`	Pattern of source and data to be aggregated
2	`raw_data`	Use of raw data
3	`typical_value`	Setting of representative values. Newest value (newer) or oldest value (older)
4	`basic_statistics`	Basic stats data

No	Item	Description
1	`source_name`	Regular expression indicating the pattern of the target component name
2	`data_name`	Regular expression indicating the pattern of the target data name
3	`data_types`	List of the target data types (omission/null matches any type)

No	Item	Description
1	`window_type`	Window type
2	`time_span`	Search time width (nanoseconds)
3	`columns`	List of the target data information
4	`max_duration`	Maximum window time width (nanoseconds)

No	Item	Description
1	`source_name`	Name of the component that generates the column for the external event
2	`data_name`	Column name of the external event (only bool type is valid)
3	`pre_event_time`	Pre-event time (nanoseconds)
4	`post_event_time`	Post-event time (nanoseconds)

No	Item	Description
1	`specify_columns`	Sort order and output name
2	`order_type`	Sort order of data that is not specified

No	Item	Description
1	`source_name`	Component name
2	`data_name`	Data name
3	`outputname`	Output name assigned to the column

No	Item	Description
1	`data_type`	Data type after conversion
2	`expression`	Conversion expression

No	Item	Description
3	`value`	Value
4	`timestamp`	Timestamp (nanoseconds)
1	`name`	Data name
2	`source`	Component name
5	`data_type`	Data type
6	`data_array`	Array size

No	Item	Description
1	`id`	Port ID of the connection destination
2	`port`	Port number

No	Item	Description
1	`target`	Pattern definition for specifying target data
2	`pass`	Flag to determine whether to pass the value