Component: Grid
The grid component displays tabular data from ReST API requests which can be filtered and sorted.
The grid is one of the most important components in the application as it displays pages of data received from ReST API data source requests sorted into rows (records) and columns (fields).
This is an example of a grid showing page 1 of data from a ReST API request.
The grid has the following features:
Pagination
Displays only one page of data at a time. This is highly performant and means that only one page of data is read from the ReST API at a time. The end-user is able to page through each page as required.
Filtering
Most columns can be filtered to show only those records which match your filter text. Multiple columns can be filtered at the same time.
Sorting
Most columns can be sorted. Repeated clicking on the column header toggles between ascending, descending and none. Multiple columns can be sorted at the same time.
Column Selection
The column menu allows columns to be shown or hidden.
Column Ordering
Users can drag and drop columns into their preferred position.
Column Resizing
Users can drag column separators to resize each column.
Drill Down
Column data can be hyperlinked to allow the user to 'drill-down' to open a data entry form for the selected data. Multiple drill downs can be configured per grid to drill down into multiple forms.
Grid components can be dragged from the form designer toolbox into the form for both lookup and data entry forms. Once a grid is on the form being designed, click it to open up the component properties modal popup dialogue.
The form has 5 tabs, and an Apply button to save the changes and close the form, and a Cancel button to close the form without saving. Note that saving a component must be followed by saving the form design in order to persist the settings.
The Details, Styles, Data Sources and Developer Configuration tabs are discussed in the Components section. The Grid tab is specific to this component.
Grid
This tab allows the grid specific behaviour to be configured.
There are 3 left docked sub-tabs.
Population
Choose how the grid will be populated with data. Grids can be populated when a form is loaded, when a record is loaded, or when a search criteria component is used to filter data.
Population Trigger
This drop-down combo has the following actions:
Another Component
The grid is populated when another component triggers it, for example a search criteria filter when the user applies the filter.
Form Loaded
The grid is populated when the form is opened. Typically this is for lookup forms.
None
The grid is not populated automatically. There may be some other custom programming logic which populates this grid.
Record Loaded
The grid is populated when the record is displayed. Typically this is for data entry forms. For example if a product form loads a product, then a grid may then display the historic stock levels of this specific product.
Triggering Component
This drop-down is shown only when Population Trigger is set to "Another Component" and shows a list of other components located on this form.
In this example, the component which triggers a data grid population is the Search Criteria component.
Columns
This sub-tab is used to choose which columns will be displayed, hidden and ordered in the grid.
The list of columns is sourced from the fields returned in the linked ReST API data source. When this was configured, those original columns properties are shown here and are read-only.
The column order can be manipulated by using the buttons to the left of the list to move up, move down, or indeed delete the column from the list. It is often better to simply hide columns rather than delete them.
There are also new column properties:
Name
This is the name of the field from the ReST API request
Type
Usually a string or a number, but sometimes an image URL or Base64 image.
Variable
If the column is linked to a custom variable then that is shown here.
Image Size
When showing images in grid columns, this dictates the size of the image displayed. Images can be between 16 and 1024 pixels in size.
Format
Most columns will display as expected, however some may need to be specially formatted e.g. currency, dates etc..
Caption
This is the column header text. Often field names from ReST API's can be cryptic so setting a human legible caption is recommended.
Visible
Whether the column is visible or not
Width
The width of the column. When 0, the column will be sized to fit available space. For image columns, this should be set to 20 wider than the image size.
Filterable
Whether the column can be filtered. Most columns should be filterable, however filtering on types such as images makes no sense.
Sample Values
This is a sample of the values read from the ReST API request to help configure the column.
Drill Down
This sub-tab is used to configure the drill down from selected columns to open forms. Multiple columns can be configured to drill down into their own form.
In this example, the grid has 3 columns which the end-user can click to drill down into different forms.
Each drill down column is hyperlinked to the identifier of a specific entity.
Each row in this tab can be edited or deleted using the respective buttons to the right of each row.
Add
This button opens a modal popup dialogue which allows configuration of the drill down column.
The drill down column properties are:
Column Name
This is a drop down combo showing all columns in the ReST API data source. This is the column which will be visible and highlighted when the users mouse hovers over it.
Hyperlink
When checked, this column can be hyperlinked to open a form record.
Key Column Name
This is a drop down combo showing all columns in the ReST API data source. This column will typically be invisible as it will contain a string of characters which represent a server-side record identifier. It will be this value which is passed into the form to identify the record to display.
Button Column
The column can be shown as a button, not a hyperlink. Clicking the button will drill down.
Button Label
If a button column, this is the text shown in the button.
Button Width
If a button column, this is the width of the button.
Form
This is a drop down combo showing all forms in your system. When the hyperlinked column is clicked, this form will open and will show the corresponding record identified by the Key Column Name.
Modal Popup
Hyperlinking can open modal popup forms rather than replace the currently shown form with another. This may be a better experience for some applications.
Use the Save button to save the properties to the component properties. Remember that you must save the component properties, and save the form design for any changes to be persisted.
Last updated