Explore WebApp Builder UI

  • Updated on Dec 9, 2025
  • 2 minute(s) read
  • DS
  • AF
 Prev Next

Creating and configuring simple or complex WebApps requires intuitive tools that balance flexibility with usability. The current user interface (UI) for building WebApps using the WebApp Builder is designed to provide both novice and experienced users with powerful, yet approachable features. This article explores the key UI elements that facilitate WebApp creation, focusing on structured navigation, dynamic editing modes, and intelligent assistance using Build Assist.

Only Administrators and Business Administrators (WebApp Designers) have access to the WebApp Builder.

Menu

You can access the Construct Preview module menu from the upper-left corner of the WebApp Builder interface. From this menu, you can navigate to the Logs and the Construct Preview home page.

To access other modules in the SKP, click the Syniti Applications platform menu and switch to the required module.

Left Navigation Panel (Tree View)

At the core of the WebApp Builder UI is a tree navigation panel on the left side of the page, which allows you to traverse the hierarchical structure of a WebApp. Each node in the tree represents a component or section of the WebApp, such as Dictionaries, Pages and its sub-components, Menus, and WebApp Groups. You can use the Search bar to find required components. This structure enables you to quickly locate and edit specific components of the WebApp and construct pages.

You can access the configuring options for each node using the More Options (…) button displayed next to each node. This button is only available for nodes and sub-components that have configurable fields or properties.

Center Details Pane

When a you select a node from the navigation tree, the center details pane updates to display relevant fields associated with that component. In form-based UI mode, these fields appear as editable input forms, drop-downs, and toggle switches, allowing you to easily configure content and layout without writing code.

Switch Between Form-Based UI and Advanced Mode

You can toggle between two main modes of webpage configuration:

  • Form-Based UI Mode: A structured, user-friendly interface ideal for those who prefer working with pre-defined fields and visual inputs.

  • Advanced Mode: Designed for experienced users with JSON knowledge, this mode displays the WebApp configuration as a structured JSON definition. When a you click a node in the tree navigation panel while in Advanced Mode, the corresponding section in the JSON is automatically focused, making it easier to locate and edit the desired configuration block. Refer to Working with the JSON Editor for more information.

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 prompts—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.

Preview Your Design

At any point during the designing process, WebApp Designers can click the Save & Preview button to visualize how the construct pages in a WebApp will appear once published. Construct Preview will display an error if a component is not configured correctly.

The Preview functionality provides a live feedback loop ensures that WebApp Designers can iterate quickly and with confidence, making design choices based on real-time results.

Delete WebApp

Use the Delete button if a WebApp is no longer required.

Related Articles