{"id":122793,"date":"2022-06-06T13:07:00","date_gmt":"2022-06-06T04:07:00","guid":{"rendered":"https:\/\/support.questetra.com\/?p=122793"},"modified":"2026-04-14T15:18:00","modified_gmt":"2026-04-14T06:18:00","slug":"tutorial-questetra-form-javascript-api","status":"publish","type":"post","link":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/","title":{"rendered":"Using [Questetra Form JavaScript API] on the Form Screen"},"content":{"rendered":"<div class=\"su-note\"  style=\"border-color:#e5e54c;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#FFFF66;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">\n<h3><i class=\"fal fa-exclamation-circle\"><\/i> PAGE UPDATED<\/h3>\n<p>The contents of this article have been divided and re-edited into the following three articles. See the new articles.<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/\">Get\/Set Data Item Values on the Form Screen<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-2\/\">Perform Processing When an Event Occurs on the Form Screen<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-3\/\">Perform Your Own Input Checks on Form Screens<\/a><\/strong><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"58\" data-attachment-id=\"113212\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/message-start-event-http-browser\/attachment\/professional-banner-new-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/12\/professional-banner-new-en.png?fit=1200%2C68&amp;ssl=1\" data-orig-size=\"1200,68\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"professional-banner-new-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/12\/professional-banner-new-en.png?fit=1024%2C58&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/12\/professional-banner-new-en-1024x58.png?resize=1024%2C58&#038;ssl=1\" alt=\"\" class=\"wp-image-113212\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/12\/professional-banner-new-en.png?resize=1024%2C58&amp;ssl=1 1024w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/12\/professional-banner-new-en.png?resize=600%2C34&amp;ssl=1 600w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/12\/professional-banner-new-en.png?resize=768%2C44&amp;ssl=1 768w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/12\/professional-banner-new-en.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-37c313a4      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#page-updated\" class=\"uagb-toc-link__trigger\">PAGE UPDATED<\/a><li class=\"uagb-toc__list\"><a href=\"#1-customize-the-form-screen\" class=\"uagb-toc-link__trigger\">1. Customize the Form Screen<\/a><li class=\"uagb-toc__list\"><a href=\"#2-using-questetra-form-javascript-api\" class=\"uagb-toc-link__trigger\">2. Using Questetra Form JavaScript API<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#20-advance-preparation-create-a-new-workflow-application\" class=\"uagb-toc-link__trigger\">2.0. (Advance Preparation) Create a New Workflow Application<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#21-getassign-input-field-values\" class=\"uagb-toc-link__trigger\">2.1. Get\/Assign Input Field Values<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#22-registerdelete-event-handlers-for-input-fields\" class=\"uagb-toc-link__trigger\">2.2. Register\/Delete Event Handlers for Input Fields<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#23-registerdelete-ready-event-handlers-on-form-screens\" class=\"uagb-toc-link__trigger\">2.3. Register\/delete ready event handlers on form screens<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#24-application-perform-your-own-input-checks-on-form-screens\" class=\"uagb-toc-link__trigger\">2.4. Application) Perform your own input checks on form screens<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#3-summary\" class=\"uagb-toc-link__trigger\">3. Summary<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Section.1\">1. Customize the Form Screen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Questetra BPM Suite you can decorate and customize form screens using HTML \/ JavaScript, to perform such actions as:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Display explanatory text such as precautions for data entry<\/li><li>Decorate the text to be displayed<\/li><li>Display links to websites for reference<\/li><li>Automatically count the number of input characters<\/li><li>Add input checks of your own\u3000\u3000\u3000\u3000\u3000\u3000\u3000<strong><em>etc.<\/em><\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Form screen decoration and customization can be done by writing HTML or JavaScript in the Description field of the Data Item settings (including for Guide Panel-type). For customization using JavaScript, you can use the Questetra Form JavaScript API (in Professional Edition).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following can be achieved by using the Questetra Form JavaScript API.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Getting\/assigning input field values<\/li><li>Registering\/deleting change event handlers for input fields<\/li><li>Registering\/deleting a ready event handler for a form<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The next chapter explains the actual usage of Questetra Form JavaScript API through sample code.<\/p>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background wp-block-paragraph\">The Questetra Form JavaScript API is guaranteed to work, but other JavaScript codes are not guaranteed to work. Please consider the need for future maintenance when using it, as there is a possibility that the behavior may change in future versions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Section.2\">2. Using Questetra Form JavaScript API<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"Section.2.0\">2.0. (Advance Preparation) Create a New Workflow Application<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new workflow application and open the edit screen.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.0.1. Setting Up Workflow Diagrams<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Place one Swimlane, one Start Event, one Human Task, and one End Event in the Workflow Diagram tab. For the Human Task, rename the task &#8220;H1. Input&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/04\/tutorial-questetra-form-javascript-api-2.0.1.png?resize=1004%2C147&#038;ssl=1\" alt=\"\" class=\"wp-image-120692\" width=\"1004\" height=\"147\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/04\/tutorial-questetra-form-javascript-api-2.0.1.png?resize=1024%2C150&amp;ssl=1 1024w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/04\/tutorial-questetra-form-javascript-api-2.0.1.png?resize=600%2C88&amp;ssl=1 600w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/04\/tutorial-questetra-form-javascript-api-2.0.1.png?resize=768%2C112&amp;ssl=1 768w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/04\/tutorial-questetra-form-javascript-api-2.0.1.png?w=1348&amp;ssl=1 1348w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">2.0.2. Data Item Settings<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Add and set the Data Items as follows.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Data Item Name<\/th><th>Type<\/th><th>Data Field Name<\/th><th>Required<\/th><th>\u300cH1. Input\u300d Project<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><strong>Text Entry<\/strong><\/td><td>String-type (multiple lines)<\/td><td>q_Input_Text<\/td><td>\u2010<\/td><td>Editable<\/td><td>Enter the text here.<\/td><\/tr><tr><td><strong>Character Count<\/strong><\/td><td>String-type (single line)<\/td><td>q_Characters_Count<\/td><td>\u2010<\/td><td>Editable<\/td><td>Displays the result of the input character count.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">2.0.3. Confirmation after Setup<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Click the Form Preview button to open the Form Preview screen.<br>The setup is complete when the Data Items [Text Entry] and [Character Count] are displayed on the preview screen as input fields respectively.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"492\" height=\"271\" data-attachment-id=\"123012\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/attachment\/tutorial-questetra-form-javascript-api-2-0-2_formpreview-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.0.2_FormPreview-en.png?fit=492%2C271&amp;ssl=1\" data-orig-size=\"492,271\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-2.0.2_FormPreview-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.0.2_FormPreview-en.png?fit=492%2C271&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.0.2_FormPreview-en.png?resize=492%2C271&#038;ssl=1\" alt=\"\" class=\"wp-image-123012\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"Section.2.1\">2.1. Get\/Assign Input Field Values<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In this section we will incorporate a process into the form screen that counts the number of characters entered when a button is clicked. Through this implementation, you will learn how to get\/assign values to input fields.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The description method using Questetra Form JavaScript API is as follows.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Get the value from an input field<ul><li><em>const value = qbpms.form.<strong>get<\/strong>( &#8216;{data item field name}&#8217; );<\/em><\/li><\/ul><\/li><li>Assign a value to an input field<ul><li><em>qbpms.form.<strong>set<\/strong>( &#8216;{data item field name}&#8217;, {value to be assigned} );<\/em><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background wp-block-paragraph\">\u203b Please refer to the reference page <a rel=\"noreferrer noopener\" href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/4406943475097-R2132-Questetra-Form-JavaScript-API\" target=\"_blank\">R2132: Questetra Form JavaScript API<\/a> for details on the data types and restrictions of the values you want to get\/assign.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.1.1. Setting Codes<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the following code into the description field on the Character Count Data Item settings screen and click [Apply and Save].<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;button type=&quot;button&quot; onclick=&quot;user_countInputText()&quot;&gt;Character Count&lt;\/button&gt; \n&lt;script&gt;\nfunction user_countInputText(){\n\n  \/\/ Retrieving values from input fields\n  const strInputText = qbpms.form.get(&#39;q_Input_Text&#39;);\n\n  \/\/ Counting the number of characters and assigning the result of the count to the input field\n  qbpms.form.set(&#39;q_Characters_Count&#39;, strInputText.length);\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This code does the following.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Adds the button [Character Count] and sets the processing when the button is clicked<\/li><li>Definition of function &#8220;<em>user_countInputText()<\/em>&#8221; for processing when the character count button is clicked<ul><li>Obtains the value entered from the [Text Entry] input field<\/li><li>The number of characters entered is counted and set to the [Character Count] input field<\/li><\/ul><\/li><\/ol>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background wp-block-paragraph\">To avoid conflicts with those used in Questetra, define your own function names\/element IDs to begin with &#8220;user_&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After setting the code, a [Character Count] button will be added below the [Character Count] input field. Reload the form preview screen for confirmation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"562\" height=\"297\" data-attachment-id=\"123014\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/attachment\/tutorial-questetra-form-javascript-api-2-1-1_formpreview-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.1.1_FormPreview-en.png?fit=562%2C297&amp;ssl=1\" data-orig-size=\"562,297\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-2.1.1_FormPreview-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.1.1_FormPreview-en.png?fit=562%2C297&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.1.1_FormPreview-en.png?resize=562%2C297&#038;ssl=1\" alt=\"\" class=\"wp-image-123014\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have confirmed that the [Character Count] button has been added, release the workflow application.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.1.2. Operation Check<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Check the operation of the incorporated code. Start a new workflow application process and open the &#8220;H1. Input&#8221; task processing screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enter appropriate characters in the [Text Entry] input field and click the [Character Count] button. The number of characters entered in the [Text Input] input field is now displayed in the [Character Count] input field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"288\" data-attachment-id=\"123016\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/attachment\/tutorial-questetra-form-javascript-api-2-1-2_scriptrun-5-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.1.2_ScriptRun-5-en.gif?fit=472%2C288&amp;ssl=1\" data-orig-size=\"472,288\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-2.1.2_ScriptRun-5-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.1.2_ScriptRun-5-en.gif?fit=472%2C288&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.1.2_ScriptRun-5-en.gif?resize=472%2C288&#038;ssl=1\" alt=\"\" class=\"wp-image-123016\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Processing that displays the number of entered characters each time the [Character Count] button is clicked has been added.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"Section.2.2\">2.2. Register\/Delete Event Handlers for Input Fields<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In this section, we will make the processing of counting the number of entered characters work when the change event of an input field occurs. Through this implementation, you will learn how to register\/delete event handlers for input fields.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The description method using Questetra Form JavaScript API is as follows.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Register an event handler for an input field<ul><li><em>qbpms.form.<strong>on<\/strong>(<br>&#8216;change&#8217;,<br>&#8216;{data item field name}&#8217;,<br>{function to be called when the event occurs} );<\/em><\/li><\/ul><\/li><li>Remove the event handler from the input field<ul><li><em>qbpms.form.<strong>off<\/strong>(<br>&#8216;change&#8217;,<br>&#8216;{data item field name}&#8217;,<br>{function to call when an event occurs} );<\/em><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background wp-block-paragraph\">\u203b Note that it is <em><strong>on<\/strong>\/<strong>off<\/strong><\/em>, not <em>get\/set<\/em>.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.2.1. Setting Codes<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Overwrite the codes in the Description field of the [Character Count] Data Item by pasting the following codes, then click [Apply and Save].<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;button type=&quot;button&quot; onclick=&quot;user_registerHandlers()&quot;&gt;Event Registration&lt;\/button&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_deregisterHandlers()&quot;&gt;Event Deletion&lt;\/button&gt; \n&lt;script&gt;\n\n\/\/ Register processing when a Change event occurs\nfunction user_registerHandlers(){\n  qbpms.form.on(&#39;change&#39;, &#39;q_Input_Text&#39;, user_countInputText);\n}\n\n\/\/ Delete processing when Change event occurs\nfunction user_deregisterHandlers(){\n  qbpms.form.off(&#39;change&#39;, &#39;q_Input_Text&#39;, user_countInputText);\n}\n\n\/\/ Processing when an event occurs\nfunction user_countInputText(){\n\n  \/\/ Retrieving values from input fields\n  const strInputText = qbpms.form.get(&#39;q_Input_Text&#39;);\n\n  \/\/ Counting the number of characters and assigning the result of the count to the input field\n  qbpms.form.set(&#39;q_Characters_Count&#39;, strInputText.length);\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This code does the following.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Adds the buttons [Event Registration] and [Event Deletion] and sets the processing when each button is clicked<\/li><li><span style=\"color: var(--ast-global-color-3); font-size: 1rem;\">Definition of functions for registration\/deletion of event handlers to be called when each added button is clicked<\/span><ol><li>The function <em>user_registerHandlers()<\/em> registers a change event handler to the input field [Text Entry]<\/li><li>The function <em>user_deregisterHandlers()<\/em> removes the change event handler from the input field [Text Entry]<\/li><\/ol><\/li><li>The function <em>user_countInputText()<\/em> counts the number of characters entered<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">When the code is set, the [Character Count] button disappears and two buttons [Event Registration] and [Event Deletion] appear instead. Reload the form preview screen for confirmation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"288\" data-attachment-id=\"123018\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/attachment\/tutorial-questetra-form-javascript-api-2-2-1_formpreview-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.2.1_FormPreview-en.png?fit=472%2C288&amp;ssl=1\" data-orig-size=\"472,288\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-2.2.1_FormPreview-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.2.1_FormPreview-en.png?fit=472%2C288&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.2.1_FormPreview-en.png?resize=472%2C288&#038;ssl=1\" alt=\"\" class=\"wp-image-123018\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After confirming that the button has been changed, release the workflow application again.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.2.2. Operation Check<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Check the operation of the incorporated code. Start a new workflow application process and open the &#8220;H1. Input&#8221; task processing screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s enter the appropriate characters in the [Text Entry] input field and then move the focus to trigger the change event in this field. I believe that the number of entered characters is not displayed in the [Character Count] input field. In fact, at this stage, the processing when the change event occurs in the [Text Entry] input field has not yet been registered.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now click on the [Event Registration] button. Now the processing when the change event occurs has been registered, and the character count will be performed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s try typing the appropriate characters in the Text Entry field again. Each time a change event occurs in the Text Entry field, the number of entered characters is now displayed in the Character Count field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, click on the [Event Deletion] button. This deletes the processing that runs when the change event occurs and disables the character count processing. Even if you enter the appropriate character in the [Text Entry] input field, and move the focus to trigger the change event in [Text Entry], the character count processing will no longer be performed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"288\" data-attachment-id=\"123020\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/attachment\/tutorial-questetra-form-javascript-api-2-2-2_scriptrun-2-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.2.2_ScriptRun-2-en.gif?fit=472%2C288&amp;ssl=1\" data-orig-size=\"472,288\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-2.2.2_ScriptRun-2-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.2.2_ScriptRun-2-en.gif?fit=472%2C288&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.2.2_ScriptRun-2-en.gif?resize=472%2C288&#038;ssl=1\" alt=\"\" class=\"wp-image-123020\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It is now possible for addition and deletion of processing that displays the number of entered characters each time a change event occurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s study it further.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"Section.2.3\">2.3. Register\/delete ready event handlers on form screens<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In this section, we will challenge configuring that when the ready event of the form screen occurs, the processing of counting the number of entered characters is registered.<br>Through this exercise you will learn how to register\/delete ready event handlers on form screens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The description method using Questetra Form JavaScript API is as follows.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Register a ready event handler to a form screen<ul><li><em>qbpms.form.on(<br>&#8216;<strong>ready<\/strong>&#8216;,<br>{function to be called when the event occurs} );<\/em><\/li><\/ul><\/li><li>Remove the ready event handler from the form screen<ul><li><em>qbpms.form.off(<br>&#8216;<strong>ready<\/strong>&#8216;,<br>{function to be called when the event occurs} );<\/em><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background wp-block-paragraph\">\u203b Note that it is a <strong>ready<\/strong> event, not a <em>change<\/em>, and that the Data Item is not included in the argument.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.3.1. Setting Codes<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the following code into the Description field of the Data Item [Character Count] for overwriting it, and then click [Apply and Save].<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;script type=&quot;text\/javascript&quot;&gt;\n\n\/\/ Processing when an event occurs\nfunction user_countInputText(){\n\n  \/\/ Retrieving values from input fields\n  const strInputText = qbpms.form.get(&#39;q_Input_Text&#39;);\n\n  \/\/ Counting the number of characters and assigning the result of the count to the input field\n  qbpms.form.set(&#39;q_Characters_Count&#39;, strInputText.length);\n}\n\n\/\/ Register processing when a Change event occurs\nfunction user_registerHandlers(){\n  qbpms.form.on(&#39;change&#39;, &#39;q_Input_Text&#39;, user_countInputText);\n}\n\n\/\/ Add processing to be executed when the form is displayed (ready)\n\/\/ Call the change event handler registration function so that the function for the data item [Text Entry] is enabled.\nfunction user_onReady(){\n  qbpms.form.on(&#39;ready&#39;, user_registerHandlers);\n}\n\nuser_onReady();\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This code does the following.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Registers a ready event handler on the form screen<ol><li>When the ready event occurs on the form, the function <em>user_registerHandlers()<\/em> is called and the change event handler for the input field [text input] is registered<\/li><\/ol><\/li><li>When the change event of the [Text Entry] input field occurs, the function <em>user_countInputText()<\/em> is executed to process the character count<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Once the code is set, the two buttons [Register Event] and [Delete Event] that were displayed in 2.2.1 will disappear and return to the same look and feel as the workflow application in the 2.0.3 prep stage. Please recheck the form screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"475\" height=\"298\" data-attachment-id=\"123026\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/attachment\/tutorial-questetra-form-javascript-api-2-3-1_formpreview-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.3.1_FormPreview-en.png?fit=475%2C298&amp;ssl=1\" data-orig-size=\"475,298\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-2.3.1_FormPreview-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.3.1_FormPreview-en.png?fit=475%2C298&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.3.1_FormPreview-en.png?resize=475%2C298&#038;ssl=1\" alt=\"\" class=\"wp-image-123026\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Release the workflow application again after confirming that the button has been removed.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.3.2. Operation Check<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Check the operation of the incorporated code. Start a new workflow application process and open the &#8220;H1. Input&#8221; task processing screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s enter appropriate characters in the [Text Entry] input field and then move the focus to trigger the change event of [Text Entry]. Since the character count processing for the change event is registered at the time of the form&#8217;s ready event (i.e. screen drawing), the character count processing for the [Character Count] input field is now performed automatically without the need to click on any button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"288\" data-attachment-id=\"123028\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/attachment\/tutorial-questetra-form-javascript-api-2-3-2_scriptrun-3-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.3.2_ScriptRun-3-en.gif?fit=472%2C288&amp;ssl=1\" data-orig-size=\"472,288\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-2.3.2_ScriptRun-3-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.3.2_ScriptRun-3-en.gif?fit=472%2C288&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api-2.3.2_ScriptRun-3-en.gif?resize=472%2C288&#038;ssl=1\" alt=\"\" class=\"wp-image-123028\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It is now possible to automatically count the number of characters entered without having to click on any buttons. I think this is a further improvement in usability over what we have implemented up to now.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"Section.2.4\">2.4. Application) Perform your own input checks on form screens<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s try an application based on the knowledge gained through the practice of the samples so far. <br>We will try to incorporate our own <strong>numerical value checks on the client side<\/strong> into the form screen.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.4.1. Add Data Item Unique Numerical Checks<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Add new Data Items as follows.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Data Item Name<\/th><th>Type<\/th><th>Choice Type\/Choice<\/th><th>Data Field Name<\/th><th>Required<\/th><th>&#8220;H1. Input&#8221; Project<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><strong>Numerical value<\/strong><\/td><td>Numerical Value<\/td><td>\u2010<\/td><td>q_num<\/td><td>\u2010<\/td><td>Editable<\/td><td>No decimal places are required.<\/td><\/tr><tr><td><strong>Numerical Conditions<\/strong><\/td><td>Select-type (radio button)<\/td><td>The choice type is a fixed choice, <br>and the choice content CSV is as follows.<br>\u300c&gt;= More than 0,0<br>&lt;= Less than 10,10 \u300d<\/td><td>q_condition<\/td><td>\u2010<\/td><td>Editable<\/td><td>Dependent parent Data Items need not be set.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">2.4.2. Setting Codes<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the following code into the description field of the added Data Item values, and click Apply and Save.<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;div id=&quot;user_num_error&quot;&gt;\n The values do not meet the requirements\n&lt;\/div&gt; \n&lt;script&gt;\nqbpms.form.on(&#39;ready&#39;, () =&gt; {\n\n    \/\/ Display\/hide errors\n    const setErrorVisible = (visible) =&gt; {\n        const span = document.getElementById(&#39;user_num_error&#39;);\n        span.style.visibility = visible ? &#39;visible&#39; : &#39;hidden&#39;;\n    };\n\n    \/\/ Validation\n    const validateNum = () =&gt; {\n        const num = qbpms.form.get(&#39;q_num&#39;);\n        if (num === null) {\n            return;\n        }\n        const condition = qbpms.form.get(&#39;q_condition&#39;)[0];\n        switch (condition.value) {\n            case &#39;&gt;=0&#39;:\n                \/\/ num &lt; if 0 display error\n                setErrorVisible(num.lt(0));\n                break;\n            default:\n                \/\/ num &gt; if 10 display error\n                setErrorVisible(num.gt(10));\n        }\n    };\n\n    qbpms.form.on(&#39;change&#39;, &#39;q_num&#39;, () =&gt; {\n        validateNum();\n    });\n    qbpms.form.on(&#39;change&#39;, &#39;q_condition&#39;, () =&gt; {\n        validateNum();\n    });\n\n    validateNum();\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This code does the following<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The following is the definition of registering a ready event handler to the form screen and processing (anonymous function) when the ready event of the form occurs.<ol><li>Validation function <em>validateNum()<\/em><\/li><li><em>setErrorVisible()<\/em> function for displaying\/hiding error messages based on validation results<\/li><li>Process for registering a change event handler to the [Numeric Value] input field.<\/li><li>Registering a change event handler into an [Numeric Condition] input field.<\/li><\/ol><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">When you are ready to do so, release the workflow application again.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.4.3. Operation Check<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Check the operation of the incorporated code. Start a new workflow application process and open the &#8220;H1. Input&#8221; task processing screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, select the option &#8220;greater than or equal to 0&#8221; for the [Numeric Condition] radio button, enter the value &#8220;-1&#8221; in the [Numeric Value] input field, and then move the focus to trigger the change event. The value entered in [Numeric Value] does not satisfy the [Numeric Condition], so the validation error &#8220;Numeric does not satisfy the condition&#8221; will be displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, change the value of the [Numeric Value] input field to &#8220;11&#8221; and trigger the change event. This time the numeric condition is met, so the validation error &#8220;Numeric value does not meet the condition&#8221; will be hidden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this state, let&#8217;s select the choice &#8220;less than or equal to 10&#8221; for the [Numeric Condition] radio button.\u3000The numeric condition will not be met again and the validation error &#8220;Numeric value does not meet the condition&#8221; will reappear.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"201\" data-attachment-id=\"127281\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-3\/attachment\/tutorial-questetra-form-javascript-api-3-input-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-3-input-en.gif?fit=522%2C201&amp;ssl=1\" data-orig-size=\"522,201\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tutorial-questetra-form-javascript-api-3-input-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-3-input-en.gif?fit=522%2C201&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-3-input-en.gif?resize=522%2C201&#038;ssl=1\" alt=\"\" class=\"wp-image-127281\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When a change event occurs for each of the input fields [Numeric Value] and [Numeric Condition], their input contents are validated and an error message is displayed if there is an error.<br>Please check the behavior of the message by changing the input contents of [Numerical Value] and [Numerical Condition], or by adding or changing the contents of the options or switch to case statements in the code to switch between displaying and not displaying the message.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Section.3\">3. Summary<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">How was it? We hope you have gained an understanding of how to use the Questetra Form JavaScript API by actually running the sample code up to this point.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Customization of the form screen, such as adding client-side custom input checks, can help improve usability.<br>(Checking for incomplete input at the back-end process after the task processing button is pressed reduces the number of cases where the task is sent back, etc.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Questetra Form JavaScript API can customize form screens more conveniently depending on your ideas and usage. Please try out customizing your form screens.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Questetra Form JavaScript API enables you to get\/assign values of input fields and register\/delete event handlers on the processing form screen.<\/p>\n","protected":false},"author":3,"featured_media":122572,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uag_custom_page_level_css":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[296],"tags":[3280],"class_list":["post-122793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-blog","tag-questetra-form-javascript-api"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1","uagb_featured_image_src":{"full":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1",1200,675,false],"thumbnail":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=440%2C440&ssl=1",440,440,true],"medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=560%2C315&ssl=1",560,315,true],"medium_large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=768%2C432&ssl=1",768,432,true],"large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1024%2C576&ssl=1",1024,576,true],"1536x1536":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1",1200,675,true],"2048x2048":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-landscape-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-portrait-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=900%2C675&ssl=1",900,675,true],"newspack-article-block-square-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-landscape-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=800%2C600&ssl=1",800,600,true],"newspack-article-block-portrait-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=600%2C675&ssl=1",600,675,true],"newspack-article-block-square-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=800%2C675&ssl=1",800,675,true],"newspack-article-block-landscape-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=600%2C450&ssl=1",600,450,true],"newspack-article-block-portrait-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=450%2C600&ssl=1",450,600,true],"newspack-article-block-square-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=600%2C600&ssl=1",600,600,true],"newspack-article-block-landscape-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=400%2C300&ssl=1",400,300,true],"newspack-article-block-portrait-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=300%2C400&ssl=1",300,400,true],"newspack-article-block-square-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=400%2C400&ssl=1",400,400,true],"newspack-article-block-landscape-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=200%2C150&ssl=1",200,150,true],"newspack-article-block-portrait-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=150%2C200&ssl=1",150,200,true],"newspack-article-block-square-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?resize=200%2C200&ssl=1",200,200,true],"newspack-article-block-uncropped":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1",1200,675,true]},"uagb_author_info":{"display_name":"Hirotaka NISHI","author_link":"https:\/\/support.questetra.com\/en\/author\/nishiquestetra\/"},"uagb_comment_info":3,"uagb_excerpt":"Questetra Form JavaScript API enables you to get\/assign values of input fields and register\/delete event handlers on the processing form screen.","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9DiIh-vWx","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":126766,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/","url_meta":{"origin":122793,"position":0},"title":"Get\/Set Data Item Values on the Form Screen","author":"Hirotaka NISHI","date":"2022-09-01","format":false,"excerpt":"This section describes how to get\/update Data Item values on the form screen using the Questetra Form JavaScript API.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/ja\/category\/developer-blog\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":80860,"url":"https:\/\/support.questetra.com\/en\/data-items\/title\/","url_meta":{"origin":122793,"position":1},"title":"Title","author":"Peter Glover","date":"2019-11-05","format":false,"excerpt":"Displays a text field for entering a string and stores the entered string as the subject of the process.","rel":"","context":"In &quot;Data Items&quot;","block_context":{"text":"Data Items","link":"https:\/\/support.questetra.com\/en\/category\/data-items\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/Title.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/Title.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/Title.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/Title.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/Title.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":127110,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-3\/","url_meta":{"origin":122793,"position":2},"title":"Perform Your Own Input Checks on Form Screens","author":"Hirotaka NISHI","date":"2022-09-06","format":false,"excerpt":"Implement your own input checking mechanism that runs on the form screen using the Questetra Form Javascript API.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/en\/category\/developer-blog\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":79794,"url":"https:\/\/support.questetra.com\/en\/data-items\/guidepanel-type\/","url_meta":{"origin":122793,"position":3},"title":"Guide Panel-type","author":"Peter Glover","date":"2019-09-30","format":false,"excerpt":"Displays non-editable text as guidance for users of the input form.","rel":"","context":"In &quot;Data Items&quot;","block_context":{"text":"Data Items","link":"https:\/\/support.questetra.com\/en\/category\/data-items\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":127065,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-2\/","url_meta":{"origin":122793,"position":4},"title":"Perform Processing When an Event Occurs on the Form Screen","author":"Hirotaka NISHI","date":"2022-09-05","format":false,"excerpt":"This section describes how to register\/delete event handlers for data items on the form screen and for the form screen itself using Questetra Form Javascript API.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/en\/category\/developer-blog\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":79762,"url":"https:\/\/support.questetra.com\/en\/data-items\/organization-type\/","url_meta":{"origin":122793,"position":5},"title":"Organization-Type","author":"Peter Glover","date":"2021-10-01","format":false,"excerpt":"Displays a search box for selecting an organization on the workflow system.","rel":"","context":"In &quot;Data Items&quot;","block_context":{"text":"Data Items","link":"https:\/\/support.questetra.com\/en\/category\/data-items\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Organisation.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Organisation.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Organisation.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Organisation.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Organisation.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/122793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/comments?post=122793"}],"version-history":[{"count":27,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/122793\/revisions"}],"predecessor-version":[{"id":127336,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/122793\/revisions\/127336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/media\/122572"}],"wp:attachment":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/media?parent=122793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/categories?post=122793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/tags?post=122793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}