Field Components
  • 03 Mar 2024
  • 6 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

Field Components

  • Dark
    Light
  • PDF

Article summary

Field components are used when a user is required to input data into the screen in fields provided. The App Designer has several field components where users can select or provide data as input.

1) SELECT

The Select component provides a dropdown list where the user can select from the available options. If the Multiselect checkbox is selected, the user can select more than one option.

By default, the component provides two options. More options can be added based on the user requirements in the Options column of the properties section. If the data input is static, the options are added one by one. If the input needs to be dynamic and requires to be populated during runtime, then the Data Source option is selected and variables (Key, Label, and Selected values) are mapped.

PROPERTIES:

Select: ID, Title, MultiSelect, Selected, Enabled, Interactions, Tooltip, Text, Style, Layout
Options (with or without data source).
With data source: Data  (Link to Data Source), Filter
Data -Key (Link to Data Source), Label (Link to Data Source), Selected (Link to Data Source).

The Selected property, takes the user selected values to the mapped variable. If the Multiselect checkbox is enabled, the selected property takes in the list of values in a comma separated format. 

Select ThumbnailSelect on CanvasSelect Properties
select.pngSelect-new-part1Select-new-part2

2) TEXT AREA

Text Area provides an option for the user to input text inside a text box. The Rows property represents the number of rows of text visible to the user. This component is usually used when the user has to enter a few lines of text. If required, the maximum number of lines that can be entered by a user can be set by adding a behavior to the component.

PROPERTIES:

Text Area: ID ( Add Variable ), Title, Placeholder, Rows, Enabled, Data (Link to Data Source), Interactions, Tooltip, Text, Style, Layout

Text Area ThumbnailText Area on CanvasText Area Properties
text area.pngText-Updated-11july-1sthalfText_updated-11july-2ndhalf

3) TEXT INPUT

The Text input component allows a user input. It can be used to input texts like a text, number, date, password, or an email address. The maximum number of input characters that can be entered by a user can be set by adding a behavior to the component.

PROPERTIES:

Text Input: ID ( Add Variable ), Title, Type (Text, NumberPad, Date, Time, Password, Email), Placeholder, Enabled, Data (Link to Data Source), Interactions, Tooltip, Text, Style, Layout

ThumbnailText input on CanvasText input Properties
text input.pngTextinput-updated-1sthalfTextinput-updated-2ndhalf

4) RADIO BUTTON

The Radio button component allows the user to select only value from a predefined set of options. By default, the Radio Button offers two Options to select. More options can be added in the properties section.

If the data input is static, the options are added one by one. If the input needs to be dynamic and requires to be populated during runtime, then the Data Source option is selected and variables (Key, Label, and Selected values) are mapped.

PROPERTIES:

Radio Button: ID ( Add Variable ), Title, Enabled, Selected, Interactions, Tooltip, Text, Style, Layout
Options (with/without data source).
With data source: Data  (Link to Data Source), Data -Key(Link to Data Source), Label (Link to Data Source), Selected (Link to Data Source)

The Selected property, takes the user selected value to the mapped variable.

Radio button ThumbnailRadio button on CanvasRadio button Properties(without Data Source)Radio button Properties(with Data Source)
radio button.pngRadiobutton-updated1sthalfI_radio2ndhalfradiobutton-withdatasource-updated-1sthalfI_Radio2ndhalf-data

5) TOGGLE SWITCH

The Toggle switch is used to perform an ON/OFF (binary) operation. It helps to enable/disable features for a particular App.

PROPERTIES:

Toggle Switch: ID ( Add Variable ), Title, Enabled, Data (Link to Data Source), Interactions,

Tooltip, Text, Style, Layout

Toggle Switch ThumbnailToggle Switch on CanvasToggle Switch Properties
toggle switch.pngToggleswitch-updated-11july

6) SLIDER

The Slider component helps to establish a threshold for a particular functionality. The number of steps by which a slider can move and the max/min values is set in the properties section.

PROPERTIES:

Slider: ID ( Add Variable ), Title, Step, Min/Max, Enabled, Data (Link To Data Source), Interactions, Tooltip, Text, Style, Layout

Slider ThumbnailSlider on CanvasSlider Properties
slider.pngSlider-updated-1sthalfI_Slider2ndhalf

7) CHECKBOX

Checkbox provides options for users to select from multiple entries. Similar to the radio button component, two options are provided by default. More options can be added in the properties section. 

If the data input is static, the options are added one by one. If the input needs to be dynamic and requires to be populated during runtime, then the Data Source option is selected and variables (Key, Label, Check, and Selected values) are mapped. 

PROPERTIES:

Checkbox: ID ( Add Variable ), Title, Enabled, Selected, Interactions, Tooltip, Text, Style, Layout
Options (with/without data source),
With data source: Data (Link to Data Source), Data -Key(Link to Data Source), Label (Link to Data Source), Check (Link to Data Source).

The Selected property, takes the user selected values to the mapped variable. The selected key values are mapped to Selected variable in comma separated format. 

Checkbox ThumbnailCheckbox on CanvasCheckbox Properties (Without Data Source)Checkbox Properties (With Data Source)
checkbox.pngcheckbox-updated-1sthalfI_checkbox2ndhalfcheckbox-updaated-1sthalf-withdatasourceI_checkbox2ndhalf

8) FILE UPLOAD

The File upload component provides a gateway to upload a file from a device to EdgeReady drive. The source file name and file path can be mapped to variables through FileName and FilePath fields in the properties section.

Note

The allowed characters for filenames of the uploaded files are as follows:

  • Alphanumeric characters: [0-9][A-Z][a-z]
  • Special characters: '-', '_', '/', '.', and '\s')

The component consists of an Options property. Based on the selected value, the app user can upload a file in the following ways:

  • Default: When the app user clicks file upload, a pop-up appears in the UI - to open the 'Camera' or to select file from 'Gallery'.
  • Camera: When the app user clicks file upload, it redirects to the camera in the device without a prompt.
  • Gallery: When the app user clicks file upload, it redirects to the gallery folder in the device without a prompt.fileupload

PROPERTIES:

File Upload:  ID ( Add Variable ), Title, Placeholder, Enabled, FileName (Link to Data Source), FilePath (Link to Data Source), Interactions, Tooltip, Text, Style, Layout

File upload ThumbnailFile upload on CanvasFile upload Properties
file upload.pngFileupload-1Fileupload-2

9) IMAGE

The image component enables users to add images to the screen. On clicking the “Change Image” option or the Image on the canvas, the following popups appear to upload images.

Upload helps to upload new images.

choose file - image.png
The browse option helps to select images that are already pre-uploaded.
browse file for image.png

PROPERTIES:

Image: ID ( Add Variable ), Image(Image Name), Change Image, Data (Link to Data Source), Interactions, Tooltip, Style, Layout

Image ThumbnailImage on CanvasImage Properties
image.pngI_Image

10) AUTO COMPLETE

This component displays a list of matching entries based on the user input text before the user completes typing. Apart from this feature, it works like the Select component. If the Multiselect checkbox is selected, the user can select more that one option. If InlineSearch is enabled, the user input values are searched from the table variable linked to the Data property and the matching entries are displayed.

PROPERTIES:

Auto Complete: ID ( Add Variable ),Title, Placeholder, MultiSelect, InlineSearch, Enabled, Interactions, Tooltip, Text, Style, Layout
Options (with or without data source).
With data source: Data (Link to Data Source), Filter
Data -Key(Link to Data Source), Label (Link to Data Source), Selected (Link to Data Source), Search Text (Link to Data Source). 

The Selected property, takes the user selected values to the mapped variable. If the Multiselect checkbox is enabled, the selected property takes in the list of values in a comma separated format. 

Auto Complete ThumbnailAuto Complete on CanvasAuto Complete Properties
Autocomplete-iconAutocomplete-on canvasAutocomplete-new-part1Autocomplete-new-part2

11)RICH TEXT EDITOR

The Rich Text Editor component enables the user to enter text and apply different formats/style using the available options in the editor. The user can map a variable to the data and save it to the database. The input data is stored as html code in the database. 

Note
To retrieve the stored html data from database to UI during runtime, the developer has to just populate a variable with backend data and simply map the variable to a Text (Label) or Text Area component. The formatting will be displayed automatically. 

The following formatting options are available in the rich text editor:

Format ImageFormat
RTE-1stlineformatoptionsBold, Italic, Underline, Strikethrough, Monospace, Superscript, Subscript
RTE-2ndlineformatoptionsBlock Type(Headings(Normal, H1-H6, Blockquote, Code), Font Size, Font Type
RTE-3rdlineformatoptionsUnordered, Ordered, Indent, Outdent
Left, Center, Right, Justify, Color Picker
RTE-4thlineformatoptionsLink, Unlink, Embedded, Emoji, Undo, Redo

Note     
All special characters in the user entered text can be captured only by using an ESCAPE SQL function in the Integration builder.

PROPERTIES:

Rich Text Editor: ID ( Add Variable ), Enabled, Data (Link to Data Source), Interactions, Tooltip, Text, Style, Layout

Rich Text Editor ThumbnailRich Text Editor on CanvasRich Text Editor Properties

Richtexteditor_iconRichtexteditor_oncanvasRichTextEditor-updated-11july



Was this article helpful?

ESC

Eddy, a generative AI, facilitating knowledge discovery through conversational intelligence