{"id":126766,"date":"2022-09-01T16:06:37","date_gmt":"2022-09-01T07:06:37","guid":{"rendered":"https:\/\/support.questetra.com\/?p=126766"},"modified":"2026-07-29T16:31:40","modified_gmt":"2026-07-29T07:31:40","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-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-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-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-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_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_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":[3279],"faq_section":[],"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":[],"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-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":71186,"url":"https:\/\/support.questetra.com\/en\/versions\/version-1180\/","url_meta":{"origin":126766,"position":1},"title":"v11.8 2018-10-22 Setting of Deadline to Form Entry\/Webhook Acceptance in Midstream","author":"Hirotaka NISHI","date":"2018-10-09","format":false,"excerpt":"Release Overview Date Release Mon. Oct. 22nd, 2018 Changes to be Noted In accessing Questetra, unnormalized URL (such as consecutive slashes, etc.) will be prohibited. [Advance Notice] Change the specification so that script execution errors will occur if there is anything other than the character string in elements in the\u2026","rel":"","context":"In &quot;Version Info&quot;","block_context":{"text":"Version Info","link":"https:\/\/support.questetra.com\/en\/category\/versions\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/10\/version-1180-fi-en-1.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/10\/version-1180-fi-en-1.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/10\/version-1180-fi-en-1.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/10\/version-1180-fi-en-1.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/10\/version-1180-fi-en-1.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":76212,"url":"https:\/\/support.questetra.com\/en\/bpmn-icons\/message-start-event-form\/","url_meta":{"origin":126766,"position":2},"title":"Message Start Event (form)","author":"Hirotaka NISHI","date":"2024-09-02","format":false,"excerpt":"Issues a Web form (its URL) for awaiting entry. Starts a new process automatically by receiving entry. The form can be embedded on any website using \"iframe\" HTML tag.","rel":"","context":"In &quot;BPMN Icons&quot;","block_context":{"text":"BPMN Icons","link":"https:\/\/support.questetra.com\/en\/category\/bpmn-icons\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-message-start-event-form-1200x675.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\/bpmn-icon-message-start-event-form-1200x675.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-message-start-event-form-1200x675.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-message-start-event-form-1200x675.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-message-start-event-form-1200x675.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":79731,"url":"https:\/\/support.questetra.com\/en\/data-items\/select-type\/","url_meta":{"origin":126766,"position":3},"title":"Select-Type","author":"Peter Glover","date":"2019-09-30","format":false,"excerpt":"Displays a list of options that can be selected by the person in charge of processing, and stores the selection results.","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\/Select.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\/Select.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Select.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Select.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Select.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":68623,"url":"https:\/\/support.questetra.com\/en\/versions\/version-1140\/","url_meta":{"origin":126766,"position":4},"title":"v11.4 2017-09-11 Enhanced Security through Access Control Functions, etc.","author":"Hirotaka NISHI","date":"2017-08-29","format":false,"excerpt":"Release Overview Date Release Mon. Sept. 11th, 2017 Changes to be Noted We will make the following changes as part of CSRF measures (security enhancement) Abolished permalink of Process Start (\/PE\/ProcessModel\/listView?processModelInfoId=XXX&nodeNumber=XXX Access by GET will be prohibited with respect to APIs of \"Submitting the Task output (\/API\/PE\/Workitem\/Form\/save)\" and \"Creating a\u2026","rel":"","context":"In &quot;Version Info&quot;","block_context":{"text":"Version Info","link":"https:\/\/support.questetra.com\/en\/category\/versions\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2017\/08\/version-1140-fi-en.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2017\/08\/version-1140-fi-en.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2017\/08\/version-1140-fi-en.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2017\/08\/version-1140-fi-en.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2017\/08\/version-1140-fi-en.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":79328,"url":"https:\/\/support.questetra.com\/en\/bpmn-icons\/receive-task-form\/","url_meta":{"origin":126766,"position":5},"title":"Receive Task (form)","author":"Hirotaka NISHI","date":"2024-09-02","format":false,"excerpt":"Publishes a Web form when a token arrives and awaits input to the web form. Advances the token if there is an input to the web form. The Web form can be submitted by users who don't have an account for the Workflow platform. The user is notified of the\u2026","rel":"","context":"In &quot;BPMN Icons&quot;","block_context":{"text":"BPMN Icons","link":"https:\/\/support.questetra.com\/en\/category\/bpmn-icons\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-receive-task-form-1200%C3%97675.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\/bpmn-icon-receive-task-form-1200%C3%97675.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-receive-task-form-1200%C3%97675.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-receive-task-form-1200%C3%97675.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/10\/bpmn-icon-receive-task-form-1200%C3%97675.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"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","_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"},{"taxonomy":"faq_section","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/faq_section?post=126766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}