Generate Your Screen Using AI Assistant

Add a control that uses ProcessMaker's Artificial Intelligence (AI) to generate Screen components that use natural language to describe how they work.

Control Description

Use ProcessMaker's AI Assistant to generate a Screen without knowing how to use Screen Builder controls. From within Screen Builder, use the AI Generated control to use ProcessMaker Artificial Intelligence (AI) to generate functional Screen controls by describing in natural language how those controls function.

AI Assistant in Screen Builder

AI Generated controls are a no-code way to design a Screen quickly:

1. Add an AI Generated control to your Screen.

2. Enter text into the AI Generated control using almost any natural language that describes the functional needs of a section or the entirety of your Screen. You may enter your natural language Screen description in one language, but specify that the Screen user interface labels be in a different language. Multiple AI Controls may be used in a Screen, one to describe and generate different sections of that Screen without even understanding what each Screen Builder control does.

3. The AI Generated control previews the layout of the Screen based on its interpretation of your natural language.

4. Optionally regenerate a new preview based on the same or different description, or accept the layout.

5. After accepting the layout preview, the AI Generated control renders the preview into functional controls that are ready to use. You may further configure those controls if necessary: these are now standard controls like any other.

The following Screen Builder controls are supported. These are listed in alphabetical order.

• Checkbox

• Date Picker

• File Download

• File Preview

• File Upload

• Image

• Line Input

• Photo/Video

• Rich Text

• Select List

• Signature

• Submit Button

This control is only available for Form-type Screens. See Screen Types.

Permissions Required

Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:

• Screens: Edit Screens

• Screens: View Screens

See the Screens permissions or ask your Administrator for assistance.

Add the Control to a Screen

Permissions Required

Permissions are required to do this.

Design Best Practice

Avoid designing with more than 25 controls in one Screen.

Follow these steps to add this control to the Screen:

1. View the Screen page to which to add the control.

2. Locate the AI Generated icon in the panel to the left of the Screen Builder canvas.
3. Drag the AI Generated icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.

4. Place into the Screen Builder canvas where you want the control to display on the Screen.
5. Describe the functional components for your Screen using natural language.

6. After the AI Control renders the control(s) for your Screen, review configuration settings and then validate your Screen.

The AI Control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.

Describe the Functional Components for Your Screen Using Natural Language

After adding an AI Generated control to a Screen page, enter a functional natural language description for the Screen components that the AI Generated control will generate.

Follow these steps to describe how the Screen components are to function:

1. Select the AI Generated control into which to enter your natural language description of its functionality.

2. Expand the Configuration panel to the right of the right-side of the Screen Builder canvas if it is not already. The Description setting displays.
3. In the Description setting, enter a functional natural language description for the components that the AI Generated control will generate. One AI Generated control description may use no more than 1000 tokens. A token is a common sequence of characters found in text for a particular language. Generally, one token corresponds to approximately four (4) characters of common English-language text. This corresponds to approximately 100 tokens to about 75 words in English. To the right of the Description label displays how many tokens your description currently uses. If your description exceeds 1000 tokens, shorten the length of your description.

4. Click the Generate button. The AI Generated control displays a progress bar for the percentage completion of a Screen preview based on your description. When complete, a preview of your Screen control(s) displays within the AI Generated control. Use this preview to evaluate if the AI Generated control provides the control(s) you intended.

5. Do one of the following:

   • Regenerate the preview: Revise and/or regenerate the AI Generated control's preview of the Screen layout based on the same or a different description.

   • Accept the preview: Click the Apply Changes button above the preview. The AI Generated control immediately renders the preview as functional controls which can be configured from the default settings the AI Generated control provides. The Variable Name setting for each rendered control uses a placeholder value since this setting is required for all controls.

Move the Control on the Page

See Move a Control on the Page.

Copy the Control with its Settings

Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.

Permissions are required to do this.

Follow these steps to copy a control:

1. Select the control to be copied.

2. Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.

As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.

Delete the Control from a Screen

Permissions are required to do this.

Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.

Follow these steps to delete a control from a Screen page:

1. Select the control to be deleted.

2. Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.

Settings

Permissions are required to do this.

The AI Generated control has the following panels that contain settings:

• Configuration panel

• Advanced panel

Configuration Panel Settings

Enter a functional natural language description for the components that the AI Generated control will generate. As you enter a description, the number of tokens that the AI Generated control will use to generate those components displays. A maximum of 1000 tokens may be used per AI Generated control. See Describe the Functional Components for Your Screen Using Natural Language.

Advanced Panel Settings

Below are settings for the AI Generated control in the Advanced panel:

• Visibility Rule

• Device Visibility

• CSS Selector Name

Visibility Rule

Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.

Note the following regarding how to use visibility rules:

• To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.

• Visibility rules override custom CSS settings.

Device Visibility

Select on which device types this control displays:

• Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.

• Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.

• Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.

The AI Generated control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.

CSS Selector Name

Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.

See the following best practices regarding custom CSS in Screens:

• Editing a CSS name to represent this control in custom CSS syntax

• Visibility rules override custom CSS settings

Related Topics

pageScreen TypespageScreen Builder ModespageValidate Your ScreenpageBootstrap Component Control SettingspageBootstrap Wrapper Control SettingspageCheckbox Control SettingspageDate Picker Control SettingspageFile Download Control SettingspageFile Preview Control SettingspageFile Upload Control SettingspageGoogle Places Control SettingspageImage Control SettingspageLine Input Control SettingspageLoop Control SettingspageMulticolumn / Table Control SettingspageNested Screen Control SettingspagePage Navigation Control SettingspagePhoto/Video Control SettingspageRecord List Control SettingspageRich Text Control SettingspageSelect List Control SettingspageSignature Control SettingspageSubmit Button Control SettingspageTextarea Control SettingspageExpression Syntax ComponentspageValidation Rules for "Validation Rules" SettingspageReference Magic Variables in ProcessMaker Platform Assets