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

• Form Builder
• List Builder
• UI Builder
• Process Builder
• Theme Builder

Components

• Builder Advanced Tools
• Styles

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.

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
  

Form Builder also features a Default Styles button for the entire form, which controls what the default look of all elements should be across the board. The form default styling can be overridden by setting the styling of each individual element.

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.

• Element Palette:
  

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

Theme Builder

Theme Builder allows users to customize the visual appearance of Joget apps by modifying specific CSS properties.

• Tablet
  
• Mobile
  
• Global View
  
• Component View
  
• Component Palette
  

Builder Features

Color Picker

The color picker is available in the Styles tab of the Form, UI, and List Builder, as well as in Theme Builder, to help with selecting the right color to fit your brand.

Joget DX 9.1 features a new color picker library (Coloris) for an improved color selection experience. Versions prior to Joget DX 9.1 only feature a basic color picker, as demonstrated in the image below:

1. Eye Dropper
   The Eyedropper feature, which users can activate by clicking the eyedropper button on the color picker dialog.
   
   After clicking the Eye dropper, the user can select any color on the browser to get that color, and it will update the color picker.
   Note
   The Eyedropper feature is limited, as not all browsers support it. Can check here for support.
   Custom Color Palette:
   
   Users can add a custom color palette through the JSON configuration by setting predefinedPalette.
2. Save and Remove Color
   
   New colors can be added to the palette by choosing the color and clicking on the Save button. You can also remove that color by hovering over that color, and a trash icon will appear.
3. Recent Colors
   Recently used colors will be saved. The maximum number of recently used colors at one time is 6.
   New Color Picker UI: