Font Size:

Visual Builders

Visual Builders in Joget DX 9 empower users with intuitive tools to streamline form creation, list management, UI design, and process automation. Each builder enhances usability and functionality, ensuring efficient application development and customization.

Builders

This section explores the capabilities of Joget DX 9 Visual Builders, providing tools to create and manage:

Form layouts with comprehensive, responsive design previews.
Lists with enhanced control and device compatibility.
Custom UIs with efficient element customization and responsive design previews.
Automated processes with streamlined configurations and device-specific previews.
Customize the visual appearance of themes as desired by modifying CSS properties.

Details the capabilities in various Joget DX 9 Builders, focusing on improving usability and functionality across form creation, list management, UI design, and process automation.

Icons	Form Builder	List Builder	UI Builder	Process Builder	Theme Builder
Search Palette	✓	✓	✓	✓	✓
Add to Favourite	✓	✓	✓	✓	✘
Property Editor	✓	✓	✓	✓	✓
Search Property	✓	✓	✓	✓	✓
View as Desktop, Tablet, Mobile	✓	✓	✓	✘	✓
Suggest ID based on Label	✓	✘	✓	✘	✘

How to use

Builders in Joget DX come with a simple drag-and-drop design. Simply drag an element from the palette onto the canvas before configuring it, which is done by clicking on the element to open the Property Editor.

Hovering over elements on the canvas displays additional options depending on the element type and the Builder. Below are the possible options:

Select Parent: Selects the parent element.
Move Up: Rearranges the element order by moving the selected element up.
Move Down: Rearranges the element order by moving the selected element down.
Add Column: Splits the section in half by adding a column to allow elements to be placed side by side.
Default Styles: Modify the style of the selected section.
Remove: Removes the selected element highlighted in red.

Form Builder

The Form Builder now incorporates a Property Editor, simplifying the modification of form element properties. Users can easily search for specific properties using the new search functionality within the editor.

The blue check box (seen on the top left of Figure 1) allows you to automatically save any changes applied to an element once the property editor is closed. You can close the property editor by clicking the X button next to the blue check box.

Additionally, the ability to view form layouts across Desktop, Tablet, and Mobile devices provides a comprehensive preview for responsive design.

Tablet
Mobile

In the form builder's element palette, you can search for an element using the search bar (the Search Palette text box). You can also add elements to your favorites by clicking on the star icon so that they show up at the top of that element category.

At the bottom of the Form Builder palette, there is also an option to download elements as plugins by clicking Get More Plugins From Marketplace.

List Builder

Similar to the Form Builder, the List Builder incorporates a Property Editor and enables property search, thereby enhancing user control over list configurations. It also offers previews across different devices to optimize list display compatibility.

Tablet

Mobile
Element Palette

At the bottom of the List Builder palette, there is also an option to download elements as plugins by clicking Get More Plugins From Marketplace.

UI Builder

The UI Builder introduces a Property Editor and search capabilities within its palette, enabling users to efficiently customize user interface elements. Like the other builders, it allows previews across Desktop, Tablet, and Mobile views for responsive UI design.

Tablet

Mobile

Element Palette

At the bottom of the UI Builder palette, there is also an option to download elements as plugins by clicking Get More Plugins From Marketplace.

Process Builder

Incorporating advanced features similar to other builders, the Process Builder enhances process automation with a Property Editor and palette search functionalities. It supports previewing processes across different devices to ensure a seamless user experience across platforms.