Input Options

EcoFlowJs provides a number of input options that can be used to configure the output or take data from the users.

A input option is basically a object that represents type of input and its specification.

Input Options Properties

Parameter	Type (Default)	Description
name	string	The name of the input.
label	string	The label for the input.
type	ModuleSpecsInputsTypes ("String")	The type of the input.
[hint]	string	The hint for the input type.
[required]	boolean	Indicates if the input is required.
[codeLanguage]	string ("javascript")	The programming language for the input. For more information documentation of react-monaco-editor here
[methods]	API_METHODS[] | ((value?: {[key: string]: any;}) => API_METHODS[] | Promise<API_METHODS[]>)	The methods for the input.
[radioValues]	string | string[] | ((value?: { [key: string]: any; }) => string | string[] | Promise<string | string[]>)	The values for radio buttons.
[pickerOptions]	string[] | ModuleSpecsInputsTypeOptions[] | ((value?: { [key: string]: any; }) => string[] | ModuleSpecsInputsTypeOptions[] | Promise<string[] | ModuleSpecsInputsTypeOptions[]>)	The options for a picker field.
[listBoxSorting]	boolean	Indicates if the list box should be sorted.
[defaultValue]	string | number | boolean | Date | string[] | {start: number, end: number} | ((value?: { [key: string]: any;}) => string | number | boolean | Date | string[] | {start: number, end: number})	The default value for the input field.

Fetching values

The values can be retrieved in the controller using the EcoContext.

For more information check the controller documentation here

Examples

Route

{
    name: "apiEndpoint",
    label: "API End point",
    type: "Route",
}

API End point

/

Methods

{
    name: "apiMethod",
    label: "Method",
    type: "Methods",
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
}

note

The methods parameter must present for the Method type.

Method

Select

Code

{
    name: "code",
    label: "Code",
    type: "Code",
    codeLanguage: "json"
}

Code

Loading...

Toggle

{
    name: "toggle",
    label: "Toggle",
    type: "Toggle",
}

Toggle

Date

{
    name: "date",
    label: "Date",
    type: "Date",
}

Date

Time

{
    name: "time",
    label: "Time",
    type: "Time",
}

Date

DateTime

{
    name: "datetime",
    label: "DateTime",
    type: "DateTime",
}

Date

Number

{
    name: "number",
    label: "Number",
    type: "Number",
}

Number

String

{
    name: "text",
    label: "String",
    type: "String",
}

String

HiddenString

{
    name: "password",
    label: "Hidden String",
    type: "HiddenString",
}

Hidden String

CheckPicker

{
    name: "check-picker",
    label: "Check Picker",
    type: "CheckPicker",
    pickerOptions: ["hello", "world", "yes", "No"],
}

Check Picker

Select

SelectPicker

{
    name: "select-picker",
    label: "Select Picker",
    type: "SelectPicker",
    pickerOptions: ["hello", "world", "yes", "No"],
}

note

The pickerOptions parameter must present for the SelectPicker type else will be considered as an empty array.

Select Picker

Select

Checkbox

{
    name: "checkbox",
    label: "Checkbox",
    type: "Checkbox",
}

Checkbox

Radio

{
    name: "radio",
    label: "Radio",
    type: "Radio",
    radioValues: ["hello", "world", "yes", "No"],
}

note

The radioValues parameter must present for the Radio type else will be considered as an empty array.

Radio

hello

world

yes

No

Range

{
    name: "range",
    label: "Range",
    type: "Range",
}

Range

to

ListBox

{
    name: "listbox",
    label: "ListBox",
    type: "ListBox",
}

ListBox

No ListBox available

TypeScript Properties

ModuleSpecsInputsTypes

type ModuleSpecsInputsTypes =
  | "Route" // Default value for Request Node Types
  | "DB_Selector" // Default value for DB Selectors
  | "Methods" // Request Node API Methods
  | "Code" // Code Editor Input Type
  | "Toggle" // Toggle Input Type
  | "Date" // Date Input Type
  | "Time" // Time Input Type
  | "DateTime" // Date Time Input Type
  | "Number" // Number Input Type
  | "String" // Text Input Type (DEFAULT VALUE)
  | "HiddenString" // Password Input Type
  | "CheckPicker" // List Picker Input Type
  | "SelectPicker" // Select Picker Input Type
  | "Checkbox" // Checkbox Input Type
  | "Radio" // Radio Input Type
  | "Range" // Range or Slider Input Type
  | "ListBox"; // List Box Input Type

API_METHODS

/**
 * Defines a type for API methods that can be used in HTTP requests.
 * Possible values are "GET", "POST", "PUT", "DELETE", and "PATCH".
 */
type API_METHODS = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";

ModuleSpecsInputsTypeOptions

interface ModuleSpecsInputsTypeOptions {
  /**
   * The label of the Select picker type.
   */
  label: string;

  /**
   * The value of the input type.
   */
  value: string;
}