{"id":24073,"date":"2020-07-20T07:18:43","date_gmt":"2020-07-20T06:18:43","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-2\/?p=24073"},"modified":"2021-03-17T10:32:21","modified_gmt":"2021-03-17T10:32:21","slug":"how-to-add-data-into-data-tables-from-digital-forms","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/how-tos\/how-to-add-data-into-data-tables-from-digital-forms\/","title":{"rendered":"How to Add Data into Data Tables from 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 class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<p>In this How-To, we will explore a scenario in a Banking Bot, where the user can create an additional account.<\/p>\n<p>We will see how data collected from the Digital Forms can be used to create the account in a Data Table.<\/p>\n<p>For details on what Digital Forms are and how it is implemented in the Kore.ai Bots platform, <a href=\"\/docs\/bots\/bot-builder-tool\/digital-forms\/\" target=\"_blank\" rel=\"noopener noreferrer\">refer here<\/a>.<br \/>\nFor details on what Data Tables are and how it is implemented in the Kore.ai Bots platform,\u00a0<a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/advanced-topics\/data-as-a-service\/\" target=\"_blank\" rel=\"noopener noreferrer\">refer here<\/a>.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h1><span class=\"ez-toc-section\" id=\"Problem_Statement\">Problem Statement<\/span><\/h1>\n<p>Consider a Banking Bot trying to address the following scenarios:<\/p>\n<ol>\n<li>An already registered user wants to open an additional account.<\/li>\n<li>There are three types of accounts that are available, each with further options:\n<ul>\n<li>Savings Account;<\/li>\n<li>Checking Account with an option to opt for a Cash Card and set a Minumum Balance;<\/li>\n<li>Credit Card with an option to choose the type of card to be Platinum, Gold, Silver or Basic<\/li>\n<\/ul>\n<\/li>\n<li>The above data is collected from the user using a Digital form.<\/li>\n<li>This data needs to be updated to the data table.<\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Pre-requisites\">Pre-requisites<\/span><\/h2>\n<ul>\n<li>Bot building knowledge<\/li>\n<li>A Banking Bot with access to\n<ul>\n<li>Customer details table as <a href=\"\/docs\/bots\/how-tos\/how-to-add-data-tables\/#Table_Creation\" target=\"_blank\" rel=\"noopener noreferrer\">created here<\/a><\/li>\n<li>Account details table, using the same steps shown in the above link create the following data table:\n<ol>\n<li><strong>Name<\/strong>, say <em>accountdetails;<\/em><\/li>\n<li><strong>Description<\/strong>, say <em>Account details Table;<\/em><\/li>\n<li>Under the <strong>Column <\/strong>section add the following details:<br \/>\n<table>\n<tbody>\n<tr>\n<th>Column Name<\/th>\n<th>Type<\/th>\n<th>Required<\/th>\n<th>Additional Settings<\/th>\n<\/tr>\n<tr>\n<td>AccountId<\/td>\n<td>number<\/td>\n<td>Yes<\/td>\n<td>Encrypted &amp; Max Length of 5<\/td>\n<\/tr>\n<tr>\n<td>AccountName<\/td>\n<td>string<\/td>\n<td>Yes<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<tr>\n<td>AccountType<\/td>\n<td>string<\/td>\n<td>No<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<tr>\n<td>CustId<\/td>\n<td>number<\/td>\n<td>Yes<\/td>\n<td>Reference table &amp; column as<br \/>\n<em>customertable.CustId<\/em><\/td>\n<\/tr>\n<tr>\n<td>CashCard<\/td>\n<td>string<\/td>\n<td>No<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<tr>\n<td>WithdrawalLimit<\/td>\n<td>number<\/td>\n<td>No<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<tr>\n<td>CCType<\/td>\n<td>string<\/td>\n<td>No<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\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\/20200720072653\/DTUC3_accountTable.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24080\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720072653\/DTUC3_accountTable.png\" alt=\"\" width=\"1089\" height=\"717\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720072653\/DTUC3_accountTable.png 1089w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720072653\/DTUC3_accountTable-300x198.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720072653\/DTUC3_accountTable-1024x674.png 1024w\" sizes=\"auto, (max-width: 1089px) 100vw, 1089px\" \/><\/a><\/li>\n<li>Digital Form, we will be using the Digital Form configured as <a href=\"\/docs\/bots\/how-tos\/how-to-configure-digital-forms\/#Digital_Form_Configuration\">shown here<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h1><span class=\"ez-toc-section\" id=\"Configurations\">Configurations<\/span><\/h1>\n<p>Let us consider each of the following scenarios one by one:<\/p>\n<ol>\n<li>Dialog Task to:\n<ol>\n<li>capture the customer id;<\/li>\n<li>trigger the Digital Form to gather account details; and<\/li>\n<li>invoke the service node to add the account data.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\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<h2><span class=\"ez-toc-section\" id=\"Dialog_Task_Configuration\">Dialog Task Configuration<\/span><\/h2>\n<p>We will be creating a dialog task and adding a form node to trigger the Digital Form created in the above step and use a service node to make a service call to add the new account from the form data.<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\/20200720064538\/DTUC3_dialog-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24074\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720064538\/DTUC3_dialog-1.png\" alt=\"\" width=\"963\" height=\"589\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Create_Dialog_Task\">Create Dialog Task<\/span><\/h3>\n<ol>\n<li>From the left navigation menu, select\u00a0<strong>Bot Tasks -&gt; Dialog Tasks.<\/strong><\/li>\n<li>Click the\u00a0<strong>+<\/strong> against the\u00a0<strong>Dialog Tasks<\/strong> to create a new Task\n<ul>\n<li>Enter\u00a0<strong>IntentName<\/strong>, say, <em>AddAccount<\/em><\/li>\n<li><strong>Create &amp; Proceed<\/strong> to open the dialog builder page.<\/li>\n<\/ul>\n<\/li>\n<li>Retain the Intent Node default settings, and close the Intent Node.<\/li>\n<li>Click the\u00a0<strong>+<\/strong> next to the intent node and select the <strong>Entity\u00a0<\/strong>node. This will be used to capture the customer id\n<ol>\n<li>Enter <strong>Name<\/strong>, say, <em>CustId<\/em><\/li>\n<li>Select\u00a0<strong>Type<\/strong>, as <em>Number<\/em><\/li>\n<li><strong>User Prompt<\/strong>, as <em>Enter your Customer Id<\/em>\n<\/li>\n<li>Close the entity node.<\/li>\n<\/ol>\n<\/li>\n<li>Add a\u00a0<strong>Service<\/strong> node to check for the validity of the customer id entered.<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720065324\/DTUC3_getCustomer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24075\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720065324\/DTUC3_getCustomer.png\" alt=\"\" width=\"695\" height=\"763\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720065324\/DTUC3_getCustomer.png 695w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720065324\/DTUC3_getCustomer-273x300.png 273w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/a><\/li>\n<li>Add a <strong>Logic<\/strong> node to proceed with the Form if the customer id is valid else prompt for the customer id.<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\/20200720070935\/DTUC3_logic.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24076\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720070935\/DTUC3_logic.png\" alt=\"\" width=\"819\" height=\"597\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720070935\/DTUC3_logic.png 819w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720070935\/DTUC3_logic-300x219.png 300w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/a><\/li>\n<li>The\u00a0<em>InvalidCustId<strong>\u00a0<\/strong><\/em>is a\u00a0<strong>Message<\/strong> node with the following JavaScript:\n<pre>context.entities.CustId = null;\r\nprint('You have entered an invalid customer id, try again');<\/pre>\n<\/li>\n<li>Next, add a <strong>Form<\/strong> node and from the dropdown list select the form (<em>OpenAccount<\/em>).\n<ul>\n<li>You will be prompted to select the\u00a0<strong>Form Experience.<\/strong> Kore.ai Bots platform allows you to gather user input both from the form and through conversation based on the channel.<\/li>\n<li>For this use case, let us select\u00a0<em>Only Form UI<\/em> experience.<\/li>\n<li>A Form Node would be added, you can customize the form name, etc.<\/li>\n<li>We are changing the <strong>Name<\/strong> to <em>OpenAccountForm<\/em> and <strong>Display Name<\/strong><em>\u00a0<\/em>to <em>Form to open account<\/em>.<\/li>\n<\/ul>\n<\/li>\n<li>Using a\u00a0<strong>Service<\/strong> node, fetch any existing account details for the customer id.<\/li>\n<li>Next, we will see how to capture the values returned by the Form Node.<br \/>\nWe will show two different ways to go about this:<\/p>\n<ol>\n<li>use the values returned by the Form node directly using the context variables &#8211; Use a <strong>Service<\/strong> node to add the account details using the context variables<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\/20210111064604\/DTUC3_addAccount2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20210111064604\/DTUC3_addAccount2.png\" alt=\"\" width=\"695\" height=\"763\" class=\"alignnone size-full wp-image-26389\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20210111064604\/DTUC3_addAccount2.png 695w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20210111064604\/DTUC3_addAccount2-273x300.png 273w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/a><\/li>\n<li>OR use a <strong>Script<\/strong> node and process the data returned by the Form Node.\n<ul>\n<li>Use the following script to get the next account id value and set to null the unwanted fields:\n<pre>\/\/get the next account id\r\nvar resultSet = context.GetAcctData.response.body.queryResult;\r\nvar id = 0;\r\n\r\nif (!resultSet.length) {\r\n    id=1;\r\n} else {\r\n    for (var i=0; i&lt;resultSet.length; i++) {\r\n        if (id &lt; resultSet[i].AccountId) {\r\n            id = resultSet[i].AccountId;\r\n         }\r\n        }\r\n    id++;    \r\n    }\r\ncontext.accountid = id;\r\ncontext.name=context.GetCustData.response.body.queryResult[0].CustName;\r\n\r\n\/\/set unwanted fields to null\r\nif (context.forms.OpenAccount.accounttype == 'Savings')\r\n\t{ context.cashcard = null;\r\n\t  context.withdrawallimit = null;\r\n\t  context.cardtype = null;\r\n\t  context.type=context.forms.OpenAccount.accounttype;\r\n\t  }\r\n\t  \r\nif (context.forms.OpenAccount.accounttype == 'Checkings')\r\n\t{ context.cardtype = null;\r\n      context.cashcard = context.forms.OpenAccount.cashcard;\r\n\t  context.withdrawallimit = context.forms.OpenAccount.withdrawallimit;\r\n\t  context.type=context.forms.OpenAccount.accounttype;\r\n\t  }\r\n\t  \r\nif (context.forms.OpenAccount.accounttype == 'Credit Card')\r\n\t{ context.cashcard = null;\r\n\t  context.withdrawallimit = null;\r\n\t  context.cardtype = context.forms.OpenAccount.cardtype;\r\n\t  context.type=context.forms.OpenAccount.accounttype;\r\n\t  }<\/pre>\n<\/li>\n<li>Use a <strong>Service<\/strong> node to add the account details using the context variables populated in the previous Script node.<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\/20200720071825\/DTUC3_addAccount.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24077\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720071825\/DTUC3_addAccount.png\" alt=\"\" width=\"695\" height=\"767\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720071825\/DTUC3_addAccount.png 695w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20200720071825\/DTUC3_addAccount-272x300.png 272w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li>Your dialog with form and service nodes to update the data table is ready.<\/li>\n<li><strong>Talk to bot<\/strong> and follow the steps to add an account to a given customer id.<\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h1><span class=\"ez-toc-section\" id=\"Conclusion\">Conclusion<\/span><\/h1>\n<p>In this post, we have seen:<\/p>\n<ul>\n<li>How to fetch data from data tables;<\/li>\n<li>How to trigger the From from a Dialog;<\/li>\n<li>How to add the data captured from the form to a data table.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"In this How-To, we will explore a scenario in a Banking Bot, where the user can create an additional account. We will see how data collected from the Digital Forms can be used to create the account in a Data Table. For details on what Digital Forms are and how it is implemented in the...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[],"class_list":["post-24073","post","type-post","status-publish","format-standard","hentry","category-how-tos"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/24073","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=24073"}],"version-history":[{"count":9,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/24073\/revisions"}],"predecessor-version":[{"id":26391,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/24073\/revisions\/26391"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/media?parent=24073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/categories?post=24073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/tags?post=24073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}