This article describes pages and cards that USoft delivers as a default in the usoft-zero template default for browser-based UIs. This usoft-zero UI/UX is the default that USoft delivers by default.

Info pages

Idea

The usoft-zero default gives you an info page for each table.

When the runtime user navigates to an info page, a multi-record grid appears. By default, the table is queried and the query results appear in the grid:

A multi-record display shows multiple records at the same time. A grid display shows columns across and records down. The grid has the purpose of showing query results. The info page as a whole is also intended to do a new search or query. The purpose is not to allow the user to manipulate data.

Here is an impression of a default info page multi-record grid for a PERSON table:

The white Search field shown here in the top-right corner is not a default, but a near-default. You need to do a minimal amount of work in Web Designer to get a near-default to work.

A default info page also contains an off-canvas editing pane that the user can cause to slide into view on the right-hand side. This pane has a single-record form for editing. A single-record display shows data for only 1 record at a time: the record selected by the user in the grid. A form display invites the user to “fill out a form” by supplying or changing data values for individual fields. The form has a separate field for each column in the table. Each field has its own prompt: a text that tells the user what the field is for. The user opens the editing page by selecting the Edit icon button for a record in the grid:

Here is an impression of a single--record form in an off-canvas editing pane for a PERSON table:

Implementation

The info page for table PERSON is implemented as an InfoPage class. Find this class on the Pages tab of the Web Designer catalog:

Open the page. In the object tree on the right, locate the PERSON data source object. This data source object is responsible for connecting the web page with the PERSON table in the database and the Rules Engine that enables and controls data access to this table:

In the preview pane in the middle of the Web Designer tool interface, click on the grid control. In the object tree on the right, locate the MultiRecordResultGrid:

To trace the off-canvas editing pane, expand to find the JavaScript client script associated with its onclickactions event:

This script reads:

let element = event.target.closest('button');

bootstrap.Tooltip.getOrCreateInstance(element).hide();

if (element.classList.contains('row-duplicate')) {
	options.duplicate = true;
	this.trigger('new', woptions]);
}

if (element.classList.contains('row-edit')) this.trigger('edit');
if (element.classList.contains('row-delete')) this.trigger('deletedialogopen');
if (element.classList.contains('row-goto-detail')) this.trigger('gotodetail');

The line containing row-edit allows you to trace the off-canvas editing pane to the edit trigger defined at a more generic level in the page:

The associated script reads:

let page = this;
let settings = getSettings(page);

event.stopPropagation();

$.udb.wait(true);
settings.offcanvasElement.classList.remove('for-new');
settings.offcanvasElement.classList.add('for-edit');
bootstrap.Offcanvas.getOrCreateInstance(settings.offcanvasElement).show();
$.udb.wait(false);

The penultimate line is responsible for opening the object with class = Offcanvas, which is the OffCanvasRightEdit section. This is the off-canvas editing pane for the PERSON record. Expanding nodes in this section allows you to trace the individual edit fields for columns of the PERSON record. They have names starting with E_… :

Detail pages

Idea

If your data model has a parent-child relationship between tables ORDER and ORDERLINE:

then the usoft-zero default gives you navigation from an info page for parent ORDER to a detail page for child ORDERLINE. The runtime can navigate to the detail page by clicking the Details icon button for the record selected in the info page grid:

The detail page has a top part with a single-record form displaying the data of the selected parent record, and a bottom part with a multi-record grid displaying corresponding data in the child table:

If there are multiple children (not shown), there is a separate grid for each of them.

Here is an impression of a detail page for table TOUR_PROGRAMME giving access to details about tours (child table TOUR) following this tour programme:

Implementation

The detail page for ORDER is implemented as a DetailPage class. Find this class on the Pages tab of the Web Designer catalog.

Open this page class, then click on the grid for Orderlines in the preview pane in the middle. In the object tree on the right, locate the related-cards-row… object that represents the bottom part of the page displaying the Orderlines grid:

Expand this object node to see what it contains. Locate the ORDERLINE data source object. This data source object is responsible for connecting the web page with the ORDERLINE table in the database and the Rules Engine that enables and controls data access to this table:

Lookup pages

Idea

If your data model has a parent-child relationship between tables ARTICLE and ORDERLINE:

then from all the places where the runtime user can manipulate orderlines, the usoft-zero default gives you a navigation possibility to a lookup page for articles. A typical process is that the user starts a new Order, goes to the detail page for Orderlines, and for each individual Orderline, selects an Article.

When adding or changing an Orderline, the runtime user gets an Article ID field with a small Look up button. Clicking this button navigates to the lookup page for Articles. Here, the user can select an Article by clicking it. This Select action will cause the article ID to be copied back to the calling environment, in this case, the Article ID field for the Orderline:

As the picture shows, navigation to a lookup page is a round trip: “go there, select an item, come back”.

Here is an impression of a lookup page for articles. The list of articles is shown temporarily in an off-canvas sidepane displaying a multi-record grid. The runtime user selects an Article by clicking on that line in the grid. This automatically takes him back to the Article ID field for the Orderline:

Implementation

To trace where the lookup button on the Article ID field leads to, locate the TableColumn object for ARTICLE_ID in the ORDERLINE data source:

Right-mouse-click and in the Property Inspector, see that the Lookup Page property of the ARTICLE_ID TableColumn is set to LookupPage ARTICLE ORDERED IN ORDERLINE:

Find this LookupPage class on the Pages tab of the Web Designer catalog: