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

Configure Layout

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
title: string	Label that is displayed on the top of the container	Any string 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. maxLength: 50
ordinal: integer	Allows ordering the containers	default: 0 Any integer
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
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.
layout: enum	Specifies how the containers flow within the page	* FlowHorizontal: Side-by-side display * FlowVertical: Top-to-bottom display
alignment: enum	Controls the alignment for placing the container	* Start * Stretch * End Default: Stretch
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
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

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
name: string	Name of the grid container	Enter the name of the grid container using the naming convention: grd*. For example, grdOrders, grdCustomers (in Plural). maxLength: 50
title: string	Label that is displayed on the top of the container	Any string 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
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
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.
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.
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
conditional_configuration_dataset: string	Select a conditional configuration dataset (CCD) to define record-level control based on what is known about the data on a Grid or Properties Card container.	CCD contains conditional information that individually set the control status of each record in a column. Refer to Conditional Configuration Dataset for more information. Note The Update CCD button opens a dialog box that allows you to rescan the dataset and add any newly available fields from the underlying view to the CCD used in this container.
security_filters: array	Select a filter to prevent unauthorized data access by ensuring users only see data they're authorized to view within a dataset.	Click Add to apply multiple security filters tied to the grid’s dataset. Refer to Configure Security Filters for more information.
parent_binding_container_name: string	Select the name of the parent grid/form container type for data binding. Allows you to link between grids/forms.	Click Add to include multiple data binding criteria.
source_column: string	Specifies the source column in the parent binding container	Enter source column name from your dataset. maxLength: 128 Note Either source_column or source_value must be specified.
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
toolbar buttons: array	Toolbar buttons displays at the top of the grid and form containers, and contains buttons that can be used for page navigation, to link to additional pages or to run a rule registered in an Event.	Click Add to include multiple buttons in the toolbar. Refer to Configure Toolbar Buttons for more information.
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
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.
alignment: enum	Controls the alignment for placing the container	* Start * Stretch * End default: Stretch
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
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
dictionary: string	Select the dictionary configured in the SKP Admin module that is used to translate phrases for this grid container.	maxLength: 250

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 5 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:

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

Field/Property (Name: Type)	Description	Supported Values/Notes
name: string	Name of the grid container	Enter the name of the grid container using the naming convention: grd*. For example, grdOrders, grdCustomers (in Plural). maxLength: 50
title: string	Label that is displayed on the top of the container	Any string within length constraints. maxLength: 50
inline: boolean	Controls whether form fields are displayed inline with their values.	default: false
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
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
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.
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.
support_insert/delete/update: boolean	Provides insert/delete/update access to the grid/form. Overrides Page and WebApp Group security settings.	default: true
conditional_configuration_dataset: string	Select a conditional configuration dataset (CCD) to define record-level control based on what is known about the data on a Grid or Properties Card container.	CCD contains conditional information that individually set the control status of each record in a column. Refer to Conditional Configuration Dataset for more information. Note The Update CCD button opens a dialog box that allows you to rescan the dataset and add any newly available fields from the underlying view to the CCD used in this container.
parent_binding_container_name: string	Select the name of the parent grid/form container type for data binding. Allows you to link between grids/forms.	Click Add to include multiple data binding criteria.
source_column: string	Specifies the source column in the parent binding container	Enter source column name from your dataset. maxLength: 128 Note Either source_column or source_value must be specified.
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
toolbar buttons: array	Toolbar buttons displays at the top of the grid and form containers, and contains buttons that can be used for page navigation, to link to additional pages or to run a rule registered in an Event.	Click Add to include multiple buttons in the toolbar. Refer to Configure Toolbar Buttons for more information.
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
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.
alignment: enum	Controls the alignment for placing the container	* Start * Stretch * End default: Stretch
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
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
dictionary: string	Select the dictionary configured in the SKP Admin module that is used to translate phrases for this grid container.	maxLength: 250

If required, configure Events in the Form. Refer to Events for more information.
If required, configure Fields in the Form. Refer to Configure Column Properties to configure the fields (associated with the record selected in the Grid) to be displayed in the Form display.
Repeat Steps 1 through 5 as per your page design.
Click Save.

Delete Components

All components of a WebApp use the same process to perform the delete action. This also applies to components used in designing a construct page.

To delete a component in a WebApp:

On the Construct Preview’s home page, edit the required WebApp and access the required component node in the Tree Navigation panel.
Select the required component and click More Options (…) next to your selected component node.
Select Delete.