Create a Construct Page

You can design a page based on how you want to display information to a user and what actions can be taken on a page. Each page requires a view and an underlying table registered as Datasets in the datastore. The page renders on the fly using the configured settings in the datasets.

Each page:

Displays appropriate data using the Grid, Properties Card (Form), and Charts.
Controls the sorting and filtering of the page data in the grid as configured.
Determines ability to add, edit, delete, or sort records on a page.
Displays configured links (page bindings) and appropriate properties per column as designed.

Pages are individual screens that users interact with - each page can contain multiple containers. Containers are layout components that organize your page - including standard containers, grids, property cards, and tab containers.

Grids excel at displaying and manipulating tabular data through configurable columns with sorting and filtering, row selection capabilities, and data manipulation options. Forms provide detailed views of a record selected in a grid. Both components leverage the same underlying configuration patterns despite their visual differences, allowing WebApp Designers to apply consistent approaches across different layouts.

Create a Page

On the Construct Preview’s home page, edit the required WebApp. The WebApp configuration page is displayed.
Access the Pages node in the Tree Navigation panel and select Add Page. A new page is displayed as the child node for Pages, and the Details Pane is updated with the Pages fields.
In the Name field, enter a unique name for your page.
If you want to override field translations for this specific page, select a Dictionary.
Note
Dictionaries are translation resources used for multilingual support. Refer to Dictionaries for more information.
Click More Options (…) next to the page child node and select the required following options to start adding required containers to define construct page structure:

Configure Containers for Page Structure

You can define construct page structure using either form-based UI or Advanced mode.

The following are the types of containers available for defining the page’s structure:

Containers: Used to display a standard container for page layout
Grids: Displays a tabular data like a grid inside a container
Properties Cards: Displays a properties card or form-style display for detailed view of a record inside a container
Tab Containers: Used to display a tabbed container for page layout
Chart Types: Used for quick visual comprehension of key performance indicators (KPIs), trends, and business metrics

Note
It is recommended to create a separate container at a base or page level to house different containers and tab containers to display grids and properties cards.
If you are configuring a page with a single grid, a base container is not required. You can directly configure the Grid container in this scenario.

Components Naming Conventions

Use the naming conventions below for the components used in Construct Preview.

Component Type	Naming Convention	Examples
Container	con{pagelocation}	conUpperLeft, conTop, conBottom
Tab Container	tab*	tab1, tabOrders, tabOrderDetails
Grids	grd*	grdOrders, grdCustomers (in Plural)
Properties Card	crd*	crdOrder, crdCustomer (in Singular)
Charts	chrt*	chrtOrdersByMonth
Events	evt*	evtSendEmail

UI Details

Click More Options (…) next to the newly created page node and select Add Container or Add Tab Container.
Click the container node. The Details Pane is updated with the Container fields.

Enter the required values for the field/properties for the container using the following table:

Note
The fields/properties below are the same for both tab container and standard container holding other tab or standard containers, grids, or forms. You can use these fields to customize and control the container’s size, padding, presentation (side-by-side or top-to-bottom), and overall appearance.

Field/Property (Name: Type)	Description	Supported Values/Notes
name: string	Name of the Container	Enter a container or tab container name within length constraints using the naming convention: con{pagelocation}, for example, conUpperLeft, conTop, conBottom tab*, for example, tab1, tabOrders, tabOrderDetails maxLength: 50
parent_layout_container_name: string	Name of the parent container used for page layout. Allows you to link child containers to a parent container.	Any valid container name. maxLength: 50
ordinal: integer	Allows ordering the containers	default: 0 Any integer
gap: number	The gap between containers or fields on a property card	minimum: 0, default: 1 Any positive number
padding: number	Adjusts the padding inside of the container	minimum: 0, default: 0 Any positive number
size_units: enum	Units that are used to compute the size of a container	* Pixels * Rem * GrowRatio Default: GrowRatio
size_unit_value: number	Value of the units that are used to compute the size of a container	minimum: 0, default: 1 Any positive number
layout: enum	Specifies how the containers flow within the page	* FlowHorizontal: Side-by-side display * FlowVertical: Top-to-bottom display
display_mode: enum	Configures the display mode	* Card: Displays content in a card-style layout. Default mode for Grid and Properties Card (Form). * Empty: Displays no visual elements. Default mode for Standard and Tab containers.
title: string	Label that is displayed on the top of the container	Any string within length constraints. maxLength: 50
alignment: enum	Controls the alignment for placing the container	* Start * Stretch * End Default: Stretch
tab_label: string	Label displayed as the tab name for a container. Use this property only when a container needs to be included in a tab container.	Any string within length constraints. maxLength: 50

Repeat Steps 1 through 3 as per your page design.
After completing container configuration, click Save and proceed with configuring Grid and Form display.

Configure Grid Display

Click More Options (…) next to the newly created page node and select Add Grid.
Click the Grid node. The Details Pane is updated with the Grid fields.

Enter the required values for the field/properties to create a tabular grid display in a container using the following tables:

Note
Only one dataset (view or table) can be configured per Grid or Form.

Field/Property (Name: Type)	Description	Supported Values/Notes
parent_binding_container_name: string	Name of the parent grid/form container type for data binding. Allows you to link between grids.	Enter the name of the grid container using the naming convention: grd*. For example, grdOrders, grdCustomers (in Plural). maxLength: 50
datastore: string	SKP Datastore name for this component that overrides the datastore configured at the WebApp level. Refer to Datastores for more information. Click the Open Details button next to the Datastore list to open it in the SKP Catalog.	Note The Rescan Datastore button opens up a dialog box that allows you to perform a new metadata scan to keep the datastore details up to date. If the scan errors out, access the Datastore’s scan logs in the SKP Catalog module to troubleshoot the error.
dataset: string *required*	SKP dataset for the data used for this container. Select the required Dataset. Scroll down the Dataset list to auto-create a dataset using a table or view based on Construct Preview’s recommendation. Note If a dataset is being created from a SQL view, you must set its Affected Table. Click the Open Details button next to the Dataset list to open it in the SKP Catalog.	Note The Update Dataset button opens a dialog box that allows you to rescan the dataset and add any newly available fields from the underlying table or view to the dataset used in this container. Specify the dataset classification. You need to then access the Fields node to either add or modify the column input types for this container. If the scan errors out, access the associated Datastore’s scan logs in the SKP Catalog module to troubleshoot the error.
support_insert/delete/update: boolean	Provides insert/delete/update access to the grid/form. Overrides Page and WebApp Group security settings.	true, false. default: true
name: string	Name of the Container	Enter a name within length constraints. maxLength: 50
parent_layout_container_name: string	Name of the parent container used for page layout. Allows you to link child containers to a parent container.	Any valid container name
ordinal: integer	Allows ordering the containers	Any integer. default: 0
gap: number	Not applicable to Grid. The gap between fields on a property card	N/A; default: 1
padding: number	Adjusts the padding inside of the container	Any positive number. default: 0
size_units: enum	Units that are used to compute the size of a container	* Pixels * Rem * GrowRatio default: GrowRatio
size_unit_value: number	Value of the units that are used to compute the size of a container	Any positive number. default: 1
layout: enum	Specifies how the containers flow within the page	* FlowHorizontal: A side-by-side display style for containers. * FlowVertical: A top-to-bottom display style for containers.
display_mode: enum	Configures the display mode	* Card: A structured, visual card-like format focuses on readability and user-friendly presentation. * Empty: A container with no visual elements. default: Card
title: string	Label that is displayed on the top of the container	Any string within length constraints. maxLength: 50
alignment: enum	Controls the alignment for placing the container	* Start * Stretch * End default: Stretch
tab_label: string	Label displayed as the tab name for a container. Use this property only when a container needs to be included in a tab.	Any string within length constraints. maxLength: 50
dictionary: string	Select the dictionary configured in the SKP Admin module that is used to translate phrases for this grid container.	maxLength: 250

Add the required container bindings to establish links between grids and forms that share the same or related columns, using the following fields:

Note
Either source_column or source_value must be specified.

Field/Property (Name: Type)	Description	Supported Values/Notes
source_column: string	Specifies the source column in the parent binding container	Enter source column name from your dataset. maxLength: 128
source_value: string	Specifies a fixed source value	Specify the value or actual record of the source column. maxLength: 255
target_column: string *required*	Specifies the target column in this container	Enter target column name from your dataset. maxLength: 128

If required, configure Events in the Grid. Refer to Events for more information.
If required, configure Fields in the Grid. Refer to Configure Column Properties to configure the fields to be displayed in the Grid display.
Repeat Steps 1 through 6 as per your page design.
After completing container configuration, click Save and proceed with configuring Form display.

Configure Form Display

This container is often used to display fields associated with a record and in combination with the grid display. Form view works best when you have to update a record that has many columns associated with it.

To create and configure a Form:

Click More Options (…) next to the newly created page node and select Add Properties Card.
Click the Properties Card node. The Details Pane is updated with the Properties Card (Form) fields.

Enter the required values for the field/properties to create a property card or form-style display in a container using the following tables: