{"id":23741,"date":"2020-07-03T16:44:50","date_gmt":"2020-07-03T15:44:50","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-2\/?p=23741"},"modified":"2024-06-07T15:01:28","modified_gmt":"2024-06-07T14:01:28","slug":"digital-forms","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/digital-forms\/","title":{"rendered":"Digital Forms"},"content":{"rendered":"<section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row type_default valign_top\"><\/div><\/div><\/section><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<p><span style=\"font-weight: 400;\">Virtual Assistants engage end-users primarily using a conversational interface that typically includes an exchange of a series of messages. But oftentimes, there is a need to gather information from the end-user to proceed further. Examples include providing delivery address while interacting with an eCommerce agent, details of an issue while reporting to ITSM agent, opportunity details while creating a CRM opportunity, capturing customer details to book a flight, etc.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In a standard Dialog Task, this scenario is designed by placing a series of Entity Nodes connected back-to-back and the user is asked for values for each of these entities sequentially, which is quite tedious and frustrating. Digital Forms mitigate this issue by presenting users with an interactive interface that they can use to provide the information they are asked for in one go.<\/span><\/p>\n<p><strong>Digital Forms<\/strong><span style=\"font-weight: 400;\"> provide a range of input fields that allow your assistant to capture the required details from end-users. After the users complete the form, the input is submitted to the VA to proceed with the task at hand.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we discuss the features and implementation of Digital Forms in the Kore.ai XO Platform. For a use case example and a step-by-step implementation of a Digital Form <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/how-tos\/how-to-configure-ui-forms\/\"><span style=\"font-weight: 400;\">click here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Features\"><span style=\"font-weight: 400;\">Features<\/span><\/span><\/h1>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Improved user experience with a single interface for input collection.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Easy form creation using simple drag and drop actions.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Vast component library to cater to all your form requirements.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Provision to define rules for input validations and visibility suiting your use case.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Automatic dialog task generation from the <\/span><em><span style=\"font-weight: 400;\">Form<\/span><\/em><span style=\"font-weight: 400;\"> enabling switching between Form or Conversation experience based on the channel of interaction.<\/span><\/li>\n<\/ul>\n<h1><span class=\"ez-toc-section\" id=\"General_Setup\"><span style=\"font-weight: 400;\">General Setup<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">You can access <\/span><strong>Digital Forms<\/strong><span style=\"font-weight: 400;\"> from the <\/span><strong>Build<\/strong><span style=\"font-weight: 400;\"> top menu under <\/span><strong>Digital Skills &gt; Digital Forms<\/strong><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928124931\/digital-forms-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46159\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928124931\/digital-forms-1-1024x468.png\" alt=\"\" width=\"640\" height=\"293\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928124931\/digital-forms-1-1024x468.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928124931\/digital-forms-1-300x137.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928124931\/digital-forms-1.png 1950w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Here is the overall usage process for Digital Forms within the Kore.ai XO Platform<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Form Creation<\/strong><span style=\"font-weight: 400;\">: Define a Digital Form by adding components and configuring their properties.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Form Invocation<\/strong><span style=\"font-weight: 400;\">: Forms are invoked from inside a task or process:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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. Learn more by reading about <\/span><span style=\"font-weight: 400;\">the <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-form-node\/\"><span style=\"font-weight: 400;\">Form Node<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A Digital Form is added to a Digital View with a dialog task triggered when a form is submitted from there.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><strong>Form Submission<\/strong><span style=\"font-weight: 400;\">: When it is submitted, the component values are validated and any errors are highlighted. Based on the mode of invocation, post successful validation:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The VA execution proceeds as per dialog flow in case of dialog task invocation.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The selected task is triggered.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1><span class=\"ez-toc-section\" id=\"Create_a_Form\"><span style=\"font-weight: 400;\">Create a Form<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">A Digital Form includes a definition and various components to capture user input.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To create forms, follow the below steps:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Under the <\/span><strong>Build<\/strong><span style=\"font-weight: 400;\"> top menu, select <\/span><strong>Digital Skills<\/strong><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click <\/span><strong>Digital Forms &gt; New Form<\/strong><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">On the <\/span><strong>New Form<\/strong><span style=\"font-weight: 400;\"> page, enter<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Name<\/strong><span style=\"font-weight: 400;\"> of the Form<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Display Name<\/strong><span style=\"font-weight: 400;\"> for the Form<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Description<\/strong><span style=\"font-weight: 400;\"> of the Form<br \/>\n<\/span><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928114021\/create-form-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46034\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928114021\/create-form-1-1024x421.png\" alt=\"\" width=\"640\" height=\"263\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928114021\/create-form-1-1024x421.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928114021\/create-form-1-300x123.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928114021\/create-form-1.png 1949w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li><b>Select form\u2019s Header Style<\/b><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can choose a specific header style from the listed illustrations &#8211; 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.<br \/>\n<\/span><\/span><\/span><\/p>\n<table style=\"background-color: #fffbea; width: 100%;\" width=\"100%\">\n<tbody>\n<tr>\n<td width=\"100%\"><strong><em>Note<\/em><\/strong><em>: <span style=\"font-weight: 400;\">During the Export of the Bot, the logo is not exported along with Digital Forms. So, while importing this Bot, you need to separately copy the logo image file and then manually reupload the logo.<\/span><\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Turn on the\u00a0<strong>Description<\/strong> toggle if you want to show a description of the form in the header.<br \/>\n<\/span><\/span><\/span><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911102822\/Req-4_Digital-Forms-Add-logo-Toggle-Description.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-59265 size-medium\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911102822\/Req-4_Digital-Forms-Add-logo-Toggle-Description-300x159.png\" alt=\"\" width=\"300\" height=\"159\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911102822\/Req-4_Digital-Forms-Add-logo-Toggle-Description-300x159.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911102822\/Req-4_Digital-Forms-Add-logo-Toggle-Description.png 683w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Form Security<\/strong><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> \u2013 Enable <b>Secure Form Data<\/b> to redact form data from the Bot Context, Debug Logs, Service Calls, Agent Transfer, and the Bot Kit.<\/span><\/span><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103123\/Req-5_Digital-Forms-Set-Secure-on.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-59269 size-full\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103123\/Req-5_Digital-Forms-Set-Secure-on.png\" alt=\"\" width=\"536\" height=\"97\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103123\/Req-5_Digital-Forms-Set-Secure-on.png 536w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103123\/Req-5_Digital-Forms-Set-Secure-on-300x54.png 300w\" sizes=\"auto, (max-width: 536px) 100vw, 536px\" \/><\/a>While enabling, you can also choose whether to display the <b>Secure Form icon<\/b> to your end users.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103344\/Req-5_Digital-Forms-Set-Secure-icon-on.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-59276\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103344\/Req-5_Digital-Forms-Set-Secure-icon-on.png\" alt=\"\" width=\"503\" height=\"160\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103344\/Req-5_Digital-Forms-Set-Secure-icon-on.png 582w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103344\/Req-5_Digital-Forms-Set-Secure-icon-on-300x95.png 300w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/a>Once enabled, the Platform will replace the user input with a unique random system-generated alphanumeric value in all the modules. Also, the <b>Secure Form <\/b>icon and a <b>Tip<\/b> will be displayed, notifying the user that the form is secure.<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103506\/Req-5_Digital-Forms-Form-secure-notification.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-59279\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103506\/Req-5_Digital-Forms-Form-secure-notification.png\" alt=\"\" width=\"450\" height=\"383\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103506\/Req-5_Digital-Forms-Form-secure-notification.png 575w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103506\/Req-5_Digital-Forms-Form-secure-notification-300x256.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><span style=\"font-weight: 400;\">Secure Form feature ensures data security at form level. You can achieve securing data at <strong>component (field) level<\/strong> too. <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/how-tos\/how-to-configure-digital-forms\/#Form_Editor\"><span style=\"font-weight: 400;\">Read here<\/span><\/a><span style=\"font-weight: 400;\"> to know more.<\/span><\/li>\n<li><b>Pre-Processor script<\/b><span style=\"font-weight: 400;\">\u2014The Pre-Processor script in the form settings can be used by the developer to manipulate all the data required for the form that cannot be customized from the UI design view.<\/span><span style=\"font-weight: 400;\">For example, in the case of a multilingual bot, the user can customize the form UI\u00a0 &amp; standard responses of the components in the digital form so that they appear based on the selected bot language.\u00a0<\/span><span style=\"font-weight: 400;\">Moreover, you can provide dynamic variables to replace the static contentt in the pre-processor script for use in the form using environment, content, and context variables.<\/span><span style=\"font-weight: 400;\">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.<\/span><b>Example:<\/b><span style=\"font-weight: 400;\">Suppose you want to change the standard response of a field of URL type in a digital form based on the bot language. You have added English, Spanish, German, and Japanese as your bot languages.<\/span>\n<pre><span style=\"font-weight: 400;\">let formDef = koreUtil.getFormDefinition();<\/span>\r\n<span style=\"font-weight: 400;\">if(context.currentLanguage === 'en'){<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0formDef.formMsgMeta.URL_INVALID_FORMAT = 'Invalid URL';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">elseif(context.currentLanguage === \u2018de\u2019{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0formDef.formMsgMeta.URL_INVALID_FORMAT = 'ung\u00fcltige URL';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">elseif(context.currentLanguage === \u2018es\u2019{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0formDef.formMsgMeta.URL_INVALID_FORMAT = 'URL invalida';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">else{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0formDef.formMsgMeta.URL_INVALID_FORMAT = '\u7121\u52b9\u306aURL';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607134410\/xop-8553-pre-processor-script.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61841\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607134410\/xop-8553-pre-processor-script.png\" alt=\"\" width=\"509\" height=\"548\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607134410\/xop-8553-pre-processor-script.png 841w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607134410\/xop-8553-pre-processor-script-279x300.png 279w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Please note that:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">This field will be available <\/span><b>only while updating the form<\/b><span style=\"font-weight: 400;\"> and not at the creation time.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Defining a pre-processor script is <\/span><b>not mandatory<\/b><span style=\"font-weight: 400;\">. The default standard responses will always be present.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Please <a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/digital-forms\/#Configuration_setup_using_Pre-Processor_script\">click here<\/a> to learn more about the digital form\u2019s pre-processor script.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click <\/span><strong>Save &amp; Proceed<\/strong><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">.<\/span><\/span><\/span><br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-59282\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo.png\" alt=\"\" width=\"495\" height=\"540\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo.png 683w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo-275x300.png 275w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/a><\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Configuration_setup_using_Pre-Processor_script\"><span style=\"font-weight: 400;\">Configuration setup using Pre-Processor script<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Earlier, our digital forms can be created only in one language and hence multiple forms need to be created to provide the flexibility to render the forms in different languages for multi lingual bot. Also the\u00a0 messages and errors were\u00a0 available only in English and cannot be customized. This posed a limitation as it didn&#8217;t support all bot languages. Additionally, users lacked the ability to customize the forms using the dynamic data from context.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The pre-processor script has been introduced to counter the above limitations. You can provide values to the relevant keys based on the bot language or any other condition that requires customization of aspects like field labels or standard responses.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To get the form definition that is provided as a response in the <\/span><span style=\"font-weight: 400;\">koreUtil.getFormDefinition<\/span><span style=\"font-weight: 400;\"> and keys that need to be customized, refer to the digital form&#8217;s <\/span><b>JSON view<\/b><span style=\"font-weight: 400;\">. Navigate to <\/span><b>Automation AI &gt; Virtual Assistant &gt; Digital Skills &gt; Digital forms<\/b><span style=\"font-weight: 400;\"> and open the form that you wish to configure. Click <\/span><b>Test<\/b><span style=\"font-weight: 400;\"> on the Form Design view, then select the <\/span><b>JSON<\/b><span style=\"font-weight: 400;\"> tab.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607131113\/xop-8553-json-preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61834\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607131113\/xop-8553-json-preview-1024x822.png\" alt=\"\" width=\"469\" height=\"377\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607131113\/xop-8553-json-preview-1024x822.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607131113\/xop-8553-json-preview-300x241.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607131113\/xop-8553-json-preview.png 1124w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/a><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The pre-processor script allows you to:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Make Language specific customizations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Populate Dynamic data from external sources (Eg: data file or API)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Populate Dynamic data using variables<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pre-fill the form with static or dynamic data (default value using value or context variable)<\/span><\/li>\n<\/ul>\n<p><b>Important:<\/b><span style=\"font-weight: 400;\"> Remember that you must create a form definition object using <\/span><span style=\"font-weight: 400;\">koreUtil.getFormDefinition <\/span><span style=\"font-weight: 400;\">before adding any code to customize any field\u2019s property or standard response. This object consists of the form meta, form components &amp; form messages. Make sure that this is the first line in your javascript code, with the syntax:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">let formDef = koreUtil.getFormDefinition();<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">The below sections contain the keys that you may need to manipulate:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Components: for field and form level customizations like Form Header, Description, Field Names, Descriptions, Default Text, Validation rules etc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">formMsgMeta: for customizing Standard Messages and Standard Error Responses<\/span><\/li>\n<\/ul>\n<p><b>Tip:<\/b><span style=\"font-weight: 400;\"> The entire JSON is usually large, and it may be a challenge to find out the keys that need to be manipulated. You may consider copying the entire JSON, pasting it in any JSON Viewer application wherein you can collapse and expand the sections. You can expand only the <\/span><b>components<\/b><span style=\"font-weight: 400;\"> and <\/span><b>formMsgMeta<\/b><span style=\"font-weight: 400;\"> sections for convenience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140643\/xop-8553-json-sections-collapsed.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-61845\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140643\/xop-8553-json-sections-collapsed.png\" alt=\"\" width=\"640\" height=\"544\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140643\/xop-8553-json-sections-collapsed.png 852w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140643\/xop-8553-json-sections-collapsed-300x255.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Components\"><span style=\"font-weight: 400;\">Components<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The <\/span><b>Components<\/b><span style=\"font-weight: 400;\"> section is a container for all the fields on the form and the keys that can be manipulated in the pre-processor script for customization.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Upon expanding the <\/span><b>components<\/b><span style=\"font-weight: 400;\"> section, which appears as an array in the JSON viewer, you see an indexed sub-sections that indicates the number of fields in the form. For example, the components section in the below screenshot shows that there are 12 fields in the form.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140847\/xop-8553-components.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61848\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140847\/xop-8553-components.png\" alt=\"\" width=\"508\" height=\"427\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140847\/xop-8553-components.png 763w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607140847\/xop-8553-components-300x252.png 300w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">You can see any field\u2019s keys and their values by expanding the sub-section, and then expanding <\/span><b>metaData<\/b><span style=\"font-weight: 400;\">. Usually the index of sub-sections represents the sequence of the fields on the form.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607141208\/xop-8553-expanded-sub-section.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61851\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607141208\/xop-8553-expanded-sub-section.png\" alt=\"\" width=\"614\" height=\"449\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607141208\/xop-8553-expanded-sub-section.png 681w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607141208\/xop-8553-expanded-sub-section-300x219.png 300w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/a><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You can customize the properties of a field by referencing it using its index number within the array using the below syntax:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.components[&lt;&lt;index&gt;&gt;].metaData.&lt;&lt;keyName&gt;&gt; = '&lt;&lt;value&gt;&gt;';<\/span><\/pre>\n<p><b>Example:<\/b><span style=\"font-weight: 400;\"> to customize the <\/span><b>displayName<\/b><span style=\"font-weight: 400;\"> of the first field in the form, below is the code:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.components[0].metaData.displayName = '\u540d\u524d';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Here\u2019s a list of keys and their purpose:<\/span><\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<td><strong>Key<\/strong><\/td>\n<td><strong>Form Setting<\/strong><\/td>\n<td><strong>Purpose<\/strong><\/td>\n<\/tr>\n<tr>\n<td>metaData.displayName<\/td>\n<td>Display Name<\/td>\n<td>The field name visible to the user<\/td>\n<\/tr>\n<tr>\n<td>metaData.placeHolder<\/td>\n<td>Placeholder<\/td>\n<td>The text pre-populated in the field, but is not captured as field data<\/td>\n<\/tr>\n<tr>\n<td>metaData.toolTip<\/td>\n<td>Tooltip Text<\/td>\n<td>The tooltip text associated with the field<\/td>\n<\/tr>\n<tr>\n<td>metaData.isVisible<\/td>\n<td>Is visible<\/td>\n<td>To change the visibility setting; it can be true or false.<\/td>\n<\/tr>\n<tr>\n<td>metaData.required<\/td>\n<td>Required<\/td>\n<td>To establish whether the field is a mandatory one<\/td>\n<\/tr>\n<tr>\n<td>metaData.defaultvalueInput<\/td>\n<td>Default Value<\/td>\n<td>To provide a default value to the field<\/td>\n<\/tr>\n<tr>\n<td>metaData.validateOn<\/td>\n<td>Validate<\/td>\n<td>To mention the event that would trigger validation. Can be onChange or onBlur.<\/td>\n<\/tr>\n<tr>\n<td>metaData.description<\/td>\n<td>Description<\/td>\n<td>Description of the field<\/td>\n<\/tr>\n<tr>\n<td>metaData.disabled<\/td>\n<td>Read-only<\/td>\n<td>To establish whether the field is read only.<\/td>\n<\/tr>\n<tr>\n<td>metaData.options.locale.format<br \/>\n(Only for <strong>Date<\/strong> fields)<\/td>\n<td>Date Format and Time Format<\/td>\n<td>To choose the format of date and time<\/td>\n<\/tr>\n<tr>\n<td>metaData.options.timePicker<br \/>\n(Only for <strong>Date<\/strong> fields)<\/td>\n<td>Time<\/td>\n<td>To show\/hide the time picker within the date picker<\/td>\n<\/tr>\n<tr>\n<td>metaData.options.timePicker24Hour<br \/>\n(Only for <strong>Date<\/strong> fields)<\/td>\n<td>Time Format<\/td>\n<td>To choose the time format between 12 Hour or 24 Hour<\/td>\n<\/tr>\n<tr>\n<td>metaData.options.locale.applyLabel<br \/>\n(Only for <strong>Date<\/strong> fields)<\/td>\n<td>\u2013<\/td>\n<td>The label of <strong>Apply<\/strong> button on the date-time picker; visible only if timePicker is set to true<\/td>\n<\/tr>\n<tr>\n<td>metaData.options.locale.cancelLabel<br \/>\n(Only for <strong>Date<\/strong> fields)<\/td>\n<td>\u2013<\/td>\n<td>The label of <strong>Cancel<\/strong> button on the date-time picker; visible only if timePicker is set to true<\/td>\n<\/tr>\n<tr>\n<td>metaData.countryCode<br \/>\n(Only for <strong>Phone Number<\/strong> fields)<\/td>\n<td>Default Country Code<\/td>\n<td>The Default Country code Eg: +1<\/td>\n<\/tr>\n<tr>\n<td>metaData.countryName<br \/>\n(Only for <strong>Phone Number<\/strong> fields)<\/td>\n<td>Default Country Code<\/td>\n<td>The default Country Name (Eg: United States)<\/td>\n<\/tr>\n<tr>\n<td>metaData.enableDropDownSearch<br \/>\n(Only for <strong>Dropdown<\/strong> fields)<\/td>\n<td>\u2013<\/td>\n<td>To establish whether search box is available in the dropdown<\/td>\n<\/tr>\n<tr>\n<td>metaData.isMultiSelect<br \/>\n(Only for <strong>Dropdown<\/strong> and <strong>Radio Button<\/strong> fields)<\/td>\n<td>Multi Select<\/td>\n<td>To establish whether multiple items can be selected from the dropdown<\/td>\n<\/tr>\n<tr>\n<td>metaData.minSelection<br \/>\n(Only for <strong>Dropdown<\/strong> fields)<\/td>\n<td>\u2013<\/td>\n<td>To establish the minimum number of items to be selected. If metaData.isMultiSelect is <strong>false<\/strong>, this value will be ignored.<\/td>\n<\/tr>\n<tr>\n<td>metaData.maxSelection<br \/>\n(Only for <strong>Dropdown<\/strong> fields)<\/td>\n<td>\u2013<\/td>\n<td>To establish the maximum number of items that can be selected. Works only if metaData.isMultiSelect is <strong>true.<\/strong><\/td>\n<\/tr>\n<tr>\n<td>metaData.values<br \/>\n(Only for <strong>Dropdown<\/strong> and <strong>Radio Button<\/strong> fields)<\/td>\n<td>Dropdown values<\/td>\n<td>An array containing the items in the dropdown. Every item is represented by an index number.<\/td>\n<\/tr>\n<tr>\n<td>metaData.values[&lt;&gt;].value<br \/>\n(Only for <strong>Dropdown<\/strong> and <strong>Radio Button<\/strong> fields)<\/td>\n<td>Dropdown values &gt; Edit Values &gt; Value<\/td>\n<td>The dropdown item<\/td>\n<\/tr>\n<tr>\n<td>metaData.values[&lt;&gt;].selected<br \/>\n(Only for <strong>Dropdown, Checkbox<\/strong> and <strong>Radio Button<\/strong> fields)<\/td>\n<td>Dropdown values &gt; Edit Values &gt; Default<\/td>\n<td>To establish whether the dropdown item is selected by default<\/td>\n<\/tr>\n<tr>\n<td>metadata.toggleDefaultValue<br \/>\n(Only for <strong>Toggle<\/strong> fields)<\/td>\n<td>\u2013<\/td>\n<td>Default state of the toggle, can be <strong>true<\/strong> or <strong>false<\/strong><\/td>\n<\/tr>\n<tr>\n<td>metaData.toggleEnabledValue<br \/>\n(Only for <strong>Toggle<\/strong> fields)<\/td>\n<td>Value &gt; Yes<\/td>\n<td>Value to be read by platform if the toggle is enabled<\/td>\n<\/tr>\n<tr>\n<td>metaData.toggleDisabledValue<br \/>\n(Only for <strong>Toggle<\/strong> fields)<\/td>\n<td>Value &gt; No<\/td>\n<td>Value to be read by platform if the toggle is disabled<\/td>\n<\/tr>\n<tr>\n<td>metaData.minRange<br \/>\n(Only for <strong>Range Slider<\/strong> fields)<\/td>\n<td>Value &gt; Min<\/td>\n<td>Minimum value of the range slider<\/td>\n<\/tr>\n<tr>\n<td>metaData.maxRange<br \/>\n(Only for <strong>Range Slider<\/strong> fields)<\/td>\n<td>Value &gt; Max<\/td>\n<td>Maximum value of the range slider<\/td>\n<\/tr>\n<tr>\n<td>metaData.defaultvalueInput<br \/>\n(Only for <strong>Range Slider<\/strong> fields)<\/td>\n<td>Default value<\/td>\n<td>Default value of the range slider<\/td>\n<\/tr>\n<tr>\n<td>metaData.buttonAction<br \/>\n(Only for <strong>Button<\/strong> component)<\/td>\n<td>Button Action<\/td>\n<td>The action triggered on clicking the button. Can be <strong>submit, cancel, reset or goToUrl<\/strong><\/td>\n<\/tr>\n<tr>\n<td>metaData.url<br \/>\n(Only for <strong>Button<\/strong> component)<\/td>\n<td>URL<\/td>\n<td>URL to navigate to when user clicks the button if Button Action is goToUrl.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><span class=\"ez-toc-section\" id=\"formMsgMeta\"><span style=\"font-weight: 400;\">formMsgMeta<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The formMsgMeta section contains the keys that contain the Standard Responses and Error Messages. If you want to customize these messages and responses, or customize them based on the VA\u2019s language, you can do so in the pre-processor script by manipulating the values of these keys.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These messages and responses cannot be customized from the form design UI. The pre-processor script provides you the required mechanism to create status or dynamic responses based on your requirements.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Upon expanding the <\/span><b>formMsgMeta<\/b><span style=\"font-weight: 400;\"> section, you can see the keys that you can customize.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607142633\/xop-8553-formmsgmeta-keys.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-61855\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607142633\/xop-8553-formmsgmeta-keys-1024x572.png\" alt=\"\" width=\"640\" height=\"358\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607142633\/xop-8553-formmsgmeta-keys-1024x572.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607142633\/xop-8553-formmsgmeta-keys-300x167.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607142633\/xop-8553-formmsgmeta-keys.png 1247w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/span><\/h2>\n<p><b>Note:<\/b><span style=\"font-weight: 400;\"> You will need to set useFormMsgMeta to <\/span><b>yes<\/b><span style=\"font-weight: 400;\"> to ensure that the customized formMsgMeta values are passed on to WebUI for rendering the form. This is an optional key, but not mentioning it will make the form display the system default responses and error messages.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The syntax to set it is\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.formMsgMeta.useFormMsgMeta = 'yes';\r\n<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">The syntax to provide value to a key of the formMsgMeta section is<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.formMsgMeta.&lt;&lt;KEY&gt;&gt; = \u2018&lt;&lt;value&gt;&gt;\u2019;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">The response message customizations are at the form level, that is, a response message of a particular nature will be applicable to all the fields across the form. For example, the customized response message for invalid URL will be the same for all the fields of URL type within the form.<\/span><\/p>\n<p><b>Example:<\/b><span style=\"font-weight: 400;\"> Suppose you want to customize the system response for mandatory fields. The default system response is \u2018This field is required\u2019, but you want the response to be \u2018This is a mandatory field; please provide a value\u2019. This is how you can do it:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.formMsgMeta.FIELD_MANDATORY = \u2018This is a mandatory field; please provide a value\u2019;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Here\u2019s a list of keys and their purpose:<\/span><\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<td><strong>Key<\/strong><\/td>\n<td><strong>Purpose<\/strong><\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FIELD_MANDATORY<\/td>\n<td>Response message if no data is provided in a mandatory field<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FIELD_INVALID_FORMAT<\/td>\n<td>Response message if the data provided in the field is not valid.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.URL_INVALID_FORMAT<\/td>\n<td>Response message if the url entered in the field is of invalid format.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FIELD_TOO_LONG<\/td>\n<td>Response message if the data entered in the field exceeds the maximum permitted length..<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FIELD_TOO_SHORT<\/td>\n<td>Response message if the data entered in the field falls below the required minimum length.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.EMAIL_INVALID_FORMAT<\/td>\n<td>Response message if the data entered in an Email type field in invalid format.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.ERROR_PREVIEW<\/td>\n<td>Response message if error occurs in preview.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.ERROR_DOWNLOAD_ATTACHMENT<\/td>\n<td>Response message if error occurs while downloading attachment.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FILE_SIZE_EXCEED<\/td>\n<td>Response message if file size exceeds the maximum limit.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FILE_UPLOAD_EXISTING<\/td>\n<td>Response message if the file has already been uploaded.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FILE_UPLOAD_ERROR<\/td>\n<td>Response message if error occurs while uploading a file.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FILE_TYPES_SUPPORTED<\/td>\n<td>Response message if user tries to upload a file of unsupported type.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.INVALID_PHONE_NUMBER<\/td>\n<td>Response message if user enters an invalid phone number in a field of Phone Number type.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.ERROR_PROCESS_APP.PUBLISH<\/td>\n<td>Response message when process app is not published<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.ERROR_PROCESS_APP.EXPIRE_INVALID<\/td>\n<td>Response message when the process app being accessed has expired or is invalid.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DISCARD.CONFIRM<\/td>\n<td>Header text of the popup that appears on discarding a form<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DISCARD.DESC<\/td>\n<td>Text within the popup that appears on discarding the form<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DISCARD.SUBMIT<\/td>\n<td>Caption of the \u2018Confirm\u2019 button of the popup. Confirms the action.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DISCARD.CLOSE<\/td>\n<td>Caption of the \u2018Close\u2019 button of the popup. Closes the popup without discarding the form.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_SUBMISSION_CONFIRMATION.HEADER<\/td>\n<td>Header text of the popup that appears on submitting a form<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_SUBMISSION_CONFIRMATION.DESC<\/td>\n<td>Text within the popup that appears on submitting the form<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_SUBMISSION_CONFIRMATION.CLOSE<\/td>\n<td>Caption of the \u2018Confirm\u2019 button of the popup. Confirms the action.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_SUBMISSION_CONFIRMATION.CONFIRM<\/td>\n<td>Caption of the \u2018Close\u2019 button of the popup. Closes the popup without submitting the form.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_SUBMISSION_FAILED<\/td>\n<td>Message that is displayed when form submission fails<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_LINK_EXPIRY<\/td>\n<td>Message that is displayed when the form link expires.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_CANCEL<\/td>\n<td>Message that is displayed when the form is canceled.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.DROPDOWN_MESSAGE<\/td>\n<td>Message displayed on dropdown<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_LOADING<\/td>\n<td>Message displayed when the form is loading<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DATE_PICKER.FORMAT<\/td>\n<td>The format in which the date entered in the date picker will be saved<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DATE_PICKER.CONFIRM<\/td>\n<td>Caption of the Confirm button on date picker<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DATE_PICKER.CANCEL<\/td>\n<td>Caption of the Cancel button of the date picker<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DATE_PICKER.DAYS_OF_WEEK[ ]<\/td>\n<td>Array containing the names of weekdays. They can be customized using the array index based on language or which day does the user want to be the start of the week on the form.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DATE_PICKER.MONTHS[ ]<\/td>\n<td>Array containing the names of months.<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_DATE_PICKER.TIME<\/td>\n<td>Caption of the \u2018Time\u2019 part of date picker<\/td>\n<\/tr>\n<tr>\n<td>formDef.formMsgMeta.FORM_SUBMIT_SUCCESS<\/td>\n<td>Message displayed when form submission is successful<\/td>\n<\/tr>\n<tr>\n<td>formDef.formMsgMeta.FORM_SUBMIt_FAILURE<\/td>\n<td>Message displayed when form submission fails<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_CLOSE_MESSAGE<\/td>\n<td>Message displayed when form is closed<\/td>\n<\/tr>\n<tr>\n<td>formMsgMeta.FORM_CLOSE_BUTTON<\/td>\n<td>Caption of the Form Closing button<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">The below use cases explain the steps to make various customizations using the pre-processor script. The digital form to gather data for opening a bank account is being used as an example. Japanese and German languages have been added to the VA.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144154\/xop-8553-case-study-form.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61858\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144154\/xop-8553-case-study-form.png\" alt=\"\" width=\"468\" height=\"798\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144154\/xop-8553-case-study-form.png 524w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144154\/xop-8553-case-study-form-176x300.png 176w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/a><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Use_Case_1_Language_specific_customizations\"><span style=\"font-weight: 400;\">Use Case 1: Language specific customizations<\/span><\/span><\/h3>\n<p><b>Components:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Suppose you want to customize the display names of the Name and Date of Birth fields based on the selected VA language. <\/span><span style=\"font-weight: 400;\">Since these are the first two fields on the form, their index values are 0 and 1, respectively.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Below is the code to customize the display names:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">let formDef = koreUtil.getFormDefinition();<\/span>\r\n<span style=\"font-weight: 400;\">if(context.currentLanguage === 'en'){<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">formDef.components[0].metaData.displayName = 'Name';<\/span>\r\n<span style=\"font-weight: 400;\">     formDef.components[1].metaData.displayName = 'Date of Birth';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">else if(context.currentLanguage=== 'de'){<\/span>\r\n<span style=\"font-weight: 400;\">     formDef.components[0].metaData.displayName = 'Name';<\/span>\r\n<span style=\"font-weight: 400;\">     formDef.components[1].metaData.displayName = 'Geburtsdatum';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">else{<\/span>\r\n<span style=\"font-weight: 400;\">     formDef.components[0].metaData.displayName = '\u540d\u524d';<\/span>\r\n<span style=\"font-weight: 400;\">     formDef.components[1].metaData.displayName = '\u751f\u5e74\u6708\u65e5';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Let\u2019s assume that currently the VA language is Japanese. This is how the form would look in the run-time:<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144447\/xop-8553-form-fields-in-japanese.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61861\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144447\/xop-8553-form-fields-in-japanese.png\" alt=\"\" width=\"401\" height=\"644\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144447\/xop-8553-form-fields-in-japanese.png 527w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144447\/xop-8553-form-fields-in-japanese-187x300.png 187w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><b>formMsgMeta:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0Suppose you want to customize the standard response for mandatory fields based on the VA language. Below is the pre-processor script for that:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">let formDef = koreUtil.getFormDefinition();<\/span>\r\n<span style=\"font-weight: 400;\">if(context.currentLanguage === 'en'){<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0formDef.formMsgMeta.FIELD_MANDATORY = 'This is a mandatory field. Please provide a value';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">else if(context.currentLanguage === 'de'){<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0formDef.formMsgMeta.FIELD_MANDATORY = 'Dies ist ein Pflichtfeld. Bitte geben Sie einen Wert ein';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">else{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0formDef.formMsgMets.FIELD_MANDATORY = '\u3053\u308c\u306f\u5fc5\u9808\u30d5\u30a3\u30fc\u30eb\u30c9\u3067\u3059\u3002\u5024\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">This is how the standard message would look if the bot language is Japanese:<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144754\/xop-8553-field-level-standard-response-japanese.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61864\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144754\/xop-8553-field-level-standard-response-japanese.png\" alt=\"\" width=\"478\" height=\"740\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144754\/xop-8553-field-level-standard-response-japanese.png 543w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144754\/xop-8553-field-level-standard-response-japanese-194x300.png 194w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Use_case_2_Dynamically_generating_form_text_and_data_using_Variables\"><span style=\"font-weight: 400;\">Use case 2: Dynamically generating form text and data using Variables<\/span><\/span><\/h3>\n<p><b>Component<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Suppose you want to ask the user\u2019s name and pre-fill it in the form fields and labels. In this example, the user\u2019s name is captured in an entity node, and that name is used to:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pre-fill the <\/span><b>name<\/b><span style=\"font-weight: 400;\"> field<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Personalize the labels of the other fields<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144911\/xop-8553-creating-context-var.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61867\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144911\/xop-8553-creating-context-var.png\" alt=\"\" width=\"650\" height=\"524\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144911\/xop-8553-creating-context-var.png 815w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607144911\/xop-8553-creating-context-var-300x242.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You can use the value captured in the entity node using the context variable in the pre-processor script to pre-populate the <\/span><b>Name<\/b><span style=\"font-weight: 400;\"> field using the below code:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.components[0].metaData.defaultvalueInput = context.entities.entName;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">This is how it would look at the time of run:<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145034\/xop-8553-enter-name-open-account.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61870\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145034\/xop-8553-enter-name-open-account.png\" alt=\"\" width=\"448\" height=\"717\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145034\/xop-8553-enter-name-open-account.png 524w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145034\/xop-8553-enter-name-open-account-187x300.png 187w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145423\/xop-8553-name-field-pre-populated-using-variable.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61873\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145423\/xop-8553-name-field-pre-populated-using-variable.png\" alt=\"\" width=\"445\" height=\"569\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145423\/xop-8553-name-field-pre-populated-using-variable.png 520w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145423\/xop-8553-name-field-pre-populated-using-variable-235x300.png 235w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/a><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To personalize the labels of other fields like Date of Birth, Phone Number, Email etc. as well, you can add the below code to manipulate the <\/span><b>displayName<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.components[1].metaData.displayName = context.entities.entName + '\u2019s Date of Birth';<\/span>\r\n<span style=\"font-weight: 400;\">formDef.components[2].metaData.displayName = context.entities.entName + '\u2019s Phone Number';<\/span>\r\n<span style=\"font-weight: 400;\">formDef.components[3].metaData.displayName = context.entities.entName + '\u2019s E-Mail';<\/span>\r\n<span style=\"font-weight: 400;\">formDef.components[4].metaData.displayName = context.entities.entName + '\u2019s Address for Correspondence';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">This is how it would look at run time:<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145548\/xop-8553-field-labels-customized-using-variable.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61876\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145548\/xop-8553-field-labels-customized-using-variable.png\" alt=\"\" width=\"446\" height=\"598\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145548\/xop-8553-field-labels-customized-using-variable.png 522w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145548\/xop-8553-field-labels-customized-using-variable-224x300.png 224w\" sizes=\"auto, (max-width: 446px) 100vw, 446px\" \/><\/a><\/p>\n<p><b>formMsgMeta:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Suppose, in addition to personalizing the field labels and pre-filling the Name field, you want to personalize the form\u2019s Response Message text for Mandatory fields by adding the user\u2019s name so that it becomes <\/span><b>&lt;&lt;User\u2019s Name&gt;&gt;, this is a mandatory field. Please provide a value<\/b><span style=\"font-weight: 400;\">. You can achieve this by adding the below code:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">formDef.formMsgMeta.useFormMsgMeta = 'yes';<\/span>\r\n<span style=\"font-weight: 400;\">formDef.formMsgMeta.FIELD_MANDATORY = context.entities.entName + ', this is a mandatory field. Please provide a value.';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">This is how it would look at run time:<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145733\/xop-8553-response-message-customized-using-variable.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61879\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145733\/xop-8553-response-message-customized-using-variable.png\" alt=\"\" width=\"472\" height=\"493\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145733\/xop-8553-response-message-customized-using-variable.png 525w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240607145733\/xop-8553-response-message-customized-using-variable-287x300.png 287w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Use_Case_3_Dynamically_generating_form_data_from_external_sources\"><span style=\"font-weight: 400;\">Use Case 3: Dynamically generating form data from external sources<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can use external sources of data, like data tables, data fetched from API etc to dynamically generate form data.\u00a0<\/span><span style=\"font-weight: 400;\">The syntax to do that is:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">var resultSet = <\/span><span style=\"font-weight: 400;\">context.&lt;&lt;NameOfService&gt;&gt;.response.body.queryResult;<\/span>\r\n<span style=\"font-weight: 400;\">for (var i=0; i&lt;resultSet.length; i++) {<\/span>\r\n<span style=\"font-weight: 400;\">    formDef.components[&lt;&lt;componentIndex&gt;&gt;].metaData.&lt;&lt;keyName&gt;&gt; = context.&lt;&lt;NameOFService&gt;&gt;.response.body.queryResult[i].&lt;&lt;AttributeName&gt;&gt;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Please note that in such scenarios you will need to add a service node prior to the digital form node, that will fetch the data to be used for dynamically generating the form data.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Add_Components\"><span style=\"font-weight: 400;\">Add C<\/span><span style=\"font-weight: 400;\">omponents<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Once you configure the basic details for your form, the Platform takes you to the form builder, where you can add the components you require.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can drag and drop the components available on the left pane to the canvas and configure their properties to build the form. For details of the available components &amp; their properties.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112944\/drag-component.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45968\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112944\/drag-component.gif\" alt=\"\" width=\"1245\" height=\"528\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">You can search for a given component, or scroll through the list to find what you require.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113029\/search-component.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-46001\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113029\/search-component.gif\" alt=\"\" width=\"1246\" height=\"528\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">You can view the components list in a grid format by clicking the icon on the top right of the list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you hover in-between components within the form itself, you can find an in-form <\/span><strong>Add Component <\/strong><span style=\"font-weight: 400;\">button which also allows you to search and add new components without having to navigate to the left-side list.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113055\/add-component-in-form.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46022\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113055\/add-component-in-form-1024x434.png\" alt=\"\" width=\"640\" height=\"271\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113055\/add-component-in-form-1024x434.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113055\/add-component-in-form-300x127.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113055\/add-component-in-form.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Add_Form_Sections\"><span style=\"font-weight: 400;\">Add Form Sections<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you are working with a longer and more complex form, you can split it into sections. Hover your cursor in-between form components to reveal an <\/span><strong>Add Section<\/strong><span style=\"font-weight: 400;\"> button. Clicking it will add a title and description to your form, which you can use to organize the other fields into sections.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113059\/add-section.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-46025\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113059\/add-section.png\" alt=\"\" width=\"437\" height=\"417\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113059\/add-section.png 834w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113059\/add-section-300x286.png 300w\" sizes=\"auto, (max-width: 437px) 100vw, 437px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Form_Actions\"><span style=\"font-weight: 400;\">Form Actions<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">From the Forms Listing page, you can:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create a <\/span><strong>New Form<\/strong><span style=\"font-weight: 400;\">, as seen above.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Edit <\/strong><span style=\"font-weight: 400;\">the Form<\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/digital-forms\/#Edit\"><span style=\"font-weight: 400;\">.<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the <\/span><strong>Branding <\/strong><span style=\"font-weight: 400;\">option to customize a form.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Test <\/strong><span style=\"font-weight: 400;\">forms.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Delete <\/strong><span style=\"font-weight: 400;\">forms.<\/span><\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112951\/form-actions.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45974\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112951\/form-actions.png\" alt=\"\" width=\"795\" height=\"259\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112951\/form-actions.png 1582w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112951\/form-actions-300x98.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112951\/form-actions-1024x334.png 1024w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Edit\"><span style=\"font-weight: 400;\">Edit<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can use the <\/span><strong>Edit<\/strong><span style=\"font-weight: 400;\"> option from the form listing to edit the form. The following actions are performed on the Form in edit mode:<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112948\/form-editor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45971\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112948\/form-editor.png\" alt=\"\" width=\"1960\" height=\"929\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112948\/form-editor.png 1960w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112948\/form-editor-300x142.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112948\/form-editor-1024x485.png 1024w\" sizes=\"auto, (max-width: 1960px) 100vw, 1960px\" \/><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong><em>The Component Listing<\/em><\/strong> <span style=\"font-weight: 400;\">is used for selecting and adding components to the Form by simple drag and drop action.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the <\/span><strong>View Toggler<\/strong><span style=\"font-weight: 400;\"> to switch between <\/span><strong>Desktop View<\/strong><span style=\"font-weight: 400;\"> and <\/span><strong>Mobile View.<\/strong><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the Move Component <\/span><em><span style=\"font-weight: 400;\">Handle Bar<\/span><\/em><span style=\"font-weight: 400;\"> against each of the components to change its location by a simple drag and drop action;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use <\/span><em><span style=\"font-weight: 400;\">Form Actions <\/span><\/em><span style=\"font-weight: 400;\">to:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Test<\/strong><span style=\"font-weight: 400;\"> the form to see the preview of the Digital Form in the XO Platform.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Delete<\/strong><span style=\"font-weight: 400;\"> the Form. Please keep in mind that deleted forms cannot be restored.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Change the Form <\/span><strong>Settings<\/strong><span style=\"font-weight: 400;\"> such as name, display name, and description.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the <\/span><strong>Component Actions <\/strong><span style=\"font-weight: 400;\">to access the <\/span><strong>Settings<\/strong><span style=\"font-weight: 400;\">, <\/span><strong>Duplicate,<\/strong><span style=\"font-weight: 400;\"> and <\/span><strong>Delete<\/strong><span style=\"font-weight: 400;\"> options for each of the form\u2019s components.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can change the components\u2019 properties from the <\/span><strong>Component Settings<\/strong><span style=\"font-weight: 400;\"> popup:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the <\/span><strong>Component Docker <\/strong><span style=\"font-weight: 400;\">to dock\/undock the settings pane to the screen.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the <\/span><strong>Component Selector<\/strong><span style=\"font-weight: 400;\"> to navigate through the components on the Form.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Branding\"><span style=\"font-weight: 400;\">Branding<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Use the <\/span><strong>Branding<\/strong><span style=\"font-weight: 400;\"> option to change the look and feel of the form to reflect your organization\u2019s standards. An instant preview gives you an idea of how the form would look with the new colors and you have the option to <\/span><strong>Save<\/strong><span style=\"font-weight: 400;\"> or <\/span><strong>Restore Default<\/strong><span style=\"font-weight: 400;\"> scheme.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113105\/branding.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46028\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113105\/branding-1024x434.png\" alt=\"\" width=\"921\" height=\"390\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113105\/branding-1024x434.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113105\/branding-300x127.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113105\/branding.png 1922w\" sizes=\"auto, (max-width: 921px) 100vw, 921px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Test\"><span style=\"font-weight: 400;\">Test<\/span><\/span><\/h3>\n<p><strong>Test<\/strong><span style=\"font-weight: 400;\"> the form to see a preview of what it would look like to the end user. You can do this at any point while you work on the form.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46007\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview-1024x799.png\" alt=\"\" width=\"640\" height=\"499\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview-1024x799.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview-300x234.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview.png 1056w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Invoke_a_Form\"><span style=\"font-weight: 400;\">Invoke a Form<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">A digital form can be invoked as follows:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><strong>From a Task<\/strong><span style=\"font-weight: 400;\">: You may include a form as a component in a dialog task for defining the task. The dialog task offers <\/span><em><span style=\"font-weight: 400;\">Form Experience<\/span><\/em><span style=\"font-weight: 400;\"> and the usual <\/span><em><span style=\"font-weight: 400;\">Conversation Experience<\/span><\/em><span style=\"font-weight: 400;\"> for filling the form data. You can choose the preference based on the <\/span><em><span style=\"font-weight: 400;\">channel of interaction<\/span><\/em><span style=\"font-weight: 400;\"> or any other criteria based on your requirements.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>From a UI flow<\/strong><span style=\"font-weight: 400;\">: You can add a Digital Form to a pane and choose a dialog task to trigger when the form is submitted from the pane.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">In the following sections, we discuss each of the above invocation processes.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Invocation_from_Dialog_Tasks\"><span style=\"font-weight: 400;\">Invocation from Dialog Tasks<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Digital Forms are used inside Dialog Tasks for capturing user inputs through a Form Node.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To invoke a form from a dialog task, follow the below steps:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create\/open the dialog from where you want to invoke the Digital Form.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click the <\/span><strong>+<\/strong><span style=\"font-weight: 400;\"> icon next to the node where you want to add the Form.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select the <\/span><strong>Digital Form<\/strong><span style=\"font-weight: 400;\"> option and then the form from the list. You can choose to add a Digital Form directly or use an existing Form Node.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You are prompted to select the <\/span><strong>Form Experience<\/strong><span style=\"font-weight: 400;\">, it can be:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928115610\/config-form-node-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-46042\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928115610\/config-form-node-1.png\" alt=\"\" width=\"474\" height=\"500\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928115610\/config-form-node-1.png 558w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928115610\/config-form-node-1-284x300.png 284w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Only Form UI<\/strong><span style=\"font-weight: 400;\"> \u2013 This creates a Form Node and associates it with the Digital Form selected. This is the default option.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113018\/only-ui.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45995\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113018\/only-ui.png\" alt=\"\" width=\"332\" height=\"342\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113018\/only-ui.png 332w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113018\/only-ui-291x300.png 291w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/a><\/li>\n<li style=\"font-weight: 400;\"><strong>Both Form UI and Conversation Experience<\/strong><span style=\"font-weight: 400;\"> \u2013 This further prompts you to choose a channel. When a user is using one of the selected channels they are presented with a Form UI, the rest of the channel users get a conversation experience.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">This option creates:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A <\/span><strong>Bot Action Node<\/strong><span style=\"font-weight: 400;\"> to determine the transitions to the Form Node and the Sub-dialog Node based on the channels selected.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A <\/span><strong>Form Node<\/strong><span style=\"font-weight: 400;\"> for the Digital Form, same as was generated for the Only Form UI above.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A <\/span><strong>Sub-dialog Node<\/strong><span style=\"font-weight: 400;\"> to capture the required entities (as defined in the Digital Form using components) for the conversational experience. A<\/span><strong> Group <\/strong><span style=\"font-weight: 400;\">encompassing the following nodes (<\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/grouping-nodes\/\"><span style=\"font-weight: 400;\">see here for details<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">). This grouping can be renamed and\/or deleted.<\/span><\/span><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113003\/form-experience-nodes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45983\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113003\/form-experience-nodes.png\" alt=\"\" width=\"641\" height=\"282\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113003\/form-experience-nodes.png 816w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113003\/form-experience-nodes-300x132.png 300w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can set the <\/span><strong>Properties<\/strong><span style=\"font-weight: 400;\"> for each of the nodes added.<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The <\/span><strong>Form Node<\/strong><span style=\"font-weight: 400;\"> (<\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-form-node\/\"><span style=\"font-weight: 400;\">see here for details<\/span><\/a><span style=\"font-weight: 400;\">).<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Of special interest are the following Component Properties:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Submit Message<\/strong><span style=\"font-weight: 400;\"> \u2013 Message displayed to the end-user on successful submission of the form<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Web\/Mobile SDK Form Behavior<\/strong><span style=\"font-weight: 400;\"> \u2013 Using this option you can either have the form displayed <\/span><em><span style=\"font-weight: 400;\">inline<\/span><\/em><span style=\"font-weight: 400;\"> the chat window or <\/span><em><span style=\"font-weight: 400;\">open on a full page<\/span><\/em><span style=\"font-weight: 400;\">. 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. <a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-form-node\/#Component_Properties\" target=\"_blank\" rel=\"noopener noreferrer\">See here<\/a>\u00a0to know how to configure.<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><strong>Bot Action Node,<\/strong><span style=\"font-weight: 400;\"> in case of the conversation experience flow, can also be configured (<\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-logic-node\/\"><span style=\"font-weight: 400;\">see here for details<\/span><\/a><span style=\"font-weight: 400;\">) Of special interest is the following:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Manage Context Variables<\/strong><span style=\"font-weight: 400;\"> is used to create and set values for the context variables. Remember to use the full path of the variable in the <\/span><em><span style=\"font-weight: 400;\">key<\/span><\/em><span style=\"font-weight: 400;\"> field ie. <\/span><code><em><span style=\"font-weight: 400;\">context.BotUserSession.&lt;variable_name&gt;<br \/>\n<\/span><\/em><\/code><\/p>\n<table style=\"width: 100%; border-collapse: collapse; background-color: #fffbea;\">\n<tbody>\n<tr>\n<td style=\"width: 100%;\"><strong><em>IMPORTANT NOTE<\/em><\/strong><em><span style=\"font-weight: 400;\">: We strongly urge you not to make changes to the connection settings as this affects the V\u2019s performance.<\/span><\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><strong>Sub-dialog Node<\/strong><span style=\"font-weight: 400;\"> is configured as normal (<\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-dialog-node\/\"><span style=\"font-weight: 400;\">see here for details<\/span><\/a><span style=\"font-weight: 400;\">) Of special interest are the following:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the <\/span><strong>Entity Post-assignment<\/strong><span style=\"font-weight: 400;\"> to capture the user input.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In case you modify the sub-dialog or the source form, you are presented with an option to <\/span><em><span style=\"font-weight: 400;\">Regenerate Dialog<\/span><\/em><span style=\"font-weight: 400;\">. 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.<\/span><br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113033\/subdialog-node-config.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46004\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113033\/subdialog-node-config-418x1024.png\" alt=\"\" width=\"328\" height=\"804\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113033\/subdialog-node-config-418x1024.png 418w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113033\/subdialog-node-config.png 457w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The user input can be accessed as follows:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Form component values are accessed from the Context Object using <\/span><code><span style=\"font-weight: 400;\">{{context.forms.&lt;form_name&gt;.&lt;component_name&gt;}}<\/span><\/code><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In the case of the sub-dialog, the variables used in the post-assignment settings as <\/span><code><span style=\"font-weight: 400;\">{{context.&lt;variable_name&gt;}}<\/span><\/code><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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 <\/span><strong>Service Node<\/strong><span style=\"font-weight: 400;\"> to update the data or use the <\/span><strong>Script Node<\/strong><span style=\"font-weight: 400;\"> to process it further. If you are using the conversation experience too, remember to connect the auto-generated sub-dialog to the process flow.<\/span><\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Invocation_from_Panels\"><span style=\"font-weight: 400;\">Invocation from Panels<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Digital Forms are rendered in Digital Views by configuring Widgets &amp; Panels, <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/digital-views\/\"><span style=\"font-weight: 400;\">see here for more on Digital Views<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To invoke a form using Widgets and Panels, follow the below steps:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create a widget to invoke the Digital Form from <\/span><strong>Build -&gt; Digital Skills -&gt; Digital Views<\/strong><span style=\"font-weight: 400;\"> option.<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Enter the name.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select <\/span><em><span style=\"font-weight: 400;\">Digital Forms<\/span><\/em><span style=\"font-weight: 400;\"> as the <\/span><strong>Source.<\/strong><\/li>\n<li style=\"font-weight: 400;\"><strong>Add a Form<\/strong><span style=\"font-weight: 400;\"> by selecting it from the drop-down list.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select the <\/span><strong>Dialog to Invoke on Submit<\/strong><span style=\"font-weight: 400;\"> from the drop-down list.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><strong><em>Note <\/em><\/strong><em><span style=\"font-weight: 400;\">that while a Digital Form is used to define multiple Widgets and also add to multiple panels, it will be associated with a single Dialog Task across all Widgets and Panels.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Save<\/strong><span style=\"font-weight: 400;\"> the widget.<\/span><br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113009\/invoke-form-in-widget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45989\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113009\/invoke-form-in-widget.png\" alt=\"\" width=\"433\" height=\"585\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113009\/invoke-form-in-widget.png 589w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113009\/invoke-form-in-widget-222x300.png 222w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><strong>Add the Widget<\/strong><span style=\"font-weight: 400;\"> to an existing panel or create a new panel.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">You can add a form directly to a panel, it creates a widget by default.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can <\/span><strong>Test<\/strong><span style=\"font-weight: 400;\"> the panel.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Follow the steps provided <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/sdks\/kore-ai-widget-sdk-tutorial\/\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\"> to publish and host the panels.<\/span><\/li>\n<\/ol>\n<h1><span class=\"ez-toc-section\" id=\"The_User_Experience\"><span style=\"font-weight: 400;\">The User Experience<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">When the end-user initiates the dialog and reaches the node connecting to the Form node, the following events take place. Depending upon the experience selected at design time and the channel of invocation, the flow is the following:<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Form_experience\"><span style=\"font-weight: 400;\">Form experience<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A <\/span><strong>link to the form<\/strong><span style=\"font-weight: 400;\"> is presented to the user. Note that for a synchronous WebHook channel, instead of a link the complete form definition is sent <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/channel-enablement\/adding-webhook-channel\/\"><span style=\"font-weight: 400;\">click here for more details<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113040\/UIForms-linkmessage-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-46010\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113040\/UIForms-linkmessage-1.png\" alt=\"\" width=\"499\" height=\"308\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113040\/UIForms-linkmessage-1.png 499w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113040\/UIForms-linkmessage-1-300x185.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Clicking the link opens the form in either full-screen or inline mode, based on the selection. Please note the following details about the link:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The link is active only for a certain duration of time, it becomes inactive after that.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Even within the active period, it can be used only a limited number of times.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">End-users can fill in the values for the components\/fields.<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46007\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview-1024x799.png\" alt=\"\" width=\"640\" height=\"499\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview-1024x799.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview-300x234.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113037\/test-preview.png 1056w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Every form comes with a default <\/span><strong>Submit<\/strong><span style=\"font-weight: 400;\"> button. This validates the form entries, prompts for any missing values.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113047\/validation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-46016\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113047\/validation.png\" alt=\"\" width=\"760\" height=\"431\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113047\/validation.png 1023w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113047\/validation-300x170.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Once the form is validated and submitted, the values are available in the context variable and accessed using the following code: <\/span><code><span style=\"font-weight: 400;\">context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/span><\/code><\/p>\n<p><code><\/code><span style=\"font-weight: 400;\">Here we are capturing the user entry and displaying it using a message node.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113044\/user-bot-form-experience.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-46013\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113044\/user-bot-form-experience.png\" alt=\"\" width=\"505\" height=\"607\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113044\/user-bot-form-experience.png 505w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113044\/user-bot-form-experience-250x300.png 250w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conversation_Experience\">Conversation Experience<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">From the channel of operation, the end-user is prompted to enter values for every component in the form.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The values are available in the sub-dialog context and are captured using Entity Post Assignment as mentioned above.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Following is the user experience in Conversation mode:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112932\/conversation-experience.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45962\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112932\/conversation-experience.png\" alt=\"\" width=\"499\" height=\"715\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112932\/conversation-experience.png 499w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928112932\/conversation-experience-209x300.png 209w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Exceptions\">Exceptions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When exceptions are encountered during the dialog execution with a Form Node, they are handled as follows:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<th><strong>EXCEPTION<\/strong><\/th>\n<th><strong>EXCEPTION BEHAVIOR<\/strong><\/th>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">The user tries to continue the conversation without opening the form link.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">The Virtual Assistant asks if the user wants to switch to a new task.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">The user tries to continue the conversation (in the chat window) without submitting the form responses.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">The Virtual Assistant asks if the user wants to switch to a new task.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">The user closes the form or browser without submitting responses.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">If the bot is configured to cancel the ongoing task, <\/span><span style=\"font-weight: 400;\">the form displays a warning message that the task will be canceled. If the user accepts, the form will be closed, and a message is displayed saying that the previous task is canceled.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Otherwise, the ongoing task goes on, and based on the configuration, the user is taken to the next step of the task.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">The user tries to relaunch the form while the form is already open.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">The form link will not open the form and a message will be displayed saying that the form link is no longer valid.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">The user tries to relaunch the form after moving ahead in the conversation.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">The form link will not open the form and a message will be displayed saying that the form link is no longer valid.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Panel_Flow\">Panel Flow<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Users can access the form using <\/span><strong>Panels &amp; Widgets<\/strong><span style=\"font-weight: 400;\">. The experience is the same as for the Process Flow with Form experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once the form is validated and submitted, the values are available in the context variable and accessed using the following code: <\/span><span style=\"font-weight: 400;\">context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Manage_VAs_with_Digital_Forms\">Manage VAs with Digital Forms<\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"Publish\">Publish<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The publishing flow for a VA with Digital Forms has the following special cases:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As with any assistant, the Digital Forms exist in the following states:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong><em>In-development<\/em><\/strong><span style=\"font-weight: 400;\"> when a form is created.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong><em>Awaiting approval<\/em><\/strong><span style=\"font-weight: 400;\"> when a form is submitted to Publish and the request is waiting for the admin to take action.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong><em>Rejected<\/em><\/strong> <span style=\"font-weight: 400;\">when the Publish request is rejected by the admin.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong><em>Published<\/em><\/strong> <span style=\"font-weight: 400;\">In the XO Platform, the status of a Digital Form remains In Development even after publishing.<br \/>\n<\/span><br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113021\/publish-status-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45998\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113021\/publish-status-1.png\" alt=\"\" width=\"546\" height=\"176\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113021\/publish-status-1.png 546w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113021\/publish-status-1-300x97.png 300w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/a><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">On publishing the form, you can see the form listed under <\/span><strong>Publish Status \u2192 View Publishing Summary<\/strong><span style=\"font-weight: 400;\">, but the status on the Digital Forms main page remains as <\/span><em><span style=\"font-weight: 400;\">In Development<\/span><\/em><span style=\"font-weight: 400;\">.<\/span><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113006\/form-status.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-45986\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113006\/form-status-1024x156.png\" alt=\"\" width=\"640\" height=\"98\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113006\/form-status-1024x156.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113006\/form-status-300x46.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113006\/form-status.png 1619w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The <\/span><em><span style=\"font-weight: 400;\">In Development<\/span><\/em><span style=\"font-weight: 400;\"> and <\/span><em><span style=\"font-weight: 400;\">Published<\/span><\/em><span style=\"font-weight: 400;\"> versions of the VA can be viewed by toggling between the respective statuses in the top search-bar.<\/span><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113051\/va-status-search.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46019\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113051\/va-status-search-1024x354.png\" alt=\"\" width=\"640\" height=\"221\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113051\/va-status-search-1024x354.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113051\/va-status-search-300x104.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928113051\/va-status-search.png 1921w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\n<table style=\"background-color: #fffbea; width: 100%;\" width=\"100%\">\n<tbody>\n<tr>\n<td width=\"100%\"><strong><em>Note<\/em><\/strong><em>: <\/em><span style=\"font-weight: 400;\">If any edits are done to the Digital Form while it is In Development, the changes would be reflected in the Published version as soon as you publish the form.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li style=\"font-weight: 400;\"><strong><em>Suspended<\/em><\/strong> <span style=\"font-weight: 400;\">when a published form is suspended by the admin.<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Pre-publishing_Validations\">Pre-publishing Validations<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The following validations are performed before a Publish request is processed:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A Dialog Task that contains a Digital Form can be published only if:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The corresponding Digital Form is already published, or<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The corresponding Digital Form is also selected for publishing.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A Digital Form that is configured to trigger a Dialog Task is published only if:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The corresponding Dialog Task is already published, or<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The corresponding Dialog Task is selected for publishing.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">While the dependencies are published together, chances are that all the dependencies might not be available at run-time, in such cases:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If the Dialog Task is in a published state, but the Digital Form is not in a published state this triggers:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The Task Failure Event and the corresponding behavior is invoked or<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A relevant Standard Response is displayed and<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Logged as Failed Task in Analytics.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Digital Form is in a published state, but the Dialog Task is not available then on Form submission, the end-user is presented with the Form\u2019s Error Message.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"ImportExport\">Import\/Export<\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Import\">Import<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Digital Forms are included in the full and incremental import of the assistant.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Full Import:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">As with all other VA components, the full import replaces the entire Digital Forms and form details.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">For Incremental Import:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can choose to include\/exclude the Digital Forms in the import.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">This import fully replaces the Digital Forms that are common to the import file and the VA.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Additional forms in the file are imported into the VA.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Additional forms in the VA are retained.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Post import, any invalid Digital Form integration details are disassociated with the corresponding forms.<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Export\">Export<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The Bot Export option is available for Digital Forms with a status of <\/span><em><span style=\"font-weight: 400;\">In Development <\/span><\/em><span style=\"font-weight: 400;\">or <\/span><em><span style=\"font-weight: 400;\">Published.<\/span><\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Digital Forms can be selected\/deselected from the <\/span><strong>Bot Export<\/strong><span style=\"font-weight: 400;\"> page under the <\/span><strong>Bot Tasks<\/strong><span style=\"font-weight: 400;\"> category.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Choose the option to <\/span><em><span style=\"font-weight: 400;\">Include dependent dialogs<\/span><\/em><span style=\"font-weight: 400;\"> to export Dialog Tasks that are integrated with the selected Digital Forms to define widgets. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><strong><em>Note <\/em><\/strong><em><span style=\"font-weight: 400;\">that this does not include the Sub-dialog Tasks generated using Digital Forms.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Complete information for each of the selected forms are available in the export file and this includes:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fields,<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Field properties,<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Form integrations,<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1><span class=\"ez-toc-section\" id=\"Form_Component_Details\">Form Component Details<\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"Components_List\">Components List<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Following is a list of available components. For details on the properties of each component.<\/span><\/p>\n<table style=\"width: 985px; height: 3579px;\">\n<tbody>\n<tr style=\"height: 46px;\">\n<th style=\"height: 46px; width: 265.833px;\"><strong>DESCRIPTION<\/strong><\/th>\n<th style=\"height: 46px; width: 704.757px;\"><strong>SAMPLE<\/strong><\/th>\n<\/tr>\n<tr style=\"height: 46px;\">\n<th style=\"height: 46px; width: 265.833px;\">Basic<\/th>\n<td style=\"width: 704.757px; height: 46px;\"><\/td>\n<\/tr>\n<tr style=\"height: 92px;\">\n<td style=\"width: 265.833px; height: 92px;\"><strong>Text Field<\/strong><span style=\"font-weight: 400;\"> \u2013 used for single-line input.<\/span><\/td>\n<td style=\"width: 704.757px; height: 92px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122833\/sample-text.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46093\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122833\/sample-text.png\" alt=\"\" width=\"515\" height=\"88\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122833\/sample-text.png 515w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122833\/sample-text-300x51.png 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 149px;\">\n<td style=\"width: 265.833px; height: 149px;\"><strong>Text Area<\/strong><span style=\"font-weight: 400;\"> \u2013 used for multi-line entry<\/span><\/td>\n<td style=\"width: 704.757px; height: 149px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122836\/sample-textarea.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46096\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122836\/sample-textarea.png\" alt=\"\" width=\"516\" height=\"145\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122836\/sample-textarea.png 516w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122836\/sample-textarea-300x84.png 300w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 100px;\">\n<td style=\"width: 265.833px; height: 100px;\"><strong>Number<\/strong><span style=\"font-weight: 400;\"> \u2013 used for numerical entries<\/span><\/td>\n<td style=\"width: 704.757px; height: 100px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122818\/sample-number.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46078\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122818\/sample-number.png\" alt=\"\" width=\"519\" height=\"76\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122818\/sample-number.png 519w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122818\/sample-number-300x44.png 300w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 119px;\">\n<td style=\"width: 265.833px; height: 119px;\"><strong>Radio Button<\/strong><span style=\"font-weight: 400;\"> \u2013 used as a selection option from a given list<\/span><\/td>\n<td style=\"width: 704.757px; height: 119px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122826\/sample-radio.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46087\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122826\/sample-radio.png\" alt=\"\" width=\"554\" height=\"97\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122826\/sample-radio.png 554w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122826\/sample-radio-300x53.png 300w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 283px;\">\n<td style=\"width: 265.833px; height: 283px;\"><strong>Dropdown<\/strong><span style=\"font-weight: 400;\"> \u2013 Used as a selection option from a given list; can be multi-select<\/span><\/td>\n<td style=\"width: 704.757px; height: 283px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122806\/sample-dropdown.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46066\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122806\/sample-dropdown.png\" alt=\"\" width=\"560\" height=\"279\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122806\/sample-dropdown.png 560w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122806\/sample-dropdown-300x149.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 119px;\">\n<td style=\"width: 265.833px; height: 119px;\"><strong>Checkbox<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for multi-select option from a given list<\/span><\/td>\n<td style=\"width: 704.757px; height: 119px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122758\/sample-checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46057\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122758\/sample-checkbox.png\" alt=\"\" width=\"466\" height=\"112\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122758\/sample-checkbox.png 466w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122758\/sample-checkbox-300x72.png 300w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 356px;\">\n<td style=\"width: 265.833px; height: 356px;\"><strong>Date<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for date entries, gives a date picker for the user to choose the date.<\/span><\/p>\n<p><b>Note:<\/b><span style=\"font-weight: 400;\"> The Date picker displays the month and week names in Japanese characters if the VA language is Japanese.<\/span><\/td>\n<td style=\"width: 704.757px; height: 356px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122800\/sample-date.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46060\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122800\/sample-date.png\" alt=\"\" width=\"287\" height=\"352\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122800\/sample-date.png 287w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122800\/sample-date-245x300.png 245w\" sizes=\"auto, (max-width: 287px) 100vw, 287px\" \/><\/a><\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240429083815\/digital-forms-date-picker-japanese-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-61660 \" style=\"border: 1px solid gray;\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240429083815\/digital-forms-date-picker-japanese-1.png\" alt=\"\" width=\"285\" height=\"244\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240429083815\/digital-forms-date-picker-japanese-1.png 403w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20240429083815\/digital-forms-date-picker-japanese-1-300x257.png 300w\" sizes=\"auto, (max-width: 285px) 100vw, 285px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 431px;\">\n<td style=\"width: 265.833px; height: 431px;\"><strong>Date &amp; Time<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for date &amp; time entries, give a date and time picker for the user to choose the date and time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Use the <\/span><strong>Date component<\/strong><span style=\"font-weight: 400;\"> and set the <\/span><strong>Time option to yes<\/strong><span style=\"font-weight: 400;\">; choose from <\/span><em><span style=\"font-weight: 400;\">12-<\/span><\/em><span style=\"font-weight: 400;\"> or <\/span><em><span style=\"font-weight: 400;\">24-hour<\/span><\/em><span style=\"font-weight: 400;\"> format.<\/span><\/p>\n<p><b>Note:<\/b><span style=\"font-weight: 400;\"> The Date picker displays the month and week names in Japanese characters if the VA language is Japanese.<\/span><\/td>\n<td style=\"width: 704.757px; height: 431px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122804\/sample-date-time.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46063\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122804\/sample-date-time.png\" alt=\"\" width=\"298\" height=\"427\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122804\/sample-date-time.png 298w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122804\/sample-date-time-209x300.png 209w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 277px;\">\n<td style=\"width: 265.833px; height: 277px;\"><strong>Phone Number<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for phone number entries, allows the user to choose the country code.<\/span><\/td>\n<td style=\"width: 704.757px; height: 277px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122820\/sample-phone.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46081\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122820\/sample-phone.png\" alt=\"\" width=\"499\" height=\"273\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122820\/sample-phone.png 499w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122820\/sample-phone-300x164.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 155px;\">\n<td style=\"width: 265.833px; height: 155px;\"><strong>Email<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for email address entries, validates for <\/span><em><span style=\"font-weight: 400;\">xxx@uuu.com<\/span><\/em><span style=\"font-weight: 400;\"> format<\/span><\/td>\n<td style=\"width: 704.757px; height: 155px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122809\/sample-email.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46069\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122809\/sample-email.png\" alt=\"\" width=\"517\" height=\"93\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122809\/sample-email.png 517w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122809\/sample-email-300x54.png 300w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 137px;\">\n<td style=\"width: 265.833px; height: 137px;\"><strong>Toggle<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for switching between two values, ideal for yes\/no type of inputs<\/span><\/td>\n<td style=\"width: 704.757px; height: 137px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122838\/sample-toggle.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46099\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122838\/sample-toggle.png\" alt=\"\" width=\"116\" height=\"65\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 156px;\">\n<td style=\"width: 265.833px; height: 156px;\"><strong>Address<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for address entries<\/span><\/td>\n<td style=\"width: 704.757px; height: 156px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122752\/sample-address.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46051\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122752\/sample-address.png\" alt=\"\" width=\"516\" height=\"152\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122752\/sample-address.png 516w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122752\/sample-address-300x88.png 300w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 137px;\">\n<td style=\"width: 265.833px; height: 137px;\"><strong>URL<\/strong><span style=\"font-weight: 400;\"> \u2013 Used for web URL entries, validates for <\/span><em><span style=\"font-weight: 400;\">xxx.com<\/span><\/em><span style=\"font-weight: 400;\"> format<\/span><\/td>\n<td style=\"width: 704.757px; height: 137px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122841\/sample-url.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46102\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122841\/sample-url.png\" alt=\"\" width=\"517\" height=\"89\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122841\/sample-url.png 517w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122841\/sample-url-300x52.png 300w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 191px;\">\n<td style=\"width: 265.833px; height: 191px;\"><strong>Range Slider<\/strong><span style=\"font-weight: 400;\"> \u2013 Value selection between specified min and max values; can be represented as a percentage<\/span><\/td>\n<td style=\"width: 704.757px; height: 191px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122829\/sample-slider.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46090\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122829\/sample-slider.png\" alt=\"\" width=\"514\" height=\"80\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122829\/sample-slider.png 514w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122829\/sample-slider-300x47.png 300w\" sizes=\"auto, (max-width: 514px) 100vw, 514px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 46px;\">\n<td style=\"width: 265.833px; height: 46px;\"><strong>Password<\/strong><\/td>\n<td style=\"width: 704.757px; height: 46px;\">\u00a0*****<\/td>\n<\/tr>\n<tr style=\"height: 46px;\">\n<th style=\"width: 265.833px; height: 46px;\"><strong>Advanced<\/strong><\/th>\n<td style=\"width: 704.757px; height: 46px;\"><\/td>\n<\/tr>\n<tr style=\"height: 264px;\">\n<td style=\"width: 265.833px; height: 264px;\"><strong>Button<\/strong><span style=\"font-weight: 400;\"> \u2013 Used as a clickable component to submit, or reset, or open an external URL the form. Choose from <\/span><em><span style=\"font-weight: 400;\">Primary<\/span><\/em><span style=\"font-weight: 400;\">, <\/span><em><span style=\"font-weight: 400;\">Secondary<\/span><\/em><span style=\"font-weight: 400;\">, <\/span><em><span style=\"font-weight: 400;\">Tertiary<\/span><\/em><span style=\"font-weight: 400;\">, <\/span><em><span style=\"font-weight: 400;\">Ghost,<\/span><\/em><span style=\"font-weight: 400;\"> or <\/span><em><span style=\"font-weight: 400;\">Danger<\/span><\/em><span style=\"font-weight: 400;\">.<\/span><\/td>\n<td style=\"width: 704.757px; height: 264px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122755\/sample-button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46054\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122755\/sample-button.png\" alt=\"\" width=\"640\" height=\"237\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122755\/sample-button.png 666w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122755\/sample-button-300x111.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 137px;\">\n<td style=\"width: 265.833px; height: 137px;\"><strong>Label<\/strong><span style=\"font-weight: 400;\"> \u2013 Used to display a static text box, no action required from the user<\/span><\/td>\n<td style=\"width: 704.757px; height: 137px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122812\/sample-label.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46072\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122812\/sample-label.png\" alt=\"\" width=\"319\" height=\"76\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122812\/sample-label.png 319w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122812\/sample-label-300x71.png 300w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 155px;\">\n<td style=\"width: 265.833px; height: 155px;\"><strong>Protip<\/strong><span style=\"font-weight: 400;\"> \u2013 Used to mark important information for the end-user, no user action required.<\/span><\/td>\n<td style=\"width: 704.757px; height: 155px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122823\/sample-protip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46084\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122823\/sample-protip.png\" alt=\"\" width=\"560\" height=\"104\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122823\/sample-protip.png 560w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122823\/sample-protip-300x56.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"height: 137px;\">\n<td style=\"width: 265.833px; height: 137px;\"><strong>Note<\/strong><span style=\"font-weight: 400;\"> \u2013 Used to mark information for the end-user, no user action required.<\/span><\/td>\n<td style=\"width: 704.757px; height: 137px;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122815\/sample-note.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-46075\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122815\/sample-note.png\" alt=\"\" width=\"560\" height=\"121\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122815\/sample-note.png 560w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20220928122815\/sample-note-300x65.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Component_Properties\">Component Properties<\/span><\/h2>\n<p>The following are the properties that can be set for each of the components.<\/p>\n<p>Note: Not all the properties are valid for all the components, refer to the <a href=\"#Properties\">property matrix<\/a> for the mapping:<\/p>\n<table>\n<thead>\n<tr>\n<th><strong>Property<\/strong><\/th>\n<th><strong>Description<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Display Name<\/strong><\/td>\n<td>This is the text which appears against the component for the end-users.<\/td>\n<\/tr>\n<tr>\n<td><strong>Name<\/strong><\/td>\n<td>This is the reference name that can be used for referencing the component in the other components of the form and form level operations<\/td>\n<\/tr>\n<tr>\n<td><strong>Description<\/strong><\/td>\n<td>Help information about a field to be displayed to the end-user.<\/td>\n<\/tr>\n<tr>\n<td><strong>Placeholder Text<\/strong><\/td>\n<td>A prompt message for the end-user<\/td>\n<\/tr>\n<tr>\n<td><strong>Button Style<\/strong><\/td>\n<td>For button component, can be:<\/p>\n<ul>\n<li>Primary,<\/li>\n<li>Secondary,<\/li>\n<li>Tertiary,<\/li>\n<li>Ghost, or<\/li>\n<li>Danger<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Button Action<\/strong><\/td>\n<td>For button component, can be:<\/p>\n<ul>\n<li>Submit,<\/li>\n<li>Reset, or<\/li>\n<li>Go to URL &#8211; in this case, you need to enter a URL in the corresponding field.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Read Only<\/strong><\/td>\n<td>To mark the component value is not changeable<\/td>\n<\/tr>\n<tr>\n<td><strong>Required<\/strong><\/td>\n<td>To define whether input for this field is necessary or optional for the end-user entry.<\/td>\n<\/tr>\n<tr>\n<td><strong>Tool-tip<\/strong><\/td>\n<td>Additional information about a field to be shown on demand to the end-user. Has three entries:<\/p>\n<ul>\n<li>Tip Text &#8211; text message for the additional information about the component<\/li>\n<li>Tool-tip Type &#8211; whether the tip appears on hover or click<\/li>\n<li>Tool-tip Position &#8211; where the tooltip should be displayed<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Date Format<\/strong><\/td>\n<td>Time format to be presented to the end-user can be<\/p>\n<ul>\n<li>mm\/dd\/yyyy &#8211; default<\/li>\n<li>dd\/mm\/yyyy<\/li>\n<li>yyyy\/mm\/dd<\/li>\n<li>yyyy\/dd\/mm<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Time<\/strong><\/td>\n<td>To enable the end-user to enter Time along with Date<\/td>\n<\/tr>\n<tr>\n<td><strong>Time Format<\/strong><br \/>\nUsed in conjunction with the above Time property<\/td>\n<td>Time format to be presented to the end-user can be 12 hrs or 24 hrs<\/td>\n<\/tr>\n<tr>\n<td><strong>Default Country Code<\/strong><\/td>\n<td>Choose the desired default country code that should be shown to the end-user. Default is United States +1<\/td>\n<\/tr>\n<tr>\n<td><strong>Secure Field Data<\/strong><\/td>\n<td>To Secure the user information collected by this field.<\/td>\n<\/tr>\n<tr>\n<td><strong>Masking Type<\/strong><br \/>\nAvailable only when Secure Field Data is enabled<\/td>\n<td>Choose how to display the redacted data in the Bot Context, Debug Logs, Service Calls, Agent Transfer and the Bot Kit. Following actions are available:<\/p>\n<ul>\n<li>Redaction &#8211; The platform will replace the user input with a unique random system-generated alphanumeric value. This is the default setting when the Secure Field Data is enabled<\/li>\n<li>Replacement &#8211; The platform will replace the user input with a static value or reference to a context object as entered in the replacement value field.<\/li>\n<li>Mask with Character &#8211; The platform will replace the first few and last few characters of the user input with symbols. You can specify the number and position of characters to mask, symbol for masking (+ or #).<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Mask Input<\/strong><br \/>\nAvailable only when Secure Field Data is enabled<\/td>\n<td>Enable this option to mask the end-user\u2019s input for this field in the chat window.<\/td>\n<\/tr>\n<tr>\n<td><strong>Checkbox Layout<\/strong><\/td>\n<td>Choose the number of columns to present the checkbox values in the grid view. You can select a minimum of 1 and a maximum of 4 columns, with 4 columns being the default selection.<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><strong>Data Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Default Value<\/strong><\/td>\n<td>In case the component needs to be pre-populated with a default value<\/td>\n<\/tr>\n<tr>\n<td><strong>Values<\/strong><\/td>\n<td>For Radio Button, Dropdown and Checkbox, add values to be given for selection by the end-user. You can mark one value as a default value<\/td>\n<\/tr>\n<tr>\n<td><strong>Multi-Select<\/strong><\/td>\n<td>For Dropdown, if the user can select multiple values.<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><strong>Validation Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Default Error Message<\/strong><\/td>\n<td>To be displayed in case user entry fails validation<\/td>\n<\/tr>\n<tr>\n<td><strong>Validate<\/strong><\/td>\n<td>To define when the validations defined for a field are to be checked. Options are:<\/p>\n<ul>\n<li>On blur &#8211; Validations would be done when the end-user moves away from the component<\/li>\n<li>On change &#8211; Validations would be done when the component value is changed<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Validation Rule<\/strong><\/td>\n<td>Rules in the following format can be added<\/p>\n<ul>\n<li>Operator &#8211; choose from the list<\/li>\n<li>Comparison Type &#8211; set to either value or field\/component or value type<\/li>\n<li>Comparison\u00a0 With &#8211; the value or component name or type, as per the above selection<\/li>\n<\/ul>\n<p>Multiple rules added to an existing rule would be taken as an AND condition, whereas a new rule would be an OR condition. You can add multiple Simple rules or a single Advanced rule by toggling between Simple and Advanced Modes<\/td>\n<\/tr>\n<tr>\n<td><strong>Custom Error Message<\/strong><\/td>\n<td>This would be displayed when a particular validation fails<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><strong>Visibility Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Is Visible<\/strong><\/td>\n<td>Whether the given component is visible to the end-user or not<\/td>\n<\/tr>\n<tr>\n<td><strong>Visibility Rules<\/strong><\/td>\n<td>You can define conditions when a particular component would be visible or hidden<\/p>\n<ul>\n<li>Hide or Visible<\/li>\n<li>Add Visibility Rules by defining the following:\n<ul>\n<li>Component\/Field which determines this component behavior- choose from the list<\/li>\n<li>Operator &#8211; choose from the list<\/li>\n<li>Comparison Type &#8211; set to either value or field\/component or value type<\/li>\n<li>Comparison\u00a0 With &#8211; the value or component name or type, as per the above selection<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Multiple rules added to an existing rule would be taken as an AND condition, whereas a new rule would be an OR condition. You can add multiple Simple rules or a single Advanced rule by toggling between Simple and Advanced Modes<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><strong>Auto Populate<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Auto Population<\/strong><\/td>\n<td>Whether the given component should be auto-populated or not<\/td>\n<\/tr>\n<tr>\n<td><strong>Auto population rules<\/strong><\/td>\n<td>\n<ul>\n<li>Field or Value from which to auto-populate<\/li>\n<li>Field name or the actual value based on the above selection<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Component_Mappings\">Component Mappings<\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Properties\">Properties<\/span><\/h3>\n<h4>Basic<\/h4>\n<table>\n<thead>\n<tr>\n<th>Property<\/th>\n<th>Text Field<\/th>\n<th>Text Area<\/th>\n<th>Number<\/th>\n<th>Radio Button<\/th>\n<th>Check<br \/>\nbox<\/th>\n<th>Drop<br \/>\ndown<\/th>\n<th>Date<\/th>\n<th>Phone Number<\/th>\n<th>Email<\/th>\n<th>Address<\/th>\n<th>URL<\/th>\n<th>Toggle<\/th>\n<th>Range Slider<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td colspan=\"12\"><strong>General Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Display Name<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Name<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Description<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Placeholder Text<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Read Only<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Required<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td colspan=\"12\"><strong>Tool-tip<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Tip Text<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Tool-tip Type<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Tool-tip Position<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Date Format<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Time &amp;<br \/>\nTime Format<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Default Country Code<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Checkbox Layout<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Secure Data<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Masking Type<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Mask Input<\/strong><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td colspan=\"12\"><strong>Data Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Data Source<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Default Value<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Multiselect<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td colspan=\"12\"><strong>Auto Fill<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Auto Populate<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Auto Populate Settings<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td colspan=\"12\"><strong>Visibility Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Is Visible<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Visibility Settings<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td colspan=\"12\"><strong>Validations<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Default Error Message<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Validate<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Equals To<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>TBD<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Not equal to<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Contains<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Does not contain<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Regex<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Max Length<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Min Length<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Part of<\/strong><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Not part of<\/strong><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Greater than<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Less than<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Greater than or equal to<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Less than or equal to<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Advanced<\/h4>\n<table>\n<thead>\n<tr>\n<th>Property<\/th>\n<th>Button<\/th>\n<th>RichText<\/th>\n<th>Pro-tip<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td colspan=\"5\"><strong>General Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Display Name<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Name<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Description<\/strong><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Placeholder Text<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Tool-tip<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Error Message<\/strong><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Required<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Validate<\/strong><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Read Only<\/strong><\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Action Type<\/strong> (Submit, Reset, Clear)<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td colspan=\"5\"><strong>Data Settings<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Data Source<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Default Value<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td colspan=\"5\"><strong>Auto Fill<\/strong><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>Auto-Populate<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td><strong>Auto-Populate Settings<\/strong><\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td colspan=\"5\"><strong><strong>Visibility Settings<\/strong><\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Is Visible<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td><strong>Visibility Settings<\/strong><\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Dialog_Node\">Dialog Node<\/span><\/h3>\n<p>The following mapping gives the type of entities included in the sub-dialog when it is auto-generated from a Digital Form.<\/p>\n<table>\n<thead>\n<tr>\n<th><b>Form Component Property<\/b><\/th>\n<th>Dialog Task Node Property<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Name<\/td>\n<td>Name<\/td>\n<\/tr>\n<tr>\n<td>Display Name<\/td>\n<td>Display Name<\/td>\n<\/tr>\n<tr>\n<td>Placeholder Text<\/td>\n<td>Entity Prompt<\/td>\n<\/tr>\n<tr>\n<td>Error Message<\/td>\n<td>Error Prompt<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<table>\n<thead>\n<tr>\n<th>Digital Form Component Type<\/th>\n<th>Dialog Task<br \/>\nNode Type<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Text Field<\/td>\n<td><span style=\"font-weight: 400;\">String<\/span><\/td>\n<\/tr>\n<tr>\n<td>Text Area<\/td>\n<td><span style=\"font-weight: 400;\">Description<\/span><\/td>\n<\/tr>\n<tr>\n<td>Number<\/td>\n<td><span style=\"font-weight: 400;\">Number<\/span><\/td>\n<\/tr>\n<tr>\n<td>Radio Button<\/td>\n<td>LoI (Enum) with each of the options in the radio button group copied as list items<\/td>\n<\/tr>\n<tr>\n<td>Dropdown<\/td>\n<td>LoI (Enum) with each of the values in the dropdown list copied as list items.<br \/>\nMulti-select would be enabled based on the \u2018is multi-select\u2019 option of the Form Component<\/td>\n<\/tr>\n<tr>\n<td>Checkbox<\/td>\n<td>LoI (Enum) with each of the options in the checkbox group copied as list items<br \/>\nMulti-select is enabled by default<\/td>\n<\/tr>\n<tr>\n<td>Date<\/td>\n<td>Date<\/td>\n<\/tr>\n<tr>\n<td>Phone Number<\/td>\n<td>Phone Number<\/td>\n<\/tr>\n<tr>\n<td>Email<\/td>\n<td>Email<\/td>\n<\/tr>\n<tr>\n<td>Address<\/td>\n<td>Address<\/td>\n<\/tr>\n<tr>\n<td>URL<\/td>\n<td>URL<\/td>\n<\/tr>\n<tr>\n<td>Toggle<\/td>\n<td>LoI (Enum) with each of the options in the toggle copied as list items<\/td>\n<\/tr>\n<tr>\n<td>Range Slider<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><strong>Advanced<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Button<\/td>\n<td>Not Applicable<\/td>\n<\/tr>\n<tr>\n<td>Label<\/td>\n<td><span style=\"font-weight: 400;\">Not Applicable<\/span><\/td>\n<\/tr>\n<tr>\n<td>Protip<\/td>\n<td><span style=\"font-weight: 400;\">Not Applicable<\/span><\/td>\n<\/tr>\n<tr>\n<td>Note<\/td>\n<td><span style=\"font-weight: 400;\">Not Applicable<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Context_Object\">Context Object<\/span><\/h3>\n<p>The following mapping gives the context object to capture the component value along with a sample context object.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"g-cols wpb_row  type_default valign_top vc_inner \"><\/div><div class=\"vc_col-sm-6 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<table>\n<thead>\n<tr>\n<th>Component Type<\/th>\n<th>Context Object<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Text Field<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Text Area<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Number<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Radio Button<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Dropdown<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;[&lt;index&gt;]<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Checkbox<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;[&lt;index&gt;]<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Date<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><br \/>\nIn mm\/dd\/yyyy format<\/span><\/td>\n<\/tr>\n<tr>\n<td>Date &amp; Time<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><br \/>\nIn mm\/dd\/yyyy hh:mm AM\/PM format<\/span><\/td>\n<\/tr>\n<tr>\n<td>Phone Number<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><br \/>\nprefixed with the area code of the country selected by the user<\/span><\/td>\n<\/tr>\n<tr>\n<td>Email<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Address<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>URL<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<tr>\n<td>Toggle<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><br \/>\nYes\/No values<\/td>\n<\/tr>\n<tr>\n<td>Range Slider<\/td>\n<td><span style=\"font-weight: 400;\"><code>context.forms.&lt;form_name&gt;.&lt;component_name&gt;<\/code><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<table>\n<thead>\n<tr>\n<th>Sample Context Object<\/th>\n<\/tr>\n<\/thead>\n<\/table>\n<pre>\"forms\": {\r\n    \"basicpropertieslist\": {\r\n      \"TextField\": \"text\",\r\n      \"Textarea\": \"text area\",\r\n      \"Number\": 123,\r\n      \"Radio\": \"Male\",\r\n      \"Dropbox\": [\r\n        \"UnderGrad\",\r\n        \"Other\"\r\n      ],\r\n      \"Checkbox\": [\r\n        \"Education\",\r\n        \"Technology\"\r\n      ],\r\n      \"Date\": \"07\/08\/2020\",\r\n      \"Date&amp;Time\": \"07\/08\/2020 19:00 PM\",\r\n      \"PhoneNumber\": \"+919999999999\",\r\n      \"Email\": \"test@gmail.com\",\r\n      \"toggle\": \"Yes\",\r\n      \"Adress\": \"Address\",\r\n      \"Url\": \"test.com\",\r\n      \"rangeSlider\": 26.1\r\n    }\r\n  }<\/pre>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Prefill_Form\">Prefill Form<\/span><\/h3>\n<p>You can specify data that can be used to pre-populate the form fields. Platform will check for the availability of any form prefill information before lauching the form. If any information is available, then the corresponding fields in the form are pre-populated before presenting the form to the user. The values can be static or from a context object.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t\r\n\t\t<\/div>\r\n\t<\/div>\r\nYou can specify pre-fill form data using the following context object: <code>context.prefillForms<\/code>.<br \/>\nYou can use the following in Javascript to populate the above-mentioned context object:<\/p>\n<pre>context.prefillForms = {\r\n  &lt;form_name&gt;: {\r\n     fields: {\r\n        &lt;form_field1&gt;: \"&lt;value1&gt;\",\r\n        &lt;form_field2&gt;: &lt;context.session.....&gt;,\r\n        &lt;form_array_field2&gt;: [\r\n             &lt;array_value1&amp;gt,\r\n             &lt;array_value2&amp;gt,\r\n        ],\r\n     },\r\n  },\r\n};<\/pre>\n<p>&nbsp;<\/p>\n<h1><span class=\"ez-toc-section\" id=\"Limitations\">Limitations<\/span><\/h1>\n<ul>\n<li>Digital\u00a0Forms will not work as expected on the following channels:\n<ul>\n<li>Amazon Alexa<\/li>\n<li>Cisco Jabber<\/li>\n<li>Google Assistant<\/li>\n<li>IVR Voice<\/li>\n<li>Twilio Voice<\/li>\n<\/ul>\n<p>You are advised to choose the Conversation Experience for these channels.<\/li>\n<li>Digital Forms created in the parent bot are not inherited into <strong>Smart Bots<\/strong>.<\/li>\n<li>The Digital Forms functionality is not applicable for <strong>Universal Bots<\/strong>.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can specify pre-fill form data using the following context object: context.prefillForms. You can use the following in Javascript to populate the above-mentioned context object: context.prefillForms = { &lt;form_name&gt;: { fields: { &lt;form_field1&gt;: &#8220;&lt;value1&gt;&#8221;, &lt;form_field2&gt;: &lt;context.session&#8230;..&gt;, &lt;form_array_field2&gt;: [ &lt;array_value1&amp;gt, &lt;array_value2&amp;gt, ], }, }, }; &nbsp; Limitations Digital\u00a0Forms will not work as expected on the following&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-23741","post","type-post","status-publish","format-standard","hentry","category-bot-builder-tool"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/23741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/comments?post=23741"}],"version-history":[{"count":63,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/23741\/revisions"}],"predecessor-version":[{"id":61883,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/23741\/revisions\/61883"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/media?parent=23741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/categories?post=23741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/tags?post=23741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}