eForm Builder screen

Lets you create or change an eForm.

Figure 1. eForm Builder screen

eForm Builder screen

Background and Setup

Video: Form Designer Overview

Video: eForm Builder Interface

Examples

How to Start

There are several ways to open eForm Builder.

Open an eForm in App Builder

  1. Click App Builder.

    Click App Builder
  2. On the App Builder Home screen, click All Apps.

    Click All Apps
  3. On the All Apps screen, on an app, click Edit Edit icon.

    Click Edit
  4. On the App Details screen, hover over an eForm, and click Edit Edit icon.

    Click Edit

Create an eForm in a Process-Based App

  1. Open Process Builder.

    For information about how to open this screen, refer to Process Builder.


    Open Process Builder
  2. In Process Builder, in the Activity Library, open the eForms tab.

    Open eForm tab
  3. On the eForms tab, drag any human task activity onto your process.

    Open eForm tab
  4. On the eForm Configuration screen, click Add New Form.

    Click Add New Form
  5. On the Form Details screen, in the Form Name field, enter the name for the eForm.

    Form Name
  6. Click Next.
  7. On the Choose Form Layout screen, select Blank Form.

    Select Blank Form
  8. Click Finish.

Create a Form-Based App in App Builder

  1. Click App Builder.

    Click App Builder
  2. On the App Builder Home screen, click Add App.

    Click Add App
  3. On the What type of app would you like to build? screen, click Form-Based App.

    Select Form Based App
  4. Click Next.
  5. Create your Form-Based app.

    For more information, refer to Modern Add An App Experience (Form-Based App).

    When you finish creating your app, the eForm Builder screen shows.

Fields

Fields

Field NameDefinition

Save Save icon

Function:
Saves your eForm.
To Open this Field:
Click Save Save icon.
Example:
Refer to:

Save and Check In Save and Check In icon

Function:
Commits your changes to the AgilePoint system.
To Open this Field:
Click Save Save icon.
Example:
Refer to:

Check Out Check Out icon

Function:
Locks the selected item so users cannot change it.
To Open this Field:
Click Save Save icon.
Example:
Refer to:

Undo Check Out Undo Check Out icon

Function:
Deletes all changes made to the application resource file since the last check in.

For more information, refer to What Data Is Deleted When I Delete an App or Application Resource?.

To Open this Field:
Click Save Save icon.
Example:
Refer to:

Print Preview Print Preview icon

Function:
Shows a print preview of the eForm.
To Open this Field:
Click Print Print icon.

Print Print icon

Function:
Lets you print the eForm.
To Open this Field:
Click Print Print icon.
Example:
Refer to:
Limitations:
These form controls are not supported for this feature because they display in IFrames:
  • List Box
  • Map
  • Chart

Save as PDF Save as PDF icon

Function:
Lets you save the eForm in PDF format.
To Open this Field:
Click Print Print icon.
Example:
Refer to:
Limitations:
These form controls are not supported for this feature because they display in IFrames:
  • List Box
  • Map
  • Chart

Cut Cut icon

Function:
Allows you to cut a form control from its original position.
Example:
Refer to:

Copy Copy icon

Function:
Copies the content from its original place and create a duplicate copy of the content at the desired location without deleting the text from the original location.
Example:
Refer to:

Paste Paste icon

Function:
Inserts the copied/cut data at the cursor's location.
Example:
Refer to:

Delete Delete icon

Function:
Deletes the selected item.
Example:
Refer to:

Undo Undo icon

Function:
Undo your last procedure.
Example:
Refer to:

Redo Redo icon

Function:
Cancels your last undo.
Example:
Refer to:

Settings Settings icon
Opens this Screen:
Form Settings
Function of this Screen:
Configures the settings for an eForm.
Example:
Refer to:

Sections Sections icon
Opens this Screen:
Form Section Settings
Function of this Screen:
Configures the form section and navigation bar settings for your eForm.
Example:
Refer to:

CSS CSS icon
Opens this Screen:
Form CSS screen
To Open this Field:
  1. On the eForm Builder screen, click CSS > CSS.

    Click CSS
Function of this Screen:
Lets you add custom CSS code to an eForm.
Example:
Refer to:

Shared CSS Shared CSS icon
Opens this Screen:
Shared Form CSS screen
To Open this Field:
  1. On the eForm Builder screen, click CSS > CSS.

    Click CSS
Function of this Screen:
Applies custom CSS code to all eForms in an app.
Example:
Refer to:

JavaScript JavaScript icon
Opens this Screen:
Form JavaScript screen
To Open this Field:
  1. On the eForm Builder screen, click JS > JavaScript.

    Click JavaScript
Function of this Screen:
Lets you add JavaScript code to an eForm.
Example:
Refer to:

Shared JavaScript Shared JavaScript icon
Opens this Screen:
Shared Form JS screen
To Open this Field:
  1. On the eForm Builder screen, click JS > JavaScript.

    Click JavaScript
Function of this Screen:
Specifies JavaScript code to use in all eForms in an app.
Example:
Refer to:

Columns
Opens this Screen:
Column Layout screen
Function of this Screen:
Specifies the number of columns to show in an eForm.
Example:
Refer to:

Preview Perspective View icon
Description:
Shows how the eForm would look on different types of devices and screens in a new tab of your browser.
Allowed Values:
  • PC Browser PC Browser icon - Shows how the eForm would look on a desktop or laptop.
  • Tablet Landscape Tablet Landscape icon - Shows how the eForm would look on a tablet in landscape mode.
  • Tablet Portrait Tablet Portrait icon - Shows how the eForm would look on a tablet in portrait mode.
  • Phone Landscape Phone Landscape icon - Shows how the eForm would look on a mobile phone in landscape mode.
  • Phone Portrait Phone Portrait icon - Shows how the eForm would look on a mobile phone in portrait mode.
Default Value:
None
Example:
Refer to:

View Form JSON View Form JSON icon
Description:
Shows the eForm in JSON format.
To Open this Field:
  1. Click View JSON View JSON icon.
Example:
Refer to:

Import Form Import Form icon
Description:
Uploads an eForm in JSON format from your local file system.
To Open this Field:
  1. Click View JSON View JSON icon.
Example:
Refer to:

Export Form Export Form icon
Description:
Saves the eForm in JSON format.
To Open this Field:
  1. Click View JSON View JSON icon.
Example:
Refer to:

Library Library icon
Opens this Screen:
My Control Library screen
Function of this Screen:
Shows a list of form controls you have created on all of your eForms in an app.
Example:
Refer to:

Form Data Form Data icon
Opens this Screen:
Form Data screen
Function of this Screen:
Shows a list of process data variables that you can use to configure your activity, instead of fixed values.
Example:
Refer to:

Rule Builder Rule Builder icon
Opens this Screen:
Rule Builder screen (eForm Configuration)
Function of this Screen:
Lets you configure rules that specify the behavior of your eForm and it's form controls.
Example:
Refer to:

Themes Themes icon

Function:
Lets you customize the theme for your eForm.
Example:
Refer to:

Translator Translator icon
Opens this Screen:
Translator screen
Function of this Screen:
Lets you configure translator to translate the language for your eForm and its form controls.
Example:
Refer to:

Bulk Edit Bulk Edit icon
Opens this Screen:
Bulk Edit screen
Function of this Screen:
Lets you configure the properties of all form controls in your eForm at one time.
Example:
Refer to:

Row Scale Row Scale icon

Function:
Lets you customize the height of each row in your eForm.
Example:
Refer to: