Supported components

Independently of where the component is located (a cell in a grid, form, filter), Platform supports the following components:

Component
Description
Main Features

text field

an input field where typing a text

  • trim (no spaces on the left or right), helpful for codes

  • upper case, helpful for codes

  • max length

  • mandatory

password

(Form panel ONLY)

an input field where typing a password; real characters are not shown, instead a * is painted

  • max length

  • mandatory

a multi-line input field where typing plain text (no HTML)

  • max length

  • mandatory

HTML Editor

(Form panel ONLY)

a multi-line input field where typing rich text, through a toolbar supporting text styles (size, alignment, etc)

  • max length

  • mandatory

HTML

(Form panel ONLY)

a box where showing HTML retrieved from the server side (e.g. to show an iframe where embedding a PDF or an image)

number/currency field

an input field where typing a number, either an integer or a decimal, with or without a currency symbol; number format depends on the language

  • number of decimals

  • number format (grouping symbol, decimal symbol, number of decimals to show always)

  • currency symbol on the left

  • min/max number

  • mandatory

date field

an input field where typing a date having a specific format depending on the language; the date can also be chosen starting from a popup where a month based calendar is prompted

  • date format

  • min/max date

  • mandatory

an input field where typing a date and time having a specific format depending on the language; the date can also be chosen starting from a popup where a month based calendar is prompted

  • date time format

  • min/max date

  • mandatory

two input fields where typing a couple of dates, in order to define a date interval; the date can also be chosen starting from a popup where a month based calendar is prompted.

See https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/range-date-filter

  • date time format

  • min/max date

  • mandatory

time field

an input field where typing a time having a specific format depending on the language

  • mandatory

static combo box

a combo box containing a static (prefixed) enumeration of values (e.g. Male/Famale or Yes/No); item descriptions depend on the language and behind the scenes a code is stored

  • items depending on the language

  • autocompletion

  • mandatory

dynamic combo box

a combo box containing an enumeration of values dynamically retrieved from the server (e.g. from a database table); item descriptions depend on the language and behind the scenes a code is stored. Not optimized for searches, sorting or large amount of data

  • items depending on the language

  • autocompletion

  • pagination

  • mandatory

a combo box containing an enumeration of values dynamically retrieved from the server (e.g. from a database table); item descriptions depend on the language and behind the scenes a code is stored. Helpful in filter panels to select multiple value to use to filter a grid/tree panel.

See https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/multi-value-combobox-filter

  • items depending on the language

  • autocompletion

image combo box

a combo box containing an enumeration of images dynamically retrieved from the server (e.g. from a database table); not optimized for large amount of images

smart filter

(Filter panel ONLY)

an input field where typing multiple texts; when typing a text, a combobox is shown below, in order to help the user choosing the desired text; each time a text is selected, it is converted to a tag.

On the right of the input field, where is also a special button to open an advanced filter, shown as a popup, containing a filter panel.

This filter is helpful when a grid or tree must be filtered by a list of values and only one filter is shown for filtering operations: the advanced filter will be opened only when needed.

See: https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/smart-filter

  • the combobox items can contain an image and a text (depending on the language)

an input text field where typing a code to validate; often it is combined with one or more other read only text fields, where reporting additional information retrieved after the code validation (e.g. corporate name after custom code validation).

It also contains a button whose click opens a popup containing a grid where showing all available codes, instead of typing one (when the code is unknown)

  • trim+uppercase code validation

  • auto retrieval of other text fields, automatically filled out

  • filtering/sorting conditions + pagination applicable to the lookup grid

  • any number of columns in the lookup grid

  • lookup grid title is customizable

  • mandatory

lookup button

a button whose click opens a popup containing grid where showing all available codes, instead of typing one (when the code is unknown). Helpful when there is not a code to type (validate)

  • auto retrieval of other text fields, automatically filled out

  • mandatory

  • lookup grid title is customizable

  • any number of columns in the lookup grid

  • filtering/sorting conditions + pagination applicable to the lookup grid

lookup multi-code button (Filter panel ONLY)

an input text field where typing one or more codes to validate and used later to filter the content of a grid or tree; when a code is validated, it is added to the "code list" and the input field is cleared up to allow the validation of other codes.

Often it is combined with one or more other read only text fields, where reporting additional information retrieved after the code validation (e.g. corporate name after custom code validation).

It also contains a button whose click opens a popup containing a grid where showing all available codes, instead of typing one (when the code is unknown); multiple selection is allowed.

It also contains a second button to clear up all the selected codes.

  • auto retrieval of other text fields, automatically filled out

  • mandatory

  • lookup grid title is customizable

  • any number of columns in the lookup grid

  • filtering/sorting conditions + pagination applicable to the lookup grid

multi-value tree

similar to the previous one, but the lookup button opens a tree instead of a grid.

similar to the previous one

tree lookup

a button whose click opens a popup containing a tree: nodes can be expanded and any node can be double clicked to select an item

checkbox

a switcher used when there is only one condition to select/unselect

  • label depending on the language

  • the code behind the scenes can be set with two alternative values (selected/not selected)

radiobutton

to use when there is a group of radio buttons and one only of those buttons can be selected

  • label depending on the language

  • the code behind the scenes can be set for each radio button

label

(Form panel ONLY)

a (multiline) text to show, helpful when the text is always read only

  • text depending on the language

  • multi-line support

  • HTML support

button

a clickable button

image

an image to show, starting from an URL retrieved from the server

file selector

a button whose click opens a popup showing buttons to upload, downloads, preview a file.

When clicking the upload button, a system window is shown, in order to select a file from the local file system; it can be used to upload a file to the server.

  • file filtering by file type (e.g. .txt, .xm, .png, etc.)

  • history support

  • upload, download, preview buttons

  • mandatory

image selector

it is composed of two parts: - an image preview

- a button whose click opens a popup showing buttons to upload, downloads, preview the image.

When clicking the upload button, a system window is shown, in order to select an image from the local file system; it can be used to upload an image to the server

  • image filtering by file type (e.g. .gif, .png, etc.)

  • history support

  • upload, download, preview buttons

  • mandatory

progress bar

a progress bar showing a colored bar

  • min/max values

  • bar color

  • 3 ranges for red/yellow/green sub-bars and related colors

Last updated