WebApp Builder

Note

WebApp Builder is currently in preview and under development; some features may be incomplete or subject to change.

Overview

WebApp Builder is a low-code web application development tool that allows you to quickly design, configure, and deploy data-centric interfaces or construct pages within the Construct module. You can develop WebApps and construct pages using a form-based UI or through Advanced mode with an intuitive JSON editor. Each construct page can be customized with tailored fields, dynamic data grid, charts, and form layouts, and inline validation, enabling precise control over quality of your data.

WebApp Builder enables rapid application development and precise access control that are essential for mission-critical data migration projects. All the information used to create the functionality and controls of construct pages are stored as dynamically updateable metadata, not as code, and the content seen in a client web browser is generated on the fly in the browser itself.

Note

The WebApp Builder help section is intended for Administrators and Business Administrators (WebApp Designers) who has a working knowledge of SQL, including creating tables, and creating and optimizing views and stored procedures The performance of a WebApp—measured by the responsiveness of its construct pages and the overall user experience—is directly influenced by the efficiency of the views and stored procedures. When building complex WebApps and/or working with large datasets, it is important to carefully optimize table structures, indexes, and SQL views.

Key Features

• Quickly develop and iterate on UI components without extensive frontend coding.

• Secure WebApps and construct pages to required users using WebApp Groups and Security Profiles.

• Maintain precise control over data entry workflows and validation logic.

• Build simple and complex construct pages using different page layouts with data bindings between grids and forms.

• Easily switch between the form-based UI and Advanced mode as desired.

• Quickly navigate to different WebApp components for easier configuration of required properties.

• Diagnose and resolve common issues related to SQL queries, connectivity problems, and page design across WebApps using the Logs page.

• Converse with our AI assistant, Build Assist, which aids you in swiftly developing and modifying WebApp and Construct page configurations.

WebApp Definition Architecture

The WebApp Definition framework follows a hierarchical configuration structure that organizes UI components and their behaviors through JSON-based definitions. This framework provides a consistent pattern for defining both simple and complex multi-component construct pages, allowing for rapid changes to layout, behavior, and data connections by modifying the WebApp JSON file.

The diagrams below illustrate both simple and complex construct pages in a WebApp, including their structure, layout, and the components involved in configuring them. These illustrations help you understand how construct pages are built in a WebApp.

WebApps consist of construct pages that house containers for UI components. This hierarchical organization creates a natural flow of properties and behaviours:

• WebApp houses global properties affecting the entire application

• Pages organize related functionality and user workflows

• Containers group related UI components within a page

• Grids, Charts, and Properties Card (Forms) handle specific data interactions

• Events to run specific validation and business rules

Each level inherits properties from its parent while adding its own specialized configuration, ensuring consistent behaviour while allowing for component-specific customization.

Before You Begin

Configuration Summary

The steps below highlights the procedure for setting up WebApps and construct pages.

1. Create a Datastore:

   • Register your database for Construct usage as datastore in Syniti Knowledge Platform > Data Catalog.

   • Design the database with tables and views.

   • Register tables and views as datasets within the datastore.

2. Create a WebApp Component:

   Note

   Once a WebApp is created, you can also use Build Assist, your AI-powered WebApp development assistant, to quickly configure WebApp and construct pages through a conversational prompting method. Refer to the Build Assist section.

   Create a WebApp and define its properties such as WebApp’s title, menu and menu links, dictionaries, datastores, WebApp groups.

3. Create Construct Page Components:

   • Use different page layout options to create and structure construct pages.

   • Include page properties such as title, UI properties, dictionaries, display style, and grids, charts, and forms datasets.

4. Secure WebApps:

   Apply security settings at WebApp and construct page levels using WebApp groups.

5. Configure Column and Input Type Components:

   • Review required columns to be included in the grid and form layouts.

   • Configure columns’ input data type components, for example, text boxes, lists, date & time, buttons, and checkboxes.

   • Control access for managing data on grids and forms.

6. Link Between Columns and Page Sections:

   • Establish data bindings among different grids and forms, or between a record within a grid/form and a grid/form.

   • Establish links between different construct pages.

7. Configure Events:

   • Set an event to be foreground or background processed.

   • Configure Event Tasks such as validations (runs via a SQL View or Stored Procedure) and business rules (runs via a SQL Stored Procedure).

8. Preview WebApp:

   Preview changes of construct pages before publishing them.

9. Deploy and Reiterate:

   • Publish the design on Construct Preview home page.

   • Review with stakeholders, gather feedback, and re-iterate on configurations and publish new versions.

Advanced Mode Using JSON Editor

WebApp Builder’s Advanced mode leverages the JSON Editor to define WebApps and construct pages structures, UI components, data bindings, menus, and events (validation and business rules) in JSON format. With the JSON editor, you can use structured JSON to define grids and forms layout, tab structures, and page and field behaviors. You can also create reusable templates or code snippets that can be embedded into multiple construct pages. This approach empowers WebApp Designers to focus on logic and application development.

Refer to Working with the JSON Editor for more information on using the Advanced mode for developing WebApps and construct pages.

Build Assist

To further streamline the WebApp building experience, an integrated conversational AI assistant, Build Assist is available for quick assistance in a conversational style prompting. This assistant can interpret conversational prompt, such as “Create a page for enriching vendor information using a grid on the left and properties card on the right” or “Remove sorting for all fields”, and translate them into the correct structural configuration. Whether in form-based or advanced mode, Build Assist helps demystify complex requirements and accelerates the design process.

Refer to Build Assist for more information.

Related Articles

• Build Assist

• Construct Events

• Datasets

• Datastores

• Design Your Database

• Dictionaries

• Logs

• Working with the JSON Editor