Digital Forms

​

Features

• Improved user experience with a single interface for input collection.
• Easy form creation using simple drag and drop actions.
• Vast component library to cater to all your form requirements.
• Provision to define rules for input validations and visibility suiting your use case.
• Automatic dialog task generation from the Form enabling switching between Form or Conversation experience based on the channel of interaction.

​

General Setup

• Form Creation: Define a Digital Form by adding components and configuring their properties.
• Form Invocation: Forms are invoked from inside a task or process:
  • A form is included as a component in the task. The dialog task offers a Form Experience and Conversation Experience based on the channel of interaction.
  • A Digital Form is added to a Digital View with a dialog task triggered when a form is submitted from there.
• Form Submission: When it’s submitted, the component values are validated and any errors are highlighted. Based on the mode of invocation, post successful validation:
  • The AI Agent execution proceeds as per dialog flow in case of dialog task invocation.
  • The selected task is triggered.

​

Create a Form

1. Under Automation AI > Use Cases > Digital Skills, select Digital Forms.
2. On the Digital Forms screen, click New Form.
3. On the New Form page, enter the following:
   • Name of the Form.
   • Display Name for the Form.
   • Description of the Form.
   
4. Select form’s Header Style: You can choose a specific header style from the listed illustrations – the circle indicates the position of logo/icon with respect to the title of the form in the header. Click the card to select the style. If it has a logo, you can upload an image file (jpg or png) for the logo.
   During the Export of the app, the logo isn’t exported along with Digital Forms. So, when importing this App, you need to separately copy the logo image file and then manually reupload the logo.
5. Turn on the Description toggle if you want to show a description of the form in the header.
6. Form Security – Enable Secure Form Data to redact form data from the App Context, Debug Logs, Service Calls, Agent Transfer, and the Bot Kit. While enabling, you can also choose whether to display the Secure Form icon to your end users. Once enabled, the Platform will replace the user input with a unique random system-generated alphanumeric value in all the modules. Also, the Secure Form icon and a tip will be displayed, notifying the user that the form is secure. Secure Form feature ensures data security at form level. You can achieve securing data at component level too. Read here to know more.
7. Pre-Processor script—The Pre-Processor script in the form settings can be used by the developer to manipulate all the data required for the form that can’t be customized from the UI design view. For example, in the case of a multilingual AI Agent, the user can customize the form UI & standard responses of the components in the digital form so that they appear based on the selected app language. Moreover, you can provide dynamic variables to replace the static content in the pre-processor script for use in the form using environment, content, and context variables. The platform processes and resolves the pre-processor script as the first step in the form node execution. The same can be seen in the debug log. As part of this, the updated definition from the pre-processor script is passed to webUI to render the form. Example: Suppose you want to change the standard response of a field of URL type in a digital form based on the app language. You’ve added English, Spanish, German, and Japanese as your app languages.
   let formDef = koreUtil.getFormDefinition();
   if(context.currentLanguage === 'en'){
       formDef.formMsgMeta.URL_INVALID_FORMAT = 'Invalid URL';
   }
   elseif(context.currentLanguage === 'de'){
       formDef.formMsgMeta.URL_INVALID_FORMAT = 'ungültige URL';
   }
   elseif(context.currentLanguage === 'es'){
       formDef.formMsgMeta.URL_INVALID_FORMAT = 'URL invalida';
   }
   else{
       formDef.formMsgMeta.URL_INVALID_FORMAT = '無効なURL';
   }
   
   
   • This field will be available only while updating the form and not at the creation time.
   • Defining a pre-processor script is not mandatory. The default standard responses will always be present.
   • This feature is available only for Automation AI.
   Please click here to learn more about the digital form’s pre-processor script.
8. Click Save & Proceed.

​

Configuration setup using Pre-Processor script

• Make Language specific customizations
• Populate Dynamic data from external sources (Eg: data file or API)
• Populate Dynamic data using variables
• Pre-fill the form with static or dynamic data (default value using value or context variable)

let formDef = koreUtil.getFormDefinition();

• Components: for field and form level customizations like Form Header, Description, Field Names, Descriptions, Default Text, Validation rules etc.
• formMsgMeta: for customizing Standard Messages and Standard Error Responses

​

Components

formDef.components[<<index>>].metaData.<<keyName>> = '<<value>>';

formDef.components[0].metaData.displayName = '名前';

​

formMsgMeta

formDef.formMsgMeta.FIELD_MANDATORY = 'This is a mandatory field; please provide a value';

​

Use Case 1: Language specific customizations

let formDef = koreUtil.getFormDefinition();
if(context.currentLanguage === 'en'){
   	formDef.components[0].metaData.displayName = 'Name';
formDef.components[1].metaData.displayName = 'Date of Birth';
}
else if(context.currentLanguage=== 'de'){
	formDef.components[0].metaData.displayName = 'Name';
formDef.components[1].metaData.displayName = 'Geburtsdatum';
}
else{
	formDef.components[0].metaData.displayName = '名前';
formDef.components[1].metaData.displayName = '生年月日';
}

let formDef = koreUtil.getFormDefinition();
if(context.currentLanguage === 'en'){
    formDef.formMsgMeta.FIELD_MANDATORY = 'This is a mandatory field. Please provide a value';
}
else if(context.currentLanguage === 'de'){
    formDef.formMsgMeta.FIELD_MANDATORY = 'Dies ist ein Pflichtfeld. Bitte geben Sie einen Wert ein';
}
else{
    formDef.formMsgMets.FIELD_MANDATORY = 'これは必須フィールドです。値を入力してください';
}

​

Use case 2: Dynamically generating form text and data using Variables

• Pre-fill the name field
• Personalize the labels of the other fields

formDef.components[0].metaData.defaultvalueInput = context.entities.entName;

formDef.components[1].metaData.displayName = context.entities.entName + ''s Date of Birth';
formDef.components[2].metaData.displayName = context.entities.entName + ''s Phone Number';
formDef.components[3].metaData.displayName = context.entities.entName + ''s E-Mail';
formDef.components[4].metaData.displayName = context.entities.entName + ''s Address for Correspondence';

formDef.formMsgMeta.useFormMsgMeta = 'yes';
formDef.formMsgMeta.FIELD_MANDATORY = context.entities.entName + ', this is a mandatory field. Please provide a value.';

​

Use Case 3: Dynamically generating form data from external sources

var resultSet = context.<<NameOfService>>.response.body.queryResult;
for (var i=0; i<resultSet.length; i++) {
	formDef.components[<<componentIndex>>].metaData.<<keyName>> = context.<<NameOFService>>.response.body.queryResult[i].<<AttributeName>>
}

​

Add Components

​

Add Form Sections

​

Form Actions

• Create a New Form, as seen above.
• Edit the Form.
• Use the Branding option to customize a form.
• Test forms.
• Delete forms.

​

Edit

• The Component Listing is used for selecting and adding components to the Form by simple drag and drop action.
• Use the View Toggler to switch between Desktop View and Mobile View.
• Use the Move Component Handle Bar against each of the components to change its location by a simple drag and drop action;
• Use Form Actions to:
  • Test the form to see the preview of the Digital Form in the Platform.
  • Delete the Form. Please keep in mind that deleted forms can’t be restored.
  • Change the Form Settings such as name, display name, and description.
• Use the Component Actions to access the Settings, Duplicate, and Delete options for each of the form’s components.
• You can change the components’ properties from the Component Settings popup:
  • Use the Component Docker to dock/undock the settings pane to the screen.
  • Use the Component Selector to navigate through the components on the Form.

​

Branding

​

Test

​

Invoke a Form

1. From a Task: You may include a form as a component in a dialog task for defining the task. The dialog task offers Form Experience and the usual Conversation Experience for filling the form data. You can choose the preference based on the channel of interaction or any other criteria based on your requirements.
2. From a UI flow: You can add a Digital Form to a pane and choose a dialog task to trigger when the form is submitted from the pane.

​

Invocation from Dialog Tasks

1. Create/open the dialog from where you want to invoke the Digital Form.
2. Click the + icon next to the node where you want to add the Form.
3. Select the Digital Form option and then the form from the list. You can choose to add a Digital Form directly or use an existing Form Node.
4. You’re prompted to select the Form Experience, it can be:
   • Only Form UI – This creates a Form Node and associates it with the Digital Form selected. This is the default option.
   • Both Form UI and Conversation Experience (DRAFT) – This further prompts you to choose a channel. When a user is using one of the selected channels they’re presented with a Form UI, the rest of the channel users get a conversation experience. This option creates:
     • A Bot Action Node to determine the transitions to the Form Node and the Sub-dialog Node based on the channels selected.
     • A Form Node for the Digital Form, same as was generated for the Only Form UI above.
     • A Sub-dialog Node to capture the required entities (as defined in the Digital Form using components) for the conversational experience.
     • A Group encompassing the following nodes. This grouping can be renamed and/or deleted. Learn more.
     
5. You can set the Properties for each of the nodes added.
   • The Form Node. Following Component Properties are of special interest:
     • Submit Message – Message displayed to the end-user on successful submission of the form
     • Web/Mobile SDK Form Behavior – Using this option you can either have the form displayed inline the chat window or open on a full page. Also, you can either go ahead with the default submit prompt or configure the setting to display a custom and more specific message to be shown in chat. Learn more.
     • Bot Action Node, in case of the conversation experience flow, can also be configured in the Logic Node as follows:
     • Manage Context Variables is used to create and set values for the context variables. Remember to use the full path of the variable in the key field ie. context.BotUserSession.<variable_name>
     We urge you not to make changes to the connection settings as this affects the AI Agent’s performance.
   • Sub-dialog Node is configured as a normal Dialog Node as follows:
     • Use the Entity Post-assignment to capture the user input.
     • In case you modify the sub-dialog or the source form, you’re presented with an option to Regenerate Dialog. This ensures that the changes are reflected in the task without having to rebuild the entire task. Be aware that the changes are reflected in all places this sub-dialog is used.
     
6. The user input can be accessed as follows:
   • Form component values are accessed from the Context Object using {{context.forms.form_name.component_name}}
   • In the case of the sub-dialog, the variables used in the post-assignment settings as {{context.<variable_name>}}
7. You can continue with the Dialog Task as per your business needs. For example, you can use the Form Component values as input to a Service Node to update the data or use the Script Node to process it further. If you’re using the conversation experience too, remember to connect the auto-generated sub-dialog to the process flow.

​

Invocation from Panels

1. Create a widget to invoke the Digital Form within Digital Views from Automation AI > Use Cases > Digital Skills.
2. Enter the name.
3. Select Digital Forms as the Source.
4. Add a Form by selecting it from the drop-down list.
5. Select the Dialog to Invoke on Submit from the drop-down list.
6. Click Save.
7. Add the Widget to an existing panel or create a new panel. You can add a form directly to a panel, it creates a widget by default.
8. You can Test the panel.
9. Follow the steps provided here to publish and host the panels.
   While a Digital Form is used to define multiple Widgets and also add to multiple panels, it’ll be associated with a single Dialog Task across all Widgets and Panels.

​

The User Experience

​

Form Experience

• The link is active only for a certain duration of time, it becomes inactive after that.
• Even within the active period, it can be used only a limited number of times.

​

Conversation Experience

​

Exceptions

​

Panel Flow

​

Manage AI Agents with Digital Forms

​

Publish

• In-development when a form is created.
• Awaiting approval when a form is submitted to Publish and the request is waiting for the admin to take action.
• Rejected when the Publish request is rejected by the admin.
• Published In the Platform, the status of a Digital Form remains In Development even after publishing. On publishing the form, you can see the form listed under Publish Status → View Publishing Summary, but the status on the Digital Forms main page remains as In Development. The In Development and Published versions of the AI Agent can be viewed by toggling between the respective statuses in the top search-bar.
  If any edits are done to the Digital Form while it’s In Development, the changes would be reflected in the Published version as soon as you publish the form.
• Suspended when a published form is suspended by the admin.

​

Pre-publishing Validations

• The corresponding Digital Form is already published, or
• The corresponding Digital Form is also selected for publishing.

• The corresponding Dialog Task is already published, or
• The corresponding Dialog Task is selected for publishing.

• If the Dialog Task is in a published state, but the Digital Form isn’t in a published state this triggers:
• The Task Failure Event and the corresponding behavior is invoked or
• A relevant Standard Response is displayed and
• Logged as Failed Task in Analytics.
  • Digital Form is in a published state, but the Dialog Task isn’t available then on Form submission, the end-user is presented with the Form’s Error Message.

​

Import

• As with all other AI Agent components, the full import replaces the entire Digital Forms and form details.

• You can choose to include/exclude the Digital Forms in the import.
• This import fully replaces the Digital Forms that are common to the import file and the AI Agent.
• Additional forms in the file are imported into the AI Agent.
• Additional forms in the AI Agent are retained.
• Post import, any invalid Digital Form integration details are disassociated with the corresponding forms.

​

Export

• Digital Forms can be selected/deselected from the App Export page under the Bot Tasks category.
• Choose the option to Include dependent dialogs to export Dialog Tasks that are integrated with the selected Digital Forms to define widgets. Note that this doesn’t include the Sub-dialog Tasks generated using Digital Forms.
• Complete information for each of the selected forms are available in the export file and this includes:
  • Fields
  • Field properties
  • Form integrations

​

Form Component Details

​

Components List

• Text Field – used for single-line input.
• Text Area – used for multi-line entry.
• Number – used for numerical entries.
• Radio Button – used as a selection option from a given list.
• Dropdown – Used as a selection option from a given list; can be multi-select.
• Checkbox – Used for multi-select option from a given list.
• Date – Used for date entries, gives a date picker for the user to choose the date. Note : The Date picker displays the month and week names in Japanese characters if the app language is Japanese. This support will be extended to more languages in the future.
• Date & Time – Used for date & time entries. The system displays a date and time picker for the user to choose the date and time. Use the Date component and set the Time option to yes; choose from 12 or 24-hour format.
• Phone Number – Used for phone number entries, allows the user to choose the country code.
• Email – Used for email address entries, validates for xxx@uuu.com format.
• Toggle – Used for switching between two values, ideal for yes/no type of inputs.
• Address – Used for address entries.
• URL – Used for web URL entries, validates for xxx.com format.
• Range Slider – Value selection between specified min and max values; can be represented as a percentage.
• Password - Used to display passwords in their masked form *****

• Button – Used as a clickable component to submit reset, or open an external URL the form. Choose from Primary, Secondary, Tertiary, Ghost, or Danger.
• Label – Used to display a static text box, no action required from the user.
• Protip – Used to mark important information for the end-user, no user action required.
• Note - Used to mark information for the end-user, no user action required.

​

Component Properties

​

Component Mapping Properties

​

Basic

​

Advanced

​

Dialog Node

​

Context Object

"forms": {
    "basicpropertieslist": {
      "TextField": "text",
      "Textarea": "text area",
      "Number": 123,
      "Radio": "Male",
      "Dropbox": [
        "UnderGrad",
        "Other"
      ],
      "Checkbox": [
        "Education",
        "Technology"
      ],
      "Date": "07/08/2020",
      "Date&Time": "07/08/2020 19:00 PM",
      "PhoneNumber": "+919999999999",
      "Email": "john.doe@example.com",
      "toggle": "Yes",
      "Address": "Address",
      "Url": "test.com",
      "rangeSlider": 26.1
    }
  }

​

Prefill Form

context.prefillForms = {
  <form_name>: {
     fields: {
        <form_field1>: "<value1>",
        <form_field2>: <context.session.....>,
        <form_array_field2>: [
             <array_value1&gt,
             <array_value2&gt,
        ],
     },
  },
};

​

Limitations

• Digital Forms won’t work as expected on the following channels:
  • Amazon Alexa
  • Cisco Jabber
  • Google Assistant
  • IVR Voice
  • Twilio Voice
• You’re advised to choose the Conversation Experience for these channels.
• Digital Forms created in the parent app aren’t inherited into Smart Apps.
• The Digital Forms functionality isn’t applicable for Dynamic Routing.