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. Window content

Form Panel

In case of detail form or grid+detail form , the form definition panel is showed; through it the user has to define settings related to the form component:

  • form title (optional, can be hidden)

  • business component (for a single record loading) to link to the form; the fields specified in the select clause are used to automatically create the form controls; user can then show/hide each of them, as well as define many other control settings

  • form width and height

  • flags to show/hide border and to set panel opacity

  • flags to allow the CRUD operations, i.e. insert, update and delete (only if the data model linked to the selected business component is writable);

  • flags to define if the window embedding the detail form must be closed after the operations of insert/update/delete

  • flag to define if data loading is automatically performed when the form is showed

  • initial form mode, when the form is showed; grids and forms have 3 alternative modes: readonly, insert, edit; in insert mode all controls are cleared up

  • flag "copy enabled", used to show a "copy" button in the form toolbar, used to switch to insert mode the form, clear up all controls and then copy the values from the previous record to the new one

  • boolean javascript expression "disable when", to disable everything when the boolean condition is true

  • linked grid, used to manage some default operations, such as the grid reloading after inserting/updating the form content

  • number of columns and label length, used to define the labels+controls layout; it is also possible to arrange labels and controls by specifying the x and y coordinates for each of them.

  • flags "enable tag" and "enable rating" used only for detail form based on a business component that uses Alfresco service.

    Important note: when defining a form panel, a linked grid should be selected; in this way, Platform can automate many operations involved with the interaction between grid and form: automatic form opening when double clicking on a grid, form loading when selecting a row in grid, grid content automatic update when saving/deleting data in the form. However, it is also allowed not to set any linked grid when defining the form : in that case, the form is disconnected from any other panel and the previous automatisms are not available; that means that the required input parameters for the form must be explicitelly provided by the programmer, for example when opening a window containing that form. This is relatively easy to do, by passing to the openWindowXXX(args) instruction the required input parameters through the args obiect. If case the form (not linked to any grid) is directly opened starting from a menu item , there aren’t any input values passed to the window containg the form; it that case, the required input parameters must be defined within the window and before the creation of the form. That means that t he required input parameters must be defined through a javascript action linked to the "before render" event of the window , which can be defined in the window detail form.

When creating the form, a form toolbar is automatically showed on top of it; this toolbar always includes the reload button; the other buttons (insert, edit, delete and save/cancel) are showed/hidden according to the flags described above. These buttons change the current form mode, according to the following policy:

  • insert button, from readonly mode -> insert mode, insert/edit/delete buttons are disabled, save/cancel buttons are enabled

  • edit button, from readonly mode -> edit mode, insert/edit/delete buttons are disabled, save/cancel buttons are enabled

  • delete button, from readonly mode -> after confirming the operation, the selected records are deleted

  • cancel button, from insert/edit mode -> after confirming the operation, the form is switched to readonly mode and the content reloaded

  • save button, from insert/edit mode -> the form is switched to readonly mode if the saving operation has been performed successfully.

Control types

Through the "type" property for a control, it is possible to set a wide range of different controls.

Every control is usually composed of:

  • a label; it can be rendered either on the left or on top of the input field

  • an input field; according to the type, the field can be read-only (a button, an image type control) or editable or can miss at all (e.g. a label type control).

Supported types are:

  • Button - a clickable button; a click event can be linked to it, through Column Events folders

  • CMS File - it shows a clickable button to use when the form panel is used combined with the "Internal CMS module"; the button leads to a File Upload Dialog, to manage File upload/download/Preview and its automatic reading/writing into the CMS module; when this type is set, the Directory property must be set as well

  • Checkbox - the checkbox is clickable in insert/edit grid modes; when this type is set, also Positive/Negative value properties must be set

  • Counter based on a component - this type cannot be changed, since it is inherited by the bounded data model

  • Counter based on a table - this type cannot be changed, since it is inherited by the bounded data model

  • Date - it shows a date formatted according to the current user language; in insert/edit mode a calendar can be opened to choose the date

  • Date+Time - it shows a date+time formatted according to the current user language; in insert/edit mode, a calendar can be opened to choose the date

  • File Id - it shows a clickable button to use when the form panel is used combined with the "Alfresco ECM module"; the button leads to a File Upload Dialog, to manage File upload/download/Preview and its automatic reading/writing into the Alfresco module; when this type is set, the Directory property must be set as well

  • HTML - a read only control composed of a HTML area when showing any kind of HTML scriptlet; helpful when very complex content must be showed within the form

  • HTML Editor - an HTML editor to use to write formatted text (e.g. with bold, italics, fonts, etc)

  • Internal counter - this type cannot be changed, since it is inherited by the bounded data model

  • Label - a component composed of a label only: no input field is showed

  • Number - numeric input field, with a large variety of different properties; support for integer/decimal/currency values

  • Password - an input text field, where typed character are never showed in plain mode, but they are replaced by *

  • Radio button - a radio button is rendered; they are always used combined with other radio buttons

  • Sequence/Autoincrement - this type cannot be changed, since it is inherited by the bounded data model

  • Text - text input field

  • Text area - multi-line text field (not a very good choice for a grid...)

  • Time only - it shows a date formatted according to the current user language; a calendar can be opened to choose the date part

  • Tree Lookup - a "lookup button" is rendered: when clicking on the button a "lookup tree" is showed, in order to select a node from the list (the code to set in the cell); when filling this type, the Selector property must be set too

  • UUID - this type cannot be changed, since it is inherited by the bounded data model

  • Upload to directory - an old version type; it is recommended not to use it any more

PreviousGrid PanelNextFilter Panel

Last updated 3 years ago

Was this helpful?

Dynamic Combobox - a combobox where the user can type in a few characters to limit the items list or click on the trigger button to open the dropdown list, which is always paginated; data is retrieved through the server, where a business component is invoked: data is dynamic; when filling this type, the Selector property must be set too. See for more details.

File Path - it shows a file name (and a button in insert/edit mode) to choose a file; when filling this type, the Directory property must be set too. See for more details.

Image URL - it shows an image as a preview; the cell contains behind the scenes the image file name; this control cannot be "edited"; the image comes from the URL value contained in the control; when filling this type, the Directory property must be set too. See for more details.

Images Combobox - a combobox rendering an image; when the user chooses among a list of images rendered as combo items, a new image is set/showed in the control; when filling this type, the Selector property must be set too. See for more details.

Lookup Button - a "lookup button" is rendered and used to open a "lookup grid", in order to select a code from the list. See for more details.

Lookup Cod/Button - an "input text field" + "lookup button" are rendered; when losing focus from the input text field, the typed text is validated; when clicking on the button a "lookup grid" is showed, in order to select a code from the list. See for more details.

Progress bar - a readonly progress bar; it can support multi-color bands; see for more details.

Static Combobox - a combobox is showed and the user can type in a few characters to limit the items list or click on the trigger button to open the dropdown list, which contains a static predefine list of items (code+description, where description is translated according to the current user language); when filling this type, the Selector property must be set too. See for more details.

https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-10-code-selectors
https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-8-panels-list/3-1-8-4-controls-properties#files-management
https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-8-panels-list/3-1-8-4-controls-properties#files-management
https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-10-code-selectors
https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-10-code-selectors
https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-10-code-selectors
https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-8-panels-list/3-1-8-4-controls-properties#progress-bar
https://4wsplatform.gitbook.io/user-guide/core-features/defining-the-ui/3-1-app-designer/3-1-10-code-selectors