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
  • Utility methods directly connected to Platform
  • Creating a combo-box store
  • Creating a grid panel
  • Creating a form panel
  • Additional methods
  • Creating a window containing panels
  • Creating a dialog
  • Creating a form store and a form panel
  • Creating a grid store and a grid panel
  • HTTP requests
  • Application Menu
  • Limits

Was this helpful?

  1. Modules
  2. Web Page Development

Google Material Design development

Google MD is a js library freely available to develop UI based on a theme similar to the one provided by Android mobile platform.

This represents an alternative to the base approach described in the previous chapter. This solution is based on the previous one: you have still to include main_page.jsp in your own web page: it represents the starting point in order to correctly setup the page content, authenticate on server-side Platform and get the right authorizations.

In addition, you have to include a set of additional js+css files, composing the MD distribution.

It provides:

  • a read only grid + store (both automatically created starting from the panel id)

  • an editable form + store (both automatically created starting from the panel id)

  • static combobox (automatically created starting from the selector id)

  • dynamic combobox + store (both automatically created starting from the selector id)

  • tab folders

  • accordion panel

  • a panel container based on the “border” layout (up to 5 embedded regions located at the center, north, south, east and west area of that container)

  • window dialog

  • window

Utility methods directly connected to Platform

Creating a combo-box store

This is helpful to decode a value in a grid to its translated description.

var store =createComboStore(selectorId);

Creating a grid panel

This method creates both the grid store (accessible as “store” attribute) and the grid panel. This grid is always in read only mode.

Supported columns: text, number, checkbox, static/remote combo decoding, date, date+time.ì

var grid = createGrid({
                  panelId: ...,
                  region: ..., // center|north|east/west/south
                  listeners: {
                      rowclick: function(rowIndex,attributeName) {
                        var record = grid.store.list[rowIndex];
                        formPanel.store.baseParams.attrName = record.attrNamexxx;
                        formPanel.load();
                      }
                   }
});

Creating a form panel

This method creates both the form store (accessible as “store” attribute) and the form panel.

Supported controls: text number, checkbox, static/remote combo, date, date+time.

var formPanel = createForm({
  title: "....",
  region: ...,
  height: ...,
  labelWidth: ...,
  autoLoadData: false,
  panelId: ...
});

Additional methods

These methods are connected to Material Design but independent from Platform.

Creating a window containing panels

var win = new AppWindow({
  title: "...",
  items: [grid,formPanel,...]
});

Creating a dialog

This dialog is automatically shown when instantiated. If the handler callback is not specified, the dialog will be automatically closed. In order to close it programmatically, call d.hide();

var d = new Dialog({
  width: ...,
  height: ...,
  title: ...,
  text: ...,
  buttons: [{
    text: 'Ok',
    handler: function() {
    }
  }
  ]
});

Creating a form store and a form panel

This is an alternative to the createForm method described in the previous section and it allows to programmatically create a form store and, after that, the form panel.

var formStore = new FormStore({
  url: context+"/getdetail?applicationId="+applicationId+"&compId=..."}
);

var formPanel = new FormPanel({
  title: "...",
  region: "...",
  height: ...,
  labelWidth: ...,
  autoLoadData: false,
  store: formStore,
  items: [{
    xtype: 'textfield', // datefield | datetimefield | combo | check
    name: '....', // attr name
    label: '...',
    upper: true,
    width: 350,
    allowBlank: false
  },
  ...
  ]
);

Required arguments:

  • items - a list of objects, where each object should contain the following attributes:

    • name: "attributename"

    • xtype: "textfield| filefieldpassword|numberfield|datefield|datetimefield| button| combo| check|textarea"

    • rows: 1|2|...

    • upper: true|false

    • allowBlank: true|false

    • disabled: true|false

    • label: "..."

    • width: xxx

    • allowDecimals: true|false

    • allowNegativeNumbers: true|false

    • text: "buttontext"

    • handler: function() {}

  • region: "north"|"center"|"east"|"west"|"south"

Optional arguments:

  • store - FormStore linked to this panel, used to fetch data remotely

  • title: title to show on the top of the panel

  • autoLoadData: true|false (default: true)

  • columns: number of label+controls per row

  • height - according to the region: mandatory for north/south

  • width - according to the region: mandatory for east/west

  • listeners - objects containing events:

    • onblur: function(comp,attributeName,value)

    • select: function(comp,attributeName,value)

Available methods:

  • load() - force store loading, which is always asynchronous

  • getComponent(name) - input control or button, starting from its name

  • pull(alignStore,invalidControlsList) - get all values from the declared input controls and get back a js object contaning these values, indexed by the control's name. If alignStore is set to true, then update the store.data object too with the same js object

  • push(data) - set all values to the declared input controls , starting form the js object passed as argument

  • clearAll() - clear app all values in the declared input controls

Creating a grid store and a grid panel

var gridStore = new GridStore({
           url: context+"/getlist?applicationId="+applicationId+"&compId=...."
});

var grid = new GridPanel({
                region: ...,
                store: store,
                colModel: [
                { 
                  dataIndex: "...", 
                  type: "string", // date | datetime | combo
                  header: "...",
                  width: ...
                }
                ,
                …
                ]
);

HTTP requests

Asynchronous request (best to choose)

newAsyncRequest().send(uri,method,data,mimeType,successCallback [, failureCallback]);

Synchronous request

var response = newSyncRequest().send(uri[,method[,data]]);

Application Menu

The application menu can be freely created and optionally bounded to the Platform menu definition.

In any case, menu items must be defined with the div named <nav>

Example:

<nav class="mdl-navigation">
  <a class="mdl-navigation__link" href="#" 
        onClick="executeFunction('showMyList')" >MyList</a>                
  <a class="mdl-navigation__link" href="#" onClick="logoutFromApp()" >Quit</a>
</nav>

You can filter menu items by checking out if specific functionalities are enabled for the current user. You can do it in this way:

<nav class="mdl-navigation">
  <% if (is!=null && is.isFunctionIdEnabled("WEBPAGEDEV","articoli")) { %>
  <a class="mdl-navigation__link" href="#" 
        onClick="executeFunction('showMyList')" >MyList
  </a>
  <% } %>            
  <a class="mdl-navigation__link" href="#" onClick="logoutFromApp()" >Quit</a>
</nav>

In the previous example, what has been checked out is the abilitation of a functionality whose id is “articoli”. This is the name of a menu item defined in Platform.

If you need to find out which id a functionality has, you have simply to go to the Web Designer UI -> Menu items, then select the functionality you are interested in, press the “Detail” button: in the first folder, Window settings, the functionality id is reported, in the “Title Id” input field.

For a complete example, see Appendix B.

Limits

The Material Design library reported in this chapter has a few limits, reported as follows:

  • Grids are read only

    • no currency columns are supported

    • no upload/download columns are supported

Theoretically, it is possible to create an editable grid by adding input controls to single cells and manage programmatically their editability.

In such a scenario, you cannot use the utility methods described in section 2.1, but only the ones described in 2.2 e embedding what missing.

  • No tree panels are supported

  • Forms

    • no currency fields are supported

    • no upload/download fields are supported

    • no images fields are supported

  • No automatic management between grid and form is provided

  • No automatic management between a filter panel and a grid is provided

There are many extensions of MD available on the net, which can be included in this version.

A good starting point is

PreviousPure Web Page DevelopmentNextAppendix A - a complete example without any lib

Last updated 5 years ago

Was this helpful?

https://getmdl.io/components/index.html#tables-section