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

Columns properties

PreviousPanel definitionNextControls properties

Last updated 3 years ago

Was this helpful?

The columns list is an editable list where the user can refine the columns behavior. The default setting is automatically defined by the Web Designer, when creating the grid. During the grid definition, the select clause of the binded business component is analyzed: for each field in the select clause a column is created and added to that list. Column type, header name, mandatory, length, editability in insert/edit modes are automatically set, according to the settings of the database fields: if a database field is mandatory, the column is mandatory, if a database field is part of a primary key, the related column is not editable in edit, and so forth. There are a great deal of column properties; in order to make easy the column definition, not all properties are showed, only the most common; it is possible to access to the whole range of properties, by pressing the "Advanced mode" button on the toolbar.

These are all properties defined for a column:

  • To manage – flag used to define if the field must be managed, in terms of make it visible, editable and saved

  • To show – flag used to define if the column is visible; even if it is declared as not visible, the user can always make it visible when interpreting the application, by switching that settings with right click of the mouse on the column header

  • To show only if – boolean expression, in Javascript format, used to dinamically define if the column is to show or not

  • Attribute name – a "camel" format representation of the database field, that can used on the GUI side (javascript) to refer the column or the model

  • To ignore with grid profile/permissions – flag used to activate or not the user profile and columns permissions for this column; it can come in handy to disable this feature for columns that could be visibile/hidden according to dinamic conditions

  • Position – column order in the grid

  • Header name – column title, that will be translated according to the language of the user; in case of an application having oneonly language, this property reports that real column header to show on grid

  • Column type – application type to apply for the column; typically this types are preset by the Web Designer when creating the grid and are compatible with the database field type; the user can change this application type and refine the column format, for instance by setting a column with a date type for a datetime field. Allowed application types are defined below

  • Code selector – in case the column has a combo-box/lookup type, this additional property must be defined, in order to specify which code selector will manage this column

  • Directory upload – in case the column has a "File upload/download" or "File path" or "Image path" type, this property must be defined, in order to specify which is the default directory where saving/loading files

  • Width – Field width

  • Field length – in case of text colums, this attribute defines the maximum characters allowed in edit

  • Integers number – in case of number column, this attribute defines the maximum number of integer digits allowed in edit

  • Decimals number – in case of number column, this attribute defines the maximum number of decimal digits allowed in edit

  • To uppercase – flag used to make the text edited by the user be in uppercase

  • Mandatory – flag used to force the editing of this column, which cannot be empty when saving data

  • Editable in insert mode – flag used to allow the editability of this column when the grid is in insert mode (new rows)

  • Editable in edit mode – flag used to allow the editability of this column when the grid is in edit mode

  • To hide – flag used to hide the column

  • Filterable – flag used to allow the viewing of the quick filter panel when right clicking with the mouse on that column, in order to apply a filtering condition on the grid

  • Exportable – flag used to make it possible to export data from the grid, including this column

  • Can copy – flag used to allow the copy of the cell value, when clicking on the copy button on the grid toolbar

  • Can sort – flag used to make it possible to order by this column, when clicking on the column header

  • Sort order – combo box having values "no sorting", "ascending", "descending", indicating if a column must be preordered when opening the grid; this property defines which will be the sorting versus

  • Sort position – this number represents the ordering position of this field in the ORDER BY clause generated on the server side, when ordering by this column; this property must be defined when "Sort order" property is set to "ascending" or "desceding"

  • Right padding – property used to apply the right padding to a text/char column: the number is used to ensure that the final value for the cell will have enough spaces on the right so that the final cell value will have a length equals to this number

  • To trim – flag used to apply a trim to the text (no spaces on the left and right)

  • To trim in filter – flag used to apply a trim to the text specified in the quick filter

  • Default value in insert mode – value to apply to the cell when the grid is in insert mode. You can choose a predefined variable, such as username or current date; as alternative, you can specify a variable having format :VARIABLENAME or a javascript expression, such as: record.data.attributeName

  • Default value in edit mode – value to apply to the cell when the grid is in edit mode

  • Positive value in check – Value saved for checked checkboxes (e.g. ‘Y’)

  • Negative value in check -Value saved for unchecked checkboxes /e.g. ‘N’)

  • Currency symbol

  • Data format – format expressed in ExtJS compatible format, to use with numeric values; e.g. 0.000

  • Horizontal alignment – to the left/center/right

  • Minimum date – in case of date/datetime type, it is possible to set a minimum date the user can set

  • Maximum date – in case of date/datetime type, it is possible to set a maximum date the user can set

  • Minimum numeric value – in case of number type, it is possible to set a minimum number the user can set

  • Maximum numeric value – in case of number type, it is possible to set a maximum number the user can set

  • Renderer – an optional javascript expression, to use to format data in a complex way; see ExtJS documentation about this property to know how to use it;

Example for a Web Application:

if (value<0) return "negative"; if (value>0) return "positive"; return "zero";

Example for a Mobile Application:

var obj = { value: vo["COD_PRODOTTO"] }; 
if (vo["VALIDATO"]=="N") { 
  obj.backgroundColor = "FFDDDD";
} 
else { 
  obj.backgroundColor = "DDFFDD"; 
}; 
var val = convertToObjectJson(obj); 
return val;
  • Additional config - Optionally, it is possibile to define at column level additional settings, which will be injected along with all the others provided by Platform. These settings must be compatible with the ones defined by ExtJS for a Ext.grid.Column and subclasses. In order to add these settings, use the advanced property "Additional Config." where you can specify a list of properties. The content of this property will be included in a more general {...} javascript object containing the column properties. Consequently DO NOT append the {} brackets within this property, since they are already provided by Platform. You have simply to append your properties and separate each of them with a comma ,

    Defining which operators are supported per column An additional setting you can include in the Additional Config property is

    filterOperators: [...]

    where each element in the array is a string containing an operator to include. You have to specify at least one operator and the operators specified must be compatible with the column type otherwise they will not be included. Supported operators are:

"=" 
"<"
"<="
">" 
">=" 
"<>" 
"contains" 
"like" 
"likeignorecase" 
"isnull" 
"isnotnull"
  • Not editable if – boolean expression, expressed in javascript, indicating when the cells of the selected column are editable; this property overrides the default behavior of the cells, defined through the combination of grid mode (insert/edit) + can insert/can edit properties. This property is useful when the behavior of the cell should change according to a dynamic value, such as "a document state" represented by the value of another attribute of the same row.

Only for a pivot grid , these are all the properties defined for a column:

  • Pivot column – flag used to set pivoting column

  • Grouping column – flag used to set column that is grouped value

  • Header column – flag used to set column header of grouped value

Allowed application types for columns, according to the related database field type:

Database field type

Application type

Text

Text, Check-box, Local/Remote Combo-box, Button lookup, Code+Button lookup, File upload/download, Image Path, File Path, Button

Integer

Number

Decimal

Number

Char

Text, Check-box, Local/Remote Combo-box, Button lookup, Code+Button lookup

Datetime

Date, Datetime, Time

Date

Date, Datetime, Time

Internal Counter

Internal Counter

Counter based on a table

Counter based on a table

Counter based on a custom business component

Counter based on a custom business component

Sequence

Sequence

File identifier

File upload/download

There is a difference between File upload/download, Image Path, File Path column types: File upload/download – an upload/download button is showed inside that column; through that button it is possible to show a dialog window used to download, upload, preview and delete a file; when uploading a file, this will be phisically stored in the server file system starting from the path specified through "directory upload" property in the grid columns designer; when saving, the uploaded file will be stored within the following subfolders structure: ///filename.xxx That structure allows to store multiple versions of the file (file versioning). Image Path – this column type can be used to show a preview of the previously uploaded image; it cannot be used to upload or download imags; the images to show are retrieved starting from the path in the server file system starting from the path specified through "directory upload" property in the grid columns designer. File Path – an upload/download button is showed inside that column; through that button it is possible to show a dialog window used to download, upload, preview and delete a file; when uploading a file, this will be phisically stored in the server file system starting from the path specified through "directory upload" property in the grid columns designer; when saving, the uploaded file will be stored in that path. This column type does not allow to store multiple versions of the file. The Button type column allows to show a clickable button within a cell, for each cell of that column. It is then possible to attach a "cell click" event to it and consequently manage the binded action. The default behavior of that button is to show the cell value as its text, painted in white color on a blue background color. You can change the default behavior by setting the "renderer" property for that column, which has this default content:

function(value, metaData, record, rowIndex, colIndex, store) {
    metaData.style = 'text-align: center;color: white; background: #3d71b8';
    return value
} // example for a Web Application

Note that it is not allowed to insert/delete columns in a grid: columns are automatically synchronized with the fields defined in the select clause of the binded business component, which are automatically synchronized with the data fields defined in the binded data model. The only exception to this rule is when the user is defining a business component "Query for a report to show on grid", where no data model is required: the select clause can be manually defined by the user and changes to this part of the SQL query are automatically reflected on the columns list of the linked grids.