# Supported components

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

<table><thead><tr><th width="235.33333333333331">Component</th><th width="373">Description</th><th>Main Features</th></tr></thead><tbody><tr><td><p>text field </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FmTPwys4zXTW8awfF6WSK%2Fimage.png?alt=media&#x26;token=39f0a20c-1f2d-490b-bdad-7aec320d9d5f" alt=""></p></td><td>an input field where typing a text</td><td><ul><li>trim (no spaces on the left or right), helpful for codes</li><li>upper case, helpful for codes</li><li>max length</li><li>mandatory</li></ul></td></tr><tr><td><p>password </p><p><strong>(Form panel ONLY</strong>) </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FPCcGrB8FzG75ROTVYaNd%2Fimage.png?alt=media&#x26;token=3c39a234-d6b1-4ba4-9c98-224ade6665b5" alt=""></p></td><td>an input field where typing a password; real characters are not shown, instead a * is painted</td><td><ul><li>max length</li><li>mandatory</li></ul></td></tr><tr><td>text area <img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FM5FP26tjfdnY8qzzrama%2Fimage.png?alt=media&#x26;token=88c5e9f5-7a39-4d84-ab12-2c66cf4af0c1" alt=""></td><td>a multi-line input field where typing plain text (no HTML)</td><td><ul><li>max length</li><li>mandatory</li></ul></td></tr><tr><td><p>HTML Editor</p><p><strong>(Form panel ONLY</strong>) </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2Fg9tLca0LWTtkeeiOAafl%2Fimage.png?alt=media&#x26;token=011c0f98-f121-43d2-8760-5bcf7977865f" alt=""> </p></td><td>a multi-line input field where typing rich text, through a toolbar supporting text styles (size, alignment, etc)</td><td><ul><li>max length</li><li>mandatory</li></ul></td></tr><tr><td><p>HTML  </p><p><strong>(Form panel ONLY)</strong></p></td><td>a box where showing HTML retrieved from the server side (e.g. to show an iframe where embedding a PDF or an image)</td><td></td></tr><tr><td><p>number/currency field</p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2Fk9Z8Qzcx0aEg8hSbc6Fx%2Fimage.png?alt=media&#x26;token=d82e8aa9-abbf-495f-bcf0-9955590a23de" alt=""> </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FsAX0dFJjPdUvKMgJ0PJn%2Fimage.png?alt=media&#x26;token=4fac5312-6f99-4b25-a932-4458e5e51c46" alt=""></p></td><td>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</td><td><ul><li>number of decimals</li><li>number format (grouping symbol, decimal symbol, number of decimals to show always)</li><li>currency symbol on the left</li><li>min/max number</li><li>mandatory</li></ul></td></tr><tr><td><p>date field</p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FQG60yEKYSvPrhzlAPGSz%2Fimage.png?alt=media&#x26;token=f745bcf9-1703-4e38-b6f3-c38e3a8ea559" alt=""> </p></td><td>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</td><td><ul><li>date format</li><li>min/max date</li><li>mandatory</li></ul></td></tr><tr><td>date + time field <img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FBQHztAC5wgoxIXCkjTA6%2Fimage.png?alt=media&#x26;token=ab7a9a27-6d93-4c4f-ba8c-f86c3c6f48d3" alt=""></td><td>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</td><td><ul><li>date time format</li><li>min/max date </li><li>mandatory</li></ul></td></tr><tr><td>range date <img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FHyMrRhzBfsk6Iu6JQRr6%2Fimage.png?alt=media&#x26;token=3123bf87-33f6-4142-a9d9-5b668aacbca3" alt=""></td><td><p>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. </p><p>See <a href="https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/range-date-filter">https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/range-date-filter</a></p></td><td><ul><li>date time format</li><li>min/max date</li><li>mandatory</li></ul></td></tr><tr><td>time field</td><td>an input field where typing a  time having a specific format depending on the language</td><td><ul><li>mandatory</li></ul></td></tr><tr><td><p>static combo box </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FDfKV9w8ATDCGXDinLOe6%2Fimage.png?alt=media&#x26;token=ebaef97d-086f-4f6a-a8b0-1f2c916933c1" alt=""></p></td><td>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</td><td><ul><li>items depending on the language</li><li>autocompletion</li><li>mandatory</li></ul></td></tr><tr><td><p>dynamic combo box </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FOkGWnpNaexo0VjTXEPDQ%2Fimage.png?alt=media&#x26;token=204d1aa5-d454-4ab7-9575-3a65afe27958" alt=""></p></td><td>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</td><td><ul><li>items depending on the language</li><li>autocompletion</li><li>pagination</li><li>mandatory</li></ul></td></tr><tr><td>multi value combo box <strong>(filter panel ONLY)</strong> <img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FkcThra9vJq0376HaNzfu%2Fimage.png?alt=media&#x26;token=d233277b-b8b5-487b-bd86-068b5a59d809" alt=""></td><td><p>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. </p><p>See <a href="https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/multi-value-combobox-filter">https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/multi-value-combobox-filter</a></p></td><td><ul><li>items depending on the language</li><li>autocompletion</li></ul></td></tr><tr><td>image combo box</td><td>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</td><td></td></tr><tr><td><p>smart filter </p><p><strong>(Filter panel ONLY)</strong></p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FewzeZtVnU58NMlUGJ2FE%2Fimage.png?alt=media&#x26;token=8bef6fc3-0845-4528-9380-28fa4195579f" alt=""></p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FrGTyFbjeA5ZsX0XtHOho%2Fimage.png?alt=media&#x26;token=32aae21c-7b8f-4b0c-ac97-487534f43dc0" alt="">  </p></td><td><p>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. </p><p>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.</p><p>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. </p><p>See: <a href="https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/smart-filter">https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/smart-filter</a></p></td><td><ul><li>the combobox items can contain an image and a text (depending on the language)</li></ul></td></tr><tr><td><p>lookup code button<img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FbVe4uxi8SeoFn8eKs6Ka%2Fimage.png?alt=media&#x26;token=a57279fe-1da1-4d49-b017-b0f547f2c93e" alt=""> </p><p> </p></td><td><p>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). </p><p>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)</p></td><td><ul><li>trim+uppercase code validation</li><li>auto retrieval of other text fields, automatically filled out</li><li>filtering/sorting conditions + pagination applicable to the lookup grid</li><li>any number of columns in the lookup grid</li><li>lookup grid title is customizable</li><li>mandatory</li></ul></td></tr><tr><td><p>lookup button</p><p> <img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FGOIbVX4rHErdftOcKxim%2Fimage.png?alt=media&#x26;token=c144ec07-7178-49b7-b12c-51d3323668a2" alt=""></p></td><td>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)</td><td><ul><li>auto retrieval of other text fields, automatically filled out</li><li>mandatory</li><li>lookup grid title is customizable</li><li>any number of columns in the lookup grid</li><li>filtering/sorting conditions + pagination applicable to the lookup grid</li></ul></td></tr><tr><td><p>lookup multi-code button <strong>(Filter panel ONLY)</strong> </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2F4KZKPG6WkqSPIhhlud3H%2Fimage.png?alt=media&#x26;token=566b32fd-70a7-4056-a8aa-ec7c58c8574f" alt=""> </p></td><td><p>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.</p><p>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). </p><p>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. </p><p>It also contains a second button to clear up all the selected codes.</p></td><td><ul><li>auto retrieval of other text fields, automatically filled out</li><li>mandatory</li><li>lookup grid title is customizable</li><li>any number of columns in the lookup grid</li><li>filtering/sorting conditions + pagination applicable to the lookup grid</li></ul></td></tr><tr><td><p>multi-value tree </p><p><strong>(Filter panel ONLY)</strong> <img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FJeRBmPgu5L2gwnPFHzKb%2Fimage.png?alt=media&#x26;token=d75a6a29-75fb-4142-82da-086237170286" alt=""></p></td><td>similar to the previous one, but the lookup button opens a tree instead of a grid.</td><td>similar to the previous one</td></tr><tr><td></td><td>See <a href="https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/multi-value-tree-filter">https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/multi-value-tree-filter</a></td><td></td></tr><tr><td>tree lookup</td><td>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</td><td></td></tr><tr><td><p>checkbox</p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2F0M7rt769lmlucA1OWKzN%2Fimage.png?alt=media&#x26;token=a585942b-2f4b-4ba9-8576-6d5ec5ff3c2d" alt=""></p></td><td>a switcher used when there is only one condition to select/unselect</td><td><ul><li>label depending on the language</li><li>the code behind the scenes can be set with two alternative values (selected/not selected)</li></ul></td></tr><tr><td><p>radiobutton </p><p><strong>(Form panel ONLY)</strong> <img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FkUQRgxV9QtWHAhL21gir%2Fimage.png?alt=media&#x26;token=88d39d79-a146-47f1-9cff-afd493e3c425" alt=""></p></td><td>to use when there is a group of radio buttons and one only of those buttons can be selected</td><td><ul><li>label depending on the language</li><li>the code behind the scenes can be set for each radio button</li></ul></td></tr><tr><td><p>label </p><p><strong>(Form panel ONLY)</strong></p></td><td>a (multiline) text to show, helpful when the text is always read  only</td><td><ul><li>text depending on the language</li><li>multi-line support</li><li>HTML support</li></ul></td></tr><tr><td><p>button </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FThnHN5lQo1WPDuRlec0g%2Fimage.png?alt=media&#x26;token=77649872-2b5e-427e-a687-2471723418d0" alt=""></p></td><td>a clickable button</td><td></td></tr><tr><td>image</td><td>an image to show, starting from an URL retrieved from the server</td><td></td></tr><tr><td><p>file selector </p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FI5EW9FPYDElc3hMjKU5g%2Fimage.png?alt=media&#x26;token=12ed91fb-fe62-4947-b290-d52343ec0356" alt=""></p></td><td><p>a button whose click opens a popup showing buttons to upload, downloads, preview a file.</p><p>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.</p></td><td><ul><li>file filtering by file type (e.g. .txt, .xm, .png, etc.)</li><li>history support</li><li>upload, download, preview buttons</li><li>mandatory</li></ul></td></tr><tr><td>image selector</td><td><p>it is composed of two parts: - an image preview</p><p>- a button whose click opens a popup showing buttons to upload, downloads, preview the image.</p><p>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</p></td><td><ul><li>image filtering by file type (e.g. .gif, .png, etc.)</li><li>history support</li><li>upload, download, preview buttons</li><li>mandatory</li></ul></td></tr><tr><td><p>progress bar</p><p><img src="https://4214754289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AJ8EgXTkoN9U07%2Fuploads%2FO7bP1MMOJbidfIx7hgIA%2Fimage.png?alt=media&#x26;token=727251bf-8905-4230-8111-44985dd88f57" alt=""> </p></td><td>a progress bar showing a colored bar</td><td><ul><li>min/max values</li><li>bar color</li><li>3 ranges for red/yellow/green sub-bars and related colors</li></ul></td></tr></tbody></table>
