{"id":126766,"date":"2022-09-01T16:06:37","date_gmt":"2022-09-01T07:06:37","guid":{"rendered":"https:\/\/support.questetra.com\/?p=126766"},"modified":"2025-12-08T12:05:34","modified_gmt":"2025-12-08T03:05:34","slug":"tutorial-questetra-form-javascript-api-1","status":"publish","type":"post","link":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/","title":{"rendered":"Get\/Set Data Item Values on the Form Screen"},"content":{"rendered":"\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:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the following three articles, you will learn the basic usage of the Questetra Form JavaScript API that can be used to decorate form screens.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Get\/Set Data Item Values on the Form Screen<\/strong><\/li>\n\n\n\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\n\n\n<li><strong>Perform Your Own Input Checks on Form Screens<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background wp-block-paragraph\">This series of articles is a split and re-edited version of <a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api\/\">Using [Questetra Form JavaScript API] on the Form Screen<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Section.1\">1. Decorate the Form Screen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Questetra BPM Suite, you can decorate form screens by writing HTML.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Display explanatory text such as instructions for data entry<\/li>\n\n\n\n<li>Decorate the text that will be displayed<\/li>\n\n\n\n<li>Display links to websites for reference<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In addition, with JavaScript and the Questetra Form JavaScript API, you can also do the following (in the Professional Edition).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Automatically count the number of input characters<\/li>\n\n\n\n<li>Add your own input checks<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In a series of tutorials, you will learn about the Questetra Form JavaScript APIs and how to use them.<\/p>\n\n\n\n<ul class=\"wp-block-list has-ast-global-color-4-background-color has-background\">\n<li>Related Documents\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/360002245252-M213-Guidance-Descriptions-on-the-Operating-Screen-HTML-JavaScript-\">M213: Guidance Descriptions on the Operating Screen (HTML\/JavaScript)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/360024615831-R2131-HTML-Tags-Available-for-Operation-Form-\">R2131: HTML Elements Available in Markdown<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/4406943475097-R2132-Questetra-Form-JavaScript-API\">R2132: Questetra Form JavaScript API<\/a> <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Questetra Form JavaScript API is guaranteed to work, but other JavaScript codes are not guaranteed to work. Please consider the need for future maintenance before using it, as there is a possibility that its behavior may change in future versions.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Section.2\">2. Preparing a Workflow App<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Prepare a workflow app to run the sample code using Questetra Form JavaScript API. Please create a new App and configure it in the following order.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2.1. Setting up a Workflow Diagram<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Create a workflow diagram with one start event, one Human Task, and one end event on the Swimlane. Change the name of the Human Task to &#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\" width=\"1024\" height=\"150\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/04\/tutorial-questetra-form-javascript-api-2.0.1.png?resize=1024%2C150&#038;ssl=1\" alt=\"\" class=\"wp-image-120692\" style=\"aspect-ratio:6.827273674341077;width:1200px;height:auto\" 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<h4 class=\"wp-block-heading\">2.2. Data Item Settings<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add two String-type Data Items, one multi-line and one single line, and configure them as follows.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Item Name<\/th><th>Data Type<\/th><th>File Name<\/th><th>Editability (\u201cH1. Input\u201d process)<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><strong>Text Input<\/strong><\/td><td>String (mulitple lines)<\/td><td>q_Input_Text<\/td><td>Editable<\/td><td>Enter text here.<\/td><\/tr><tr><td><strong>Character Count<\/strong><\/td><td>String (single line)<\/td><td>q_Characters_Count<\/td><td>Editable<\/td><td>Displays the number of characters entered.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2.3. Check the Form Screen<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Open the form preview screen of the Human Task &#8220;H1. Input&#8221;. If the data items &#8220;Text Input&#8221; and &#8220;Character Count&#8221; are displayed on the preview screen as editable input fields, you are ready to go.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"321\" data-attachment-id=\"127091\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/attachment\/tutorial-questetra-form-javascript-api-1_formpreview-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-en.png?fit=622%2C321&amp;ssl=1\" data-orig-size=\"622,321\" 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-1_FormPreview-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-1_FormPreview-en.png?fit=622%2C321&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-en.png?resize=622%2C321&#038;ssl=1\" alt=\"\" class=\"wp-image-127091\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-en.png?w=622&amp;ssl=1 622w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-en.png?resize=600%2C310&amp;ssl=1 600w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Section.2.1\">3. Get\/Set the Value of a Data Item<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We will implement the process of getting the value of a Data Item when a button placed on a form screen is clicked, and updating the value of another Data Item after processing.<br>Through this process, you will learn how to Get\/Set the value of a Data Item on the form screen using Questetra Form JavaScript API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Write a sample code that performs the following sequence of processes when a button is clicked.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Obtains the string entered in the &#8220;Text Input&#8221; Data Item.<\/li>\n\n\n\n<li>Counts the number of characters in an input string<\/li>\n\n\n\n<li>Set the count result to the Data Item &#8220;Character Count&#8221;.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The Questetra Form JavaScript API Gets\/Sets the value of a Data Item in the following format.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Get the value of a Data Item\n<ul class=\"wp-block-list\">\n<li><em>const value = qbpms.form.<strong>get<\/strong>( &#8216;{data item field name}&#8217; );<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Set the value of a Data Item\n<ul class=\"wp-block-list\">\n<li><em>qbpms.form.<strong>set<\/strong>( &#8216;{field name of data item}&#8217;, {value in format according to data type} );<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list has-ast-global-color-4-background-color has-background\">\n<li>Updating a value overwrites the value displayed in the field on the form screen. The values on the server will not be updated unless the task is saved or completed.<\/li>\n\n\n\n<li>Depending on the data type, the object at Get\/Set will differ. For details, see 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\u300d<\/a>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">3.1. Code Setup<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the following code in the Description field of the Data Item &#8220;Character Count&#8221;.<\/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;\n\/\/ Character counting process\nfunction user_countInputText(){\n\n  \/\/ Obtaining the value of the &quot;Text Input&quot; Data Item\n  const strInputText = qbpms.form.get(&#39;q_Input_Text&#39;);\n\n  \/\/ Count the number of characters and set the character count value in the &quot;Character Count&quot; Data Item\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=\"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;<strong>user_<\/strong>&#8220;\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After setting the code, display the preview screen of the &#8220;H1. Input&#8221; process. If the [Character Count] button is added under the &#8220;Character Count&#8221; Data Item, the settings are complete.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"356\" data-attachment-id=\"127093\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/attachment\/tutorial-questetra-form-javascript-api-1_formpreview-button-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-button-en.png?fit=720%2C356&amp;ssl=1\" data-orig-size=\"720,356\" 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-1_FormPreview-button-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-1_FormPreview-button-en.png?fit=720%2C356&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-button-en.png?resize=720%2C356&#038;ssl=1\" alt=\"\" class=\"wp-image-127093\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-button-en.png?w=720&amp;ssl=1 720w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_FormPreview-button-en.png?resize=600%2C297&amp;ssl=1 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3.2. Operation Check<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Check the operation of the script you have written. Open the &#8220;H1. Input&#8221; process preview screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After entering the appropriate characters in the &#8220;Text Input&#8221; field, click the &#8220;Character Count&#8221; button. The number of characters entered in the &#8220;Text Input&#8221; field will be displayed in the &#8220;Character Count&#8221; field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have confirmed that the process of retrieving the string entered in &#8220;Text Input&#8221;, counting the number of characters, and then setting the value in &#8220;Character Count&#8221; is working.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"366\" data-attachment-id=\"127096\" data-permalink=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/attachment\/tutorial-questetra-form-javascript-api-1_count-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_count-en.gif?fit=682%2C366&amp;ssl=1\" data-orig-size=\"682,366\" 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-1_count-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-1_count-en.gif?fit=682%2C366&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/09\/tutorial-questetra-form-javascript-api-1_count-en.gif?resize=682%2C366&#038;ssl=1\" alt=\"\" class=\"wp-image-127096\"\/><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background wp-block-paragraph\">Since this is a sample, we are using the preview screen to check the code operation.<br>For workflow applications used in practice, be sure to check the operation not only on the preview screen but also on the actual task processing screen (perform debugging or start a new process after the App is released).<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, you learned how to Get\/Set the values of data items on the form screen using the Questetra Form JavaScript API.<br>Next, we will learn how to <a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-2\/\">register\/delete event handlers<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This section describes how to get\/update Data Item values on the form screen using the Questetra Form JavaScript API.<\/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":[295],"tags":[3280],"class_list":["post-126766","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":4,"uagb_excerpt":"This section describes how to get\/update Data Item values on the form screen using the Questetra Form JavaScript API.","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9DiIh-wYC","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":79794,"url":"https:\/\/support.questetra.com\/en\/data-items\/guidepanel-type\/","url_meta":{"origin":126766,"position":0},"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":80860,"url":"https:\/\/support.questetra.com\/en\/data-items\/title\/","url_meta":{"origin":126766,"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":79762,"url":"https:\/\/support.questetra.com\/en\/data-items\/organization-type\/","url_meta":{"origin":126766,"position":2},"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":[]},{"id":79741,"url":"https:\/\/support.questetra.com\/en\/data-items\/numeric-type\/","url_meta":{"origin":126766,"position":3},"title":"Numeric-Type","author":"Peter Glover","date":"2019-09-30","format":false,"excerpt":"Displays a text field that accepts only numeric values.","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\/Numeric.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\/Numeric.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Numeric.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Numeric.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Numeric.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":79754,"url":"https:\/\/support.questetra.com\/en\/data-items\/user-type\/","url_meta":{"origin":126766,"position":4},"title":"User-Type","author":"Peter Glover","date":"2021-10-01","format":false,"excerpt":"Displays a search box for selecting a user 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\/User.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\/User.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/User.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/User.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/User.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":126766,"position":5},"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":[]}],"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/126766","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=126766"}],"version-history":[{"count":21,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/126766\/revisions"}],"predecessor-version":[{"id":179206,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/126766\/revisions\/179206"}],"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=126766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/categories?post=126766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/tags?post=126766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}