View on GitHub

docs

AgileXRM Documentation

Home –> AgileDialogs Design Guide –> Page Form Shape

Page Form Shape

This shape is only usable in AgileDialogs. It cannot be used in AgileXRM processes.

When a dialog is run, this shape presents a form to the user.

At runtime, the AgileDialogs window has several parts:

Page Configuration Window

This window is used to configure a form in AgileDialogs, to launch this windows select the page shape and click the ellipsis of the FormConfiguration parameter in the properties window.

This window is comprised of 4 sections:

Control List: In the top left part of the window it lists the controls that are already added to the form. These are identified by the name of the variable which will store the value provided by the user:

The buttons on the bottom are used to Add, Remove controls and to move them Up and Down in the form.

It is also possible to Copy & Past controls using the contextual menu (mouse right-button click).

  1. Control Configuration: To configure a specific control, select it in the list, and the properties of the selected control are presented on the right panel:

  1. Page Preview: The bottom right panel of the window shows a design-mode preview of the dialog:

At design-time the controls have a slightly darker background color to help in the design effort but this is not shown at runtime.

The selected control will have even a darker background color to clearly identify it.

  1. Form Properties

    You can access to the configuration window by clicking at the options

    button.

Properties Description
Render Mode You can choose the render mode to define how AgileDialogs render the pages. Available values are Default, Continuous and Popup. Each render mode is explained at its own section.
Disable Back (Clear History) If checked, when the dialog arrives to this page, the dialog history is cleared and the Back button becomes disabled. This is useful when the dialog designer decides to block the user from going back to previous steps before this one
Hide this page from breadcrumb If checked, the page will not show its breadcrumb functionality on the upper-left hand side of the page.
Change Next Button text to When filled in, it changes the caption of the predefined Next button on the lower right corner of the Dialog, to the literal we have entered.
Validate controls upon submit only By default, AgileDialogs validates and shows the validation message label each time user changes selected control. If checked the form will be only validated on navigation

Control Configuration

The control configuration window has three tabs:

Configuration tab.

These are the properties used in the configuration of a control:

  • “ACTION”
  • “WID”
  • “WOID”
  • “PIID”
  • “CURRENTWIDISPLAY”
  • “dialogState”
  • “AID”
  • “ContinueWID”
  • “lcid”
  • “orgname”
  • “s508”
  • “ProcessParams”
  • “ProcessNotes”
  • “ACTION”
  • “WID”
  • “WOID”
  • “PIID”
  • “CURRENTWIDISPLAY”
  • “dialogState”
  • “AID”
  • “ContinueWID”
  • “lcid”
  • “orgname”
  • “s508”
  • “ProcessParams”
  • “ProcessNotes”

The content of the caption can include dynamic values using ${variablename} syntax. The context button can be used to open the context window and include dialog variables in the caption. To paste content from other applications use the Paste button provided. Not all HTML content is supported by this configuration tool and content copied from applications like Word, for instance, can cause unexpected behaviors.
To insert blank lines in the caption use Shift+Enter.

Help tab

If a control has Help content, a Help icon is shown next to the control, that when clicked will open the contextual Help window

This HTML content can have references to external images. The images should be hosted in a web server and the URL should be accessible at runtime by the user.

Page Canvas

The Page canvas is rendered with Responsive Design, meaning that the screen real-estate is used to show the controls in an optimal way.

The width of the Page is divided into 12 columns and each control can occupy a certain number of columns as defined by the ColumnSpan property in the Advanced tab.

Control Configuration Advanced Tab

Each type of control has a set of specific properties to configure its behavior.

These specific properties are configured in the Advanced tab.

Besides these specific properties, there are some properties common to all controls.

Common properties are:

Control-specific parameters are explained for each Control-type below.

Preview Configuration

While configuring a Dialog the user that is modeling has a design-view preview of the Page (bottom right panel):

In order to make this preview work, the very first time the Page editor is opened, it is necessary to set a configuration setting.

To set preview configuration click in ToolsAgileDialogs Preview Configuration menu and set the right URL in this window: