UI Builder Examples
- Kevin Wu
This section provides the following examples of UI created using UI Builder Agent.
FileBrowser
This example presents files from directories accessible by the Execution context running the Workflow. .
Â
The FileBrowser workflow consists of one UI Builder Agent and two Analysis Agents. The Buildpage analysis agent builds up the table to present the page. The buildResponse Agent adds common static parts to the response before it is sent back to the UI Builder.
The export consists of the filebrowser workflow and some APL constants. In APL constants there is a Map that consists of an alias and a real file system path. In the export, there is only one alias called MZHOME with path /opt/mz. This can be changed to reflect the correct path on the running system, there can also be added more aliases and paths. All aliases will be added as menuItems in the responseUDR.
DB Viewer
The DB Viewer example, shows how a UI can be created to display data from a database. The example consists of two views, Table view and Query view. This example is only tested on Postgres, it might need to be changed to work with other databases.
In the Table view, the table name is read from the Ext_Ref profile and you can apply a filter to the query by filling in the input fields. More filter rows are added by clicking Add Filter. This is performed by using Javascript added in the buildResponse Agent.
In Query view, you can write the SQL queries. Only the ‘Select’ statement is allowed.
The DB Viewer workflow consists of one UI Builder agent and two Analysis Agents. The buildPage analysis agent builds up the views and sends the request to the database.
The buildResponse Agent adds common static parts to the response before sending it back to the UI Builder.
The export consists of five configurations. In the Ext_Ref profile, the default table name is present, and the default limit of rows. The DB_Prof handles the connection to the database, this needs to be changed to match a real database. FilterType is an Ultra format for the filter in the Table view.
Grid Example
The Grid Example, is a simple example to demonstrate how the grid works. The workflow produces two grids on a single page. Both grids have four rows and different numbers of columns, but the second grid has a responsive design, which means, it adopts smaller screens.
Â