User Guide
  • Introduction
  • Overview
    • About 4WS.Platform
      • Architecture
      • Enterprise Edition
      • Tech specs and requirements
      • Warp SDK
    • Creating a web application
  • Core features
    • Tables
    • SqlTool
    • Definition of Data models and Relations
      • Relations
      • Reverse Engineering
      • Custom Fields
    • Defining business components
      • What are business components
      • Business components to fill-in panels
      • Creating business components
        • By a datastore entity
        • By a MongoDB collection
      • Defining Custom Java Business component
    • Defining the UI
      • App Designer
        • App Designer Menu
        • Definition of additional data sources
        • Panel containers and layouts
          • Tab panel
          • Alternative panel
          • Accordion panel
          • Vertical orientation panel
          • Horizontal orientation panel
          • Columns panel
          • Table panel
          • Generic panel
          • Responsive panel
        • Window content
          • Grid Panel
          • Form Panel
          • Filter Panel
          • Tree Panel
          • Google Map Panel
          • Preview Panel (old Image panel)
          • Tree + Grid Panel
          • Image Gallery
        • Windows list
        • Panel definition
          • Columns properties
          • Controls properties
          • Filter properties
          • Supported components
        • Variables
        • Code selectors
          • When not to use a dynamic combo-box
        • Smart Filter and Advanced Filter
        • Multi Value Combobox Filter
        • Multi Value Tree Filter
        • Buttons
        • Translations
          • Translations about GUI components and internationalization settings
          • Data coming from database
          • Custom code and translations
        • Application Menu
        • Bulk import binded to a grid
        • Range Date Filter
      • Web Interpreter
        • Grid components
        • Detail forms
        • Other components
        • Other features
          • Chat
        • Global variables
          • Client-side global variables
          • Server global variables
        • Forgot Password
    • Working with users and roles
      • Rule for roles
      • Permissions Administrator
    • Wizard
      • How to add a checkbox grid to select one or more rows
      • How to load a second grid when clicking on a row from the first grid
      • How to load a form when clicking on a row of the grid
      • How to open a window when double clicking on a row of the grid
      • How to open a window with right click on the popup menu
      • How to open a window when pressing a button on the grid toolbar
      • How to load a grid after loading a form
      • How to open a window when pressing a button on the form toolbar
      • How to load a grid when clicking on a tree node
      • How to load a form when clicking on a tree node
    • Defining events
      • Panel events
      • Column events
      • Control events
      • Filter events
      • Timer events
      • Start-End event
    • Server-side Javascript & Web Service
      • Server-side Javascript
      • Grid component filled by a server-side JS
      • Detail component filled by a server-side JS
      • How to define a server-side JavaScript action
      • Web service
  • Setting up the environment
    • How to install
    • Application parameters
    • Global parameters
  • Modules
    • Reports & Charts
      • Jasper Report + iReport
      • Online report
      • Docx templating
      • Charts
      • Pivot Grid
      • Multidimensional pivot grid
      • Data Export from SQL query
    • SSO
      • Identity management in Platform
        • Identity management on the internal Platform database
        • Identity management based on Google SSO
      • LDAP
        • LDAP support
        • Identity management based on LDAP and database
        • Identity management based on an embedded LDAP server used by Alfresco and or Activiti
        • Identity management based on a remote LDAP server to connect to Platform on the cloud
        • Connecting an LDAP server to Activiti BPM
        • Connecting an LDAP server to Alfresco ECM
      • Google SSO
        • Google SSO
        • Google OAuth2
        • Identity management based on Google SSO
      • Custom SSO
      • Firebase
    • Mobile
      • Mobile introduction
      • Offline vs Online
        • Server side features
        • Server side functionalities
        • Server side Platform features
        • Mobile app features
      • Mobile side specifics
        • Customizations
          • Custom theme editor
        • App Menu
        • Window content
          • Detail scrollable form
          • Scrollable paginated grid
          • Constraint layout
          • Constraint panel
          • Collection grid view
          • Preview panel (mobile)
        • Form Controls
      • Reference guide
      • Cleaning up data
      • How to
      • App deployment
        • App deployment for the iOS platform
        • App deployment for the Android platform
      • Style properties
      • Appendix : Synchronization flow
      • Translations
    • GSuite
      • Introduction
      • Client-side integration
      • GMail
      • Calendar
      • Drive
      • Contacts
    • Google Cloud Platform
      • Datastore
        • Google Datastore Introduction
        • How to create Datastore entities
      • Google Cloud Storage
    • Scheduler
      • Scheduler Introduction
      • Process settings
        • How to define a sequence of consecutive processes
        • How to define a Custom Java Business component
        • How to define a Grid Data Import
        • How to define a server-side Javascript action
      • Email notifications
      • Process executions
      • Manually start a scheduled process
      • Process input parameters
    • Queue Manager
    • Log & Analysis
      • Application Log
      • Log statistics
      • App analyzer
      • Table log
      • Threads
      • Sessions and heap memory
      • Heap memory analysis
      • Access Log
      • Datastore statistics
      • Total monthly costs with Google Datastore
      • Service Monitoring
        • Introduction
        • Defining a service to monitor
        • Notifications setup
        • Events automatically managed by Platform
        • Remote Platform servers
        • Knowledge base
        • Adding log programatically
        • Searching for logged data
        • Use cases
    • File Management
    • Export and Import of Metadata
      • Application Metadata Management
    • Trigger writing operations
    • Audit
    • BPM
      • BPMN Introduction
      • BPMN main parts
      • Activiti Setup
      • Platform integration
        • Processes
        • Models
        • Process instances
        • To-do list
        • Process history
      • Process Web Modeler
        • Model Creation
          • Start-End Event
          • Gateways
        • Supported objects
        • Start tasks and user tasks
        • Form properties
          • Important notes
          • Property types
        • Service tasks
          • Web service
          • SQL Query
          • SQL statement
        • Mail task
        • Script task
          • Example : how to get a value previously read from a SQL query
          • Example : how to get the current process instance id
        • Timer events
        • Subprocess and Call Activiti
      • Utility methods available in Platform
        • How to start a process from a JavaScript action
        • How to complete a user task from a JavaScript action
      • An example
        • Processes
        • Instances
        • Activities
        • History
    • Embedded CMS
    • ECM
      • Alfresco
        • Alfresco Introduction
        • Integration between 4WS.Platform and Alfresco
          • Integration at GUI level
          • Integration at model level
          • Integration at authentication and authorizations level
          • Additional features
        • How to use 4WS.Platform and Alfresco together
          • Set the same Identity Management system
          • Define document types and aspects in Alfresco
          • Import the document types and aspects definitions in 4WS.Platform
          • Define document types and aspects in 4WS.Platform
          • Reverse engineering of document types or aspects
          • Definition of business components to fill-in panels
          • Definition of the GUI
          • Additional server-side services
        • Requirements
        • Current limits in 4WS.Platform - Alfresco integration
      • Archiflow
        • Setup
        • Archiflow artifacts
        • How to
    • Lotus Notes Migration Tool
    • NoSQL databases
      • MongoDB
        • MongoDB Introduction
        • Setting up the environment
        • How to create collections
        • How to create business components
        • How to create windows filled with data coming from MongoDB collections
        • Design rules
      • Google Datastore
        • Google Datastore Introduction
        • Setting up the environment
        • How to create entities
        • How to create business components
        • How to create windows filled with data coming from Datastore entities
        • Design rules
    • TensorFlow
    • Web Page Development
      • Pure Web Page Development
      • Google Material Design development
      • Appendix A - a complete example without any lib
      • Appendix B - a complete example with Google MD
    • Jira Integration
    • Platform for GAE
    • SQL errors management
    • Multidimensional pivot grid
    • Quality
      • Automated Web Service Testing
      • Automated unit testing
      • Source code static analysis using ESlint
      • Source code static analysis using SonarQube
  • Troubleshootings
  • Best practises
    • Database design
    • Database maintenance
    • Creating a Web app : common use cases
    • Creating a mobile app : common use cases
Powered by GitBook
On this page

Was this helpful?

  1. Core features
  2. Defining the UI
  3. App Designer
  4. Panel definition

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.

  • 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.

  • 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.

  • 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

PreviousFilter propertiesNextVariables

Last updated 2 years ago

Was this helpful?

text area

date + time field

range date

See

multi value combo box (filter panel ONLY)

See

See:

lookup code button

(Filter panel ONLY)

See

(Form panel ONLY)

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/multi-value-combobox-filter
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/multi-value-tree-filter