Note
WebApp Builder’s Advanced mode is currently in preview and under development; some features may be incomplete or subject to change.
Overview
WebApp Builder’s Advanced mode leverages an intuitive JSON editor to define WebApps and construct page structures, UI layout components, data bindings, menus, and construct events (validation and business rules) in JSON format. This article helps WebApp Designers to understand how the JSON-schema ties up different components of WebApps and construct pages to create a fully functional WebApp and construct pages.
The JSON editor offers the following benefits:
Real-Time Syntax Validation: Instantly flags missing commas, incorrect types, indentation, and structural errors.
Auto-Suggestions: Recommends required attributes and attributes’ values based on component context.
Context-Sensitive Tooltip: Provides explanation of what an attribute is and aids in application development.
Contextual Error Messages: Provides precise feedback to help users resolve issues efficiently.
Schema-Aware Editing: Uses predefined JSON schema for WebApps and construct pages that highlights a component’s structure, ensuring consistency and correctness.
Access Advanced Mode
On the Construct Preview’s home page, click the (+) Add WebApp button or edit an existing WebApp. The WebApp Configuration page in displayed.
Turn on the Advance Mode toggle to access the JSON editor.
Use the left navigation panel to quickly navigate to different components involved in configuring a WebApp.
Refer to WebApp Definition Reference Document for assistance when working in Advanced mode.
Sample WebApp Definition JSON
Click here to view a sample WebApp definition JSON
{
"webapps": [
{
"name": "Customer Order Management",
"datastore": "CONSTRUCT-Demo",
"top_level_menu_name": "WebApp Menu",
"dictionaries": [
{
"dictionary": "CONSTRUCT PRODUCTS PAGE",
"ordinal": 1
},
{
"dictionary": "Products Demo",
"ordinal": 2
}
],
"pages": [
{
"name": "Products",
"containers": [
{
"container": {
"name": "Products Primary Container",
"layout": "FlowHorizontal",
"ordinal": 1,
"display_mode": "Empty"
}
},
{
"container": {
"name": "Products Left Container",
"parent_layout_container_name": "Products Primary Container",
"ordinal": 2,
"layout": "FlowHorizontal",
"display_mode": "Empty"
}
},
{
"container": {
"name": "Products Right Container",
"ordinal": 3,
"parent_layout_container_name": "Products Primary Container",
"layout": "FlowHorizontal",
"display_mode": "Card"
}
},
{
"grid": {
"name": "Products Grid Container",
"parent_layout_container_name": "Products Left Container",
"ordinal": 4,
"gap": 0,
"size_unit_value": 8,
"layout": "FlowHorizontal",
"title": "Products",
"display_fields_in_dataset_by_default": true,
"columns": [
{
"list": {
"name": "CategoryID",
"dataset_id": "dcs_34wnQ2QY3MJpQPmfWgZpoU4apmq7",
"value_field": "CategoryID",
"display_field": "CategoryName",
"link_to_page_bindings": []
}
},
{
"text_area": {
"name": "Comment",
"control_status": "Hide",
"sortable": false
}
},
{
"checkbox": {
"name": "Expired",
"direct_update": true
}
},
{
"button": {
"name": "Inventory",
"link_to_page_name": "Inventory History",
"display_text": "Go to inventory",
"link_to_page_bindings": [
{
"name": "EmployeeID",
"source_column": "SupplierID",
"target_column": "EmployeeID"
},
{
"name": "ProductName",
"source_column": "ProductName",
"target_column": "ProductName"
}
]
}
},
{
"date": {
"name": "MfgDate",
"sortable": false
}
},
{
"datetime": {
"name": "MfgDateTime",
"sortable": false
}
},
{
"time": {
"name": "MfgTime",
"sortable": false
}
},
{
"text": {
"name": "ProductName",
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 1,
"name": "ProductID",
"control_status": "Hide",
"required": true,
"is_key": true,
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"text": {
"ordinal": 3,
"name": "QuantityPerUnit",
"control_status": "Hide",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"list": {
"ordinal": 3,
"name": "SupplierID",
"control_status": "Hide",
"is_hidden_on_grid_by_default": true,
"dataset_id": "dcs_2eMat1Hp8ZKcnpsm5iKQdmw6qm92",
"value_field": "SupplierID",
"display_field": "CompanyName",
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 3,
"name": "UnitPrice",
"control_status": "Hide",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 3,
"name": "UnitsInStock",
"control_status": "Hide",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 9,
"name": "UnitsOnOrder",
"control_status": "Hide",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 10,
"name": "ReorderLevel",
"control_status": "Hide",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"toggle_switch": {
"ordinal": 11,
"name": "Discontinued",
"width_flex_grow": true
}
},
{
"button": {
"name": "Campaign",
"display_text": "Submit for Review",
"link_to_page_bindings": []
}
}
],
"container_bindings": [],
"data_frame": {
"dataset_id": "dcs_4JznNXn8qWbDRBh8BD1eXfXy5LTc"
},
"events": [
{
"event_name": "OnValidate",
"comment": "Post Save event",
"container_event_tasks": [
{
"orchestrate_workflow": {
"orchestrate_workflow": "Construct Customers OnValidate ConstructType"
}
}
]
},
{
"event_name": "Campaign",
"pre_message": "Do you want to include this product in the next marketing campaing?",
"comment": "Include this product in the next marketing campaign",
"is_background_event": true,
"container_event_tasks": [
{
"orchestrate_workflow": {
"orchestrate_workflow": "City not null validation"
}
}
]
}
]
}
},
{
"properties_card": {
"name": "Product Details Container",
"parent_layout_container_name": "Products Right Container",
"ordinal": 5,
"gap": 0.75,
"size_unit_value": 2,
"layout": "FlowVertical",
"display_mode": "Card",
"title": "Product Details",
"parent_binding_container_name": "Products Grid Container",
"properties": [
{
"button": {
"name": "Inventory",
"link_to_page_name": "Inventory History",
"display_text": "Go to inventory",
"link_to_page_bindings": [
{
"name": "ProductName",
"source_column": "ProductName",
"target_column": "ProductName"
},
{
"name": "Warehouse",
"source_value": "WH001",
"target_column": "Warehouse"
}
]
}
},
{
"number": {
"ordinal": 1,
"name": "ProductID",
"control_status": "Disabled",
"is_key": true,
"resizable": false,
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"text": {
"ordinal": 2,
"name": "ProductName",
"required": true,
"placeholder_text": "Product Name",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 3,
"name": "UnitPrice",
"required": true,
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"text": {
"ordinal": 3,
"name": "Description",
"sortable": false,
"link_to_page_bindings": []
}
},
{
"text": {
"ordinal": 3,
"name": "QuantityPerUnit",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 3,
"name": "UnitsInStock",
"control_status": "Disabled",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"list": {
"ordinal": 3,
"name": "CategoryID",
"required": true,
"width_flex_grow": true,
"dataset_id": "dcs_34wnQ2QY3MJpQPmfWgZpoU4apmq7",
"value_field": "CategoryID",
"display_field": "CategoryName",
"link_to_page_bindings": []
}
},
{
"list": {
"ordinal": 3,
"name": "SupplierID",
"control_status": "Hide",
"required": true,
"dataset_id": "dcs_2eMat1Hp8ZKcnpsm5iKQdmw6qm92",
"value_field": "SupplierID",
"display_field": "CompanyName",
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 9,
"name": "UnitsOnOrder",
"control_status": "Disabled",
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"number": {
"ordinal": 10,
"name": "ReorderLevel",
"required": true,
"width_flex_grow": true,
"link_to_page_bindings": []
}
},
{
"toggle_switch": {
"ordinal": 11,
"name": "Discontinued",
"default_value": "false",
"width_flex_grow": true,
"direct_update": true
}
},
{
"checkbox": {
"ordinal": 12,
"name": "Expired",
"sortable": false,
"direct_update": true
}
},
{
"datetime": {
"ordinal": 13,
"name": "MfgDateTime",
"sortable": false
}
},
{
"date": {
"ordinal": 13,
"name": "MfgDate",
"sortable": false
}
},
{
"time": {
"ordinal": 13,
"name": "MfgTime",
"sortable": false
}
},
{
"text_area": {
"ordinal": 14,
"name": "Comment",
"sortable": false
}
}
],
"container_bindings": [
{
"source_column": "ProductID",
"target_column": "ProductID"
}
],
"data_frame": {
"dataset_id": "dcs_4JznNXn8qWbDRBh8BD1eXfXy5LTc",
"support_delete": false
},
"events": []
}
}
]
}
],
"menus": [
{
"name": "Master Data",
"menu_links": [
{
"ordinal": 11,
"label": "Customers",
"link_to_page_name": "Customer"
},
{
"ordinal": 12,
"label": "Products",
"link_to_page_name": "Products"
}
]
},
{
"name": "Reference Data",
"menu_links": [
{
"ordinal": 41,
"label": "Materials",
"link_to_page_name": "Material Reference"
}
]
},
{
"name": "WebApp Menu",
"menu_links": [
{
"ordinal": 1,
"label": "Home",
"link_to_url": "https://knowledge.syniti-dev.com/construct"
},
{
"ordinal": 10,
"label": "MASTER DATA",
"sub_menu_name": "Master Data"
},
{
"ordinal": 40,
"label": "REFERENCE DATA",
"sub_menu_name": "Reference Data"
}
]
}
],
"webapp_groups": [
{
"name": "Cust Order Mgmt User WebApp Grp",
"allow_select": true,
"allow_insert": true,
"allow_update": true,
"allow_delete": true,
"security_profile": "Construct Customer Order Mgmt User",
"webapp_group_pages": [
{
"page_name": "Customer",
"allow_select": false
},
{
"page_name": "Products"
},
{
"page_name": "Orders",
"allow_select": false
}
]
},
{
"name": "WebApp Group Test One",
"allow_select": true,
"allow_insert": true,
"security_profile": "Construct Test",
"webapp_group_pages": []
}
]
}
]