{"id":98021,"date":"2020-11-20T17:07:22","date_gmt":"2020-11-20T08:07:22","guid":{"rendered":"https:\/\/support.questetra.com\/?page_id=98021"},"modified":"2022-07-28T17:22:53","modified_gmt":"2022-07-28T08:22:53","slug":"form-decoration-examples","status":"publish","type":"page","link":"https:\/\/support.questetra.com\/ja\/tips\/form-decoration-examples\/","title":{"rendered":"Form Decoration Examples"},"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<div style=\"text-align: center;\"><i class=\"fal fa-truck fa-lg\"><\/i> <a href=\"..\/task-form-decoration-202208\/\">https:\/\/support.questetra.com\/tips\/task-form-decoration-202208\/<\/a><\/div>\n<\/div><\/div>\n\n\n<div class=\"su-box su-box-style-soft\" id=\"\" style=\"border-color:#000000;border-radius:0px;max-width:none\"><div class=\"su-box-title\" style=\"background-color:#333333;color:#ffffff;border-top-left-radius:0px;border-top-right-radius:0px\">Form Decoration Examples<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:0px;border-bottom-right-radius:0px\">\u30d5\u30a9\u30fc\u30e0\u753b\u9762\u306e &#8220;\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3HTML&#8221; \u306b JavaScript \u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u30b9\u30af\u30ea\u30d7\u30c8\u77e5\u8b58\u304c\u3042\u308c\u3070\u3001\u696d\u52d9\u52b9\u7387\u3092\u9ad8\u3081\u308b\u69d8\u3005\u306a\u30a2\u30a4\u30c7\u30a2\u306e\u5b9f\u73fe\u304c\u53ef\u80fd\u3067\u3059\u3002 Accelerate your Workflow!!<\/div><\/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-3e32d609      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"160\"\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><\/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<p class=\"has-text-align-right wp-block-paragraph\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#444444\" class=\"has-inline-color\">Code Examples using JavaScript Selectors API or jQuery for UI developers.<\/mark><br><mark style=\"background-color:rgba(0, 0, 0, 0);color:#444444\" class=\"has-inline-color\">The Decoration feature is available with<\/mark> <mark style=\"background-color:rgba(0, 0, 0, 0);color:#4a86e8\" class=\"has-inline-color\"><strong>Professional<\/strong><\/mark> <mark style=\"background-color:rgba(0, 0, 0, 0);color:#444444\" class=\"has-inline-color\">edition<\/mark>.<br><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NOTE: No updates or support. Decoration is at your own risk.<\/mark><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>WithoutAPI: <a href=\"https:\/\/support.questetra.com\/ja\/tips\/form-decoration-examples\/\">https:\/\/support.questetra.com\/ja\/tips\/form-decoration-examples\/<\/a><\/li><li>WithAPI: <a href=\"https:\/\/support.questetra.com\/ja\/tips\/form-decoration-examples-api20211011\/\">https:\/\/support.questetra.com\/ja\/tips\/form-decoration-examples-api20211011\/<\/a><\/li><li>M213: <a rel=\"noreferrer noopener\" href=\"https:\/\/questetra.zendesk.com\/hc\/ja\/articles\/360002245252-M213-%E5%87%A6%E7%90%86%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E7%94%BB%E9%9D%A2%E3%82%92%E3%83%87%E3%82%B3%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%99%E3%82%8B-HTML-JavaScript-\" target=\"_blank\">\u51e6\u7406\u30d5\u30a9\u30fc\u30e0\u753b\u9762\u3092\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3\u3059\u308b\uff08HTML\/JavaScript\uff09<\/a><\/li><li>R2131: <a rel=\"noreferrer noopener\" href=\"https:\/\/questetra.zendesk.com\/hc\/ja\/articles\/360024615831\" target=\"_blank\">\u51e6\u7406\u30d5\u30a9\u30fc\u30e0\u753b\u9762\u3067\u5229\u7528\u3067\u304d\u308b HTML \u30bf\u30b0<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Overwrite-Title\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Overwrite Title<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Target: TITLE form (update)<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;text&quot; name=&quot;title&quot; value=&quot;Default String&quot; id=&quot;title&quot; class=&quot;fit&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1\" data-anchor=\"overwrite_title_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Click to overwrite: \n&lt;button type=&#39;button&#39; id=&#39;user_btnTitleEn&#39;&gt;Export Procedure&lt;\/button&gt;\n&lt;button type=&#39;button&#39; id=&#39;user_btnTitleJa&#39;&gt;\u8f38\u51fa\u624b\u7d9a&lt;\/button&gt;\n&lt;script&gt;\ndocument.querySelector(&#39;#user_btnTitleEn&#39;).addEventListener(&#39;click&#39;, function() {\n  document.querySelector(&quot;#title&quot;).value = &#39;Export Application&#39;;\n});\ndocument.querySelector(&#39;#user_btnTitleJa&#39;).addEventListener(&#39;click&#39;, function() {\n  document.querySelector(&quot;#title&quot;).value = &#39;\u8f38\u51fa\u7533\u8acb&#39;;\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"overwrite_title_jquery\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>using jQuery (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Click to overwrite: \n&lt;button type=&#39;button&#39; id=&#39;user_btnTitleEn&#39;&gt;Export Procedure&lt;\/button&gt;\n&lt;button type=&#39;button&#39; id=&#39;user_btnTitleJa&#39;&gt;\u8f38\u51fa\u624b\u7d9a&lt;\/button&gt;\n&lt;script&gt;\njQuery( &quot;#user_btnTitleEn&quot; ).on( &quot;click&quot;, function(){ \n  jQuery( &quot;#title&quot; ).val( &#39;Export Application&#39; );\n});\njQuery( &quot;#user_btnTitleJa&quot; ).on( &quot;click&quot;, function(){ \n  jQuery( &quot;#title&quot; ).val( &#39;\u8f38\u51fa\u7533\u8acb&#39; );\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"191\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Title.gif?resize=1200%2C191&#038;ssl=1\" alt=\"\" class=\"wp-image-97491\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Append-to-String\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Append to String<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Target: Singleline STRING form (append)<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;text&quot; name=&quot;data[0].input&quot; class=&quot;fit&quot; value=&quot;&quot; placeholder=&quot;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1\" data-anchor=\"append_to_string_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Click to add Keywords: \n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;javascript,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;json,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;workflow,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;automation,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u56f3,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;\u66f8\u304d\u65b9,&lt;\/button&gt;\n&lt;script&gt;\ndocument.querySelectorAll(&#39;.user_btnAddStr0&#39;).forEach( btn =&gt; {\n  btn.addEventListener(&#39;click&#39;, () =&gt; {\n    const strClicked0  = btn.textContent;\n    const strOriginal0 = document.querySelector( &#39;input[name=&quot;data\\\\[0\\\\].input&quot;]&#39; ).value;\n    document.querySelector( &#39;input[name=&quot;data\\\\[0\\\\].input&quot;]&#39; )\n                .value = ( strOriginal0 + strClicked0 );\n  });\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"append_to_string_jquery\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>using jQuery (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Click to add Keywords: \n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;javascript,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;json,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;workflow,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;automation,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u56f3,&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddStr0&#39;&gt;\u66f8\u304d\u65b9,&lt;\/button&gt;\n&lt;script&gt;\njQuery( &quot;.user_btnAddStr0&quot; ).on( &quot;click&quot;, function(){ \n  const strClicked0  = jQuery( this ).text();\n  const strOriginal0 = jQuery( &#39;input[name=&quot;data\\\\[0\\\\].input&quot;]&#39; ).val();\n  jQuery( &#39;input[name=&quot;data\\\\[0\\\\].input&quot;]&#39; ).val( strOriginal0 + strClicked0 );\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"191\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Singleline-String.gif?resize=1200%2C191&#038;ssl=1\" alt=\"\" class=\"wp-image-97498\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Count Characters<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: Multiline STRING form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;textarea name=&quot;data[0].input&quot; placeholder=&quot;&quot; class=&quot;fit&quot;&gt;&lt;\/textarea&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: span<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;span id=&quot;user_spanOutput0&quot; style=&quot;color:#0000aa;&quot;&gt;&lt;\/span&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"count_characters_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&#39;button&#39; onclick=&#39;user_countString0()&#39;&gt;Count Characters (WhiteSpaces Removed)&lt;\/button&gt;\n&lt;span id=&quot;user_spanOutput0&quot; style=&quot;color:#0000aa;&quot;&gt;0 chs (0 chs)&lt;\/span&gt;\n&lt;script&gt;\nfunction user_countString0(){\n  const strString0 = document.querySelector( &#39;textarea[name=&quot;data\\\\[0\\\\].input&quot;]&#39; ).value;\n  const strVisible = strString0.trim().replace(\/\\s+\/g, &#39; &#39;); \/\/ also `\\t` to space\n  \/\/ White Spaces: spaces, tabs or line breaks\n  \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Whitespace\n  \/\/ https:\/\/developer.mozilla.org\/ja\/docs\/Web\/API\/Document_Object_Model\/Whitespace\n\n  document.querySelector(&#39;#user_spanOutput0&#39;).innerHTML =  [...strString0].length + &quot; chs (&quot; + [...strVisible].length + &quot; chs)&quot;;\n  \/\/ Spread Syntax\n  \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\n  \/\/ https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"200\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/09\/decoration-examples-Count-Characters.gif?resize=1200%2C200&#038;ssl=1\" alt=\"\" class=\"wp-image-113962\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Validate-String\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Validate String<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: Multiline STRING form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;textarea name=&quot;data[1].input&quot; placeholder=&quot;&quot; class=&quot;fit&quot;&gt;&lt;\/textarea&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: div<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div id=&quot;user_divResult1&quot;&gt;&lt;span style=&quot;color:#0000aa;padding:20px;&quot;&gt;(waiting)&lt;\/span&gt;&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"validate_string_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Tsv Validation:&lt;br \/&gt;\n&lt;div id=&quot;user_divResult1&quot;&gt;&lt;span style=&quot;color:#0000aa;padding:20px;&quot;&gt;(waiting)&lt;\/span&gt;&lt;\/div&gt;\n&lt;script&gt;\ndocument.querySelector(&#39;textarea[name=&quot;data\\\\[1\\\\].input&quot;]&#39;).addEventListener(&#39;change&#39;, function() {\n  const strTsv1  = document.querySelector(&#39;textarea[name=&quot;data\\\\[1\\\\].input&quot;]&#39;).value;\n  let strResult1 = &quot;&quot;;\n\n  let arrCells1  = [];\n  const arrTsv1  = strTsv1.split(&quot;\\n&quot;);\n  for( let i = 0; i &lt; arrTsv1.length; i++ ){\n    arrCells1[i] = [];\n    let arrTmp = arrTsv1[i].split(&quot;\\t&quot;);\n    for( let j = 0; j &lt; arrTmp.length; j++ ){\n      arrCells1[i].push( arrTmp[j] );\n    }\n  }\n\n  strResult1 += &#39;&lt;span style=&quot;color:#0000ff;&quot;&gt;&#39;;\n  strResult1 += &quot;Number of RowLines: &quot; + arrTsv1.length + &quot;&lt;br \/&gt;&quot;;\n  strResult1 += &quot;Number of Columns0: &quot; + arrCells1[0].length + &quot;&lt;br \/&gt;&quot;;\n  strResult1 += &#39;&lt;\/span&gt;&#39;;\n  strResult1 += &quot;== Y:Exist, n:Empty ==&lt;br \/&gt;&quot;;\n  for( let i = 0; i &lt; arrCells1.length; i++ ){\n    strResult1 += &quot; [&quot; + i + &quot;]: &quot;;\n    for( let j = 0; j &lt; arrCells1[i].length; j++ ){\n      if( arrCells1[i][j] !== &quot;&quot; ){\n        strResult1 += &quot; Y&quot;;\n      }else{\n        strResult1 += &quot; n&quot;;\n      }\n    }\n    if( arrCells1[i].length !== arrCells1[0].length ){\n      strResult1 += &#39; &lt;span style=&quot;color:#ff0000;&quot;&gt;&#39; +\n                    &#39;(Mismatch with length of Line[0])&#39; +\n                    &#39;&lt;\/span&gt;&#39;;\n    }\n    strResult1 += &quot;&lt;br \/&gt;\\n&quot;;\n  }\n  document.querySelector(&#39;#user_divResult1&#39;).innerHTML = strResult1;\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"validate_string_jquery\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>using jQuery (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Tsv Validation:&lt;br \/&gt;\n&lt;div id=&quot;user_divResult1&quot;&gt;&lt;span style=&quot;color:#0000aa;padding:20px;&quot;&gt;(waiting)&lt;\/span&gt;&lt;\/div&gt;\n&lt;script&gt;\njQuery( &#39;textarea[name=&quot;data\\\\[1\\\\].input&quot;]&#39; ).on( &quot;change keyup&quot;, function(){\n  const strTsv1  = jQuery( this ).val();\n  let strResult1 = &quot;&quot;;\n\n  let arrCells1  = [];\n  const arrTsv1  = strTsv1.split(&quot;\\n&quot;);\n  for( let i = 0; i &lt; arrTsv1.length; i++ ){\n    arrCells1[i] = [];\n    let arrTmp = arrTsv1[i].split(&quot;\\t&quot;);\n    for( let j = 0; j &lt; arrTmp.length; j++ ){\n      arrCells1[i].push( arrTmp[j] );\n    }\n  }\n\n  strResult1 += &#39;&lt;span style=&quot;color:#0000ff;&quot;&gt;&#39;;\n  strResult1 += &quot;Number of RowLines: &quot; + arrTsv1.length + &quot;&lt;br \/&gt;&quot;;\n  strResult1 += &quot;Number of Columns0: &quot; + arrCells1[0].length + &quot;&lt;br \/&gt;&quot;;\n  strResult1 += &#39;&lt;\/span&gt;&#39;;\n  strResult1 += &quot;== Y:Exist, n:Empty ==&lt;br \/&gt;&quot;;\n  for( let i = 0; i &lt; arrCells1.length; i++ ){\n    strResult1 += &quot; [&quot; + i + &quot;]: &quot;;\n    for( let j = 0; j &lt; arrCells1[i].length; j++ ){\n      if( arrCells1[i][j] !== &quot;&quot; ){\n        strResult1 += &quot; Y&quot;;\n      }else{\n        strResult1 += &quot; n&quot;;\n      }\n    }\n    if( arrCells1[i].length !== arrCells1[0].length ){\n      strResult1 += &#39; &lt;span style=&quot;color:#ff0000;&quot;&gt;&#39; +\n                    &#39;(Mismatch with length of Line[0])&#39; +\n                    &#39;&lt;\/span&gt;&#39;;\n    }\n    strResult1 += &quot;&lt;br \/&gt;\\n&quot;;\n  }\n  jQuery( &quot;#user_divResult1&quot; ).html( strResult1 );\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"516\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Multiline-String.gif?resize=1200%2C516&#038;ssl=1\" alt=\"\" class=\"wp-image-97506\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Add-Number\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Add Number<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Target: NUMERIC form (update)<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;text&quot; name=&quot;data[2].input&quot; size=&quot;20&quot; value=&quot;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"add_number_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Click to add Number: \n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;+100&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;+10&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;+1&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;-1&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;-10&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;-100&lt;\/button&gt;\n&lt;script&gt;\ndocument.querySelectorAll(&#39;.user_btnAddNum2&#39;).forEach( btn =&gt; {\n  btn.addEventListener(&#39;click&#39;, () =&gt; {\n\n    const strClicked2  = btn.textContent;\n    const numClicked2  = parseFloat( strClicked2 );\n    const strOriginal2 = document.querySelector( &#39;input[name=&quot;data\\\\[2\\\\].input&quot;]&#39; ).value;\n\n    let   numOriginal2 = parseFloat( strOriginal2 );\n    if( isNaN( numOriginal2 ) ){\n          numOriginal2 = 0;\n    }\n    let   calcResult2  = numOriginal2 + numClicked2;\n    document.querySelector( &#39;input[name=&quot;data\\\\[2\\\\].input&quot;]&#39; )\n                .value = ( calcResult2 + &quot;&quot; );\n  });\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"add_number_jquery\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>using jQuery (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Click to add Number: \n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;+100&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;+10&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;+1&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;-1&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;-10&lt;\/button&gt;\n&lt;button type=&#39;button&#39; class=&#39;user_btnAddNum2&#39;&gt;-100&lt;\/button&gt;\n&lt;script&gt;\njQuery( &quot;.user_btnAddNum2&quot; ).on( &quot;click&quot;, function(){ \n  const strClicked2  = jQuery( this ).text();\n  const numClicked2  = parseFloat( strClicked2 );\n  let   strOriginal2 = jQuery( &#39;input[name=&quot;data\\\\[2\\\\].input&quot;]&#39; ).val();\n  let   numOriginal2 = parseFloat( strOriginal2 );\n  if( isNaN( numOriginal2 ) ){\n        numOriginal2 = 0;\n  }\n  let   calcResult2  = numOriginal2 + numClicked2;\n  jQuery( &#39;input[name=&quot;data\\\\[2\\\\].input&quot;]&#39; ).val( calcResult2 );\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"179\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Numeric.gif?resize=1200%2C179&#038;ssl=1\" alt=\"\" class=\"wp-image-97508\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Show-Selected-Value\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Show Selected Value<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: Radio SELECT form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;radio&quot; id=&quot;field-1_3-0&quot; name=&quot;data[3].selects&quot; value=&quot;false&quot;&gt;\n&lt;label for=&quot;field-1_3-0&quot; id=&quot;ext-gen1211&quot;&gt;NO&lt;\/label&gt;\n&lt;input type=&quot;radio&quot; id=&quot;field-1_3-1&quot; name=&quot;data[3].selects&quot; value=&quot;true&quot;&gt;\n&lt;label for=&quot;field-1_3-1&quot; id=&quot;ext-gen1212&quot;&gt;YES&lt;\/label&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: span<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;span id=&quot;user_spanValue3&quot; style=&quot;color:#0000aa;&quot;&gt;(waiting)&lt;\/span&gt;\n&lt;span id=&quot;user_spanDisplay3&quot; style=&quot;color:#0000aa;&quot;&gt;(waiting)&lt;\/span&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"show_selected_value_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript  (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Selected Value: &lt;span id=&quot;user_spanValue3&quot; style=&quot;color:#0000aa;&quot;&gt;(waiting)&lt;\/span&gt;&lt;br \/&gt;\nSelected Display: &lt;span id=&quot;user_spanDisplay3&quot; style=&quot;color:#0000aa;&quot;&gt;(waiting)&lt;\/span&gt;\n&lt;script&gt;\ndocument.querySelectorAll(&#39;input[name=&quot;data\\\\[3\\\\].selects&quot;]&#39;).forEach( inp =&gt; {\n  inp.addEventListener(&#39;change&#39;, () =&gt; {\n    const strValue3   = document.querySelector(&#39;input[name=&quot;data\\\\[3\\\\].selects&quot;]:checked&#39;).value;\n    const strId3      = document.querySelector(&#39;input[name=&quot;data\\\\[3\\\\].selects&quot;]:checked&#39;).id;\n    const strDisplay3 = document.querySelector(&#39;label[for=&quot;&#39; + strId3 + &#39;&quot;]&#39;).textContent;\n    document.querySelector( &#39;#user_spanValue3&#39; ).innerHTML = strValue3;\n    document.querySelector( &#39;#user_spanDisplay3&#39; ).innerHTML = strDisplay3;\n  });\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"show_selected_value_jquery\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>using jQuery (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>Selected Value: &lt;span id=&quot;user_spanValue3&quot; style=&quot;color:#0000aa;&quot;&gt;(waiting)&lt;\/span&gt;&lt;br \/&gt;\nSelected Display: &lt;span id=&quot;user_spanDisplay3&quot; style=&quot;color:#0000aa;&quot;&gt;(waiting)&lt;\/span&gt;\n&lt;script&gt;\njQuery( &quot;input[name=&#39;data\\\\[3\\\\].selects&#39;]&quot; ).on( &quot;change&quot;, function(){ \n  const strValue3   = jQuery( &#39;input[name=&quot;data\\\\[3\\\\].selects&quot;]:checked&#39; ).val();\n  const strId3      = jQuery( &#39;input[name=&quot;data\\\\[3\\\\].selects&quot;]:checked&#39; ).attr(&#39;id&#39;);\n  const strDisplay3 = jQuery( &#39;label[for=&quot;&#39; + strId3 + &#39;&quot;]&#39; ).text();\n  jQuery( &#39;#user_spanValue3&#39; ).html( strValue3 );\n  jQuery( &#39;#user_spanDisplay3&#39; ).html( strDisplay3 );\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"180\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Select-Radio.gif?resize=1200%2C180&#038;ssl=1\" alt=\"\" class=\"wp-image-97510\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Uncheck-Radio\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Uncheck Radio<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Target: Target: Radio SELECT form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;radio&quot; id=&quot;field-1_3-0&quot; name=&quot;data[3].selects&quot; value=&quot;false&quot;&gt;\n&lt;label for=&quot;field-1_3-0&quot; id=&quot;ext-gen1211&quot;&gt;NO&lt;\/label&gt;\n&lt;input type=&quot;radio&quot; id=&quot;field-1_3-1&quot; name=&quot;data[3].selects&quot; value=&quot;true&quot;&gt;\n&lt;label for=&quot;field-1_3-1&quot; id=&quot;ext-gen1212&quot;&gt;YES&lt;\/label&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"uncheck_radio_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&#39;button&#39; id=&#39;user_btnUncheck3&#39;&gt;Clear&lt;\/button&gt;\n&lt;script&gt;\ndocument.querySelector(&#39;#user_btnUncheck3&#39;).addEventListener(&#39;click&#39;, function(){\n  if( document.querySelector(&#39;input[name=&quot;data\\\\[3\\\\].selects&quot;]:checked&#39;) != null ){\n    document.querySelector(&#39;input[name=&quot;data\\\\[3\\\\].selects&quot;]:checked&#39;).checked = false;\n  }\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"180\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Uncheck-Radio.gif?resize=1200%2C180&#038;ssl=1\" alt=\"Workflow Decoration: Uncheck Radio\" class=\"wp-image-97694\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Copy-to-Clipboard\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Copy to Clipboard<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: Dropdown SELECT form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;select id=&quot;w0-field-1_4&quot; name=&quot;data[4].selects&quot; class=&quot;fit&quot; onchange=&quot;Mediator.valueChanged(4);&quot;&gt;\n  &lt;option value=&quot;&quot;&gt;\u00a0&lt;\/option&gt;\n  &lt;option value=&quot;0001&quot;&gt;\u307f\u305a\u307b\u9280\u884c MHCBJPJT&lt;\/option&gt;\n  &lt;option value=&quot;0005&quot;&gt;\u4e09\u83f1UFJ\u9280\u884c BOTKJPJT&lt;\/option&gt;\n  &lt;option value=&quot;0009&quot;&gt;\u4e09\u4e95\u4f4f\u53cb\u9280\u884c SMBCJPJT&lt;\/option&gt;\n  &lt;option value=&quot;0010&quot;&gt;\u308a\u305d\u306a\u9280\u884c DIWAJPJT&lt;\/option&gt;\n  &lt;option value=&quot;0017&quot;&gt;\u57fc\u7389\u308a\u305d\u306a\u9280\u884c SAIBJPJT&lt;\/option&gt;\n&lt;\/select&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: span<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;span id=&quot;user_spanOutput4&quot; style=&quot;color:#0000aa;&quot;&gt;&lt;\/span&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"copy_to_clipboard_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&#39;button&#39; id=&#39;user_btnCopyValue4&#39;&gt;Copy VALUE&lt;\/button&gt;\n&lt;button type=&#39;button&#39; id=&#39;user_btnCopyDisplay4&#39;&gt;Copy DISPLAY&lt;\/button&gt;\n&lt;span id=&quot;user_spanOutput4&quot; style=&quot;color:#0000aa;&quot;&gt;&lt;\/span&gt;\n&lt;script&gt;\ndocument.querySelector(&#39;#user_btnCopyValue4&#39;).addEventListener(&#39;click&#39;, function(){\n  let elSelect = document.querySelector(&#39;select[name=&quot;data\\\\[4\\\\].selects&quot;]&#39;);\n  let numIdx   = elSelect.selectedIndex;\n  \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLSelectElement\n  let strSelectedValue   = &quot;&quot;;\n  if( numIdx &gt;= 0 ){ \/\/ No element is selected: -1. Questetra&#39;s empty value: 0.\n    strSelectedValue   = elSelect.options[numIdx].value;\n    \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLOptionElement\n    navigator.clipboard.writeText( strSelectedValue ).then(function() {\n      document.querySelector(&#39;#user_spanOutput4&#39;).innerHTML = &quot;Copied: &#39;&quot; + strSelectedValue + &quot;&#39;&quot;;\n    }, function() {\n      document.querySelector(&#39;#user_spanOutput4&#39;).innerHTML = &quot;Unable to write to clipboard.&quot;;\n    });\n    \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Clipboard_API\n    \/\/ Internet Explorer not supported\n  }\n});\ndocument.querySelector(&#39;#user_btnCopyDisplay4&#39;).addEventListener(&#39;click&#39;, function(){\n  let elSelect = document.querySelector(&#39;select[name=&quot;data\\\\[4\\\\].selects&quot;]&#39;);\n  let numIdx   = elSelect.selectedIndex;\n  let strSelectedDisplay = &quot;&quot;;\n  if( numIdx &gt;= 0 ){\n    strSelectedDisplay = elSelect.options[numIdx].text;\n    navigator.clipboard.writeText( strSelectedDisplay ).then(function() {\n      document.querySelector(&#39;#user_spanOutput4&#39;).innerHTML = &quot;Copied: &#39;&quot; + strSelectedDisplay + &quot;&#39;&quot;;\n    }, function() {\n      document.querySelector(&#39;#user_spanOutput4&#39;).innerHTML = &quot;Unable to write to clipboard.&quot;;\n    });\n  }\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"180\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Copy-to-Clipboard.gif?resize=1200%2C180&#038;ssl=1\" alt=\"Workflow Decoration Copy to Clipboard\" class=\"wp-image-97719\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Show-Selected-Value-2\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Show Selected Value 2<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: Search SELECT form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=&quot;x-hide-display x-form-data-hidden&quot; role=&quot;presentation&quot; id=&quot;ext-gen1225&quot;&gt;&lt;input type=&quot;hidden&quot; name=&quot;data[5].selects&quot; value=&quot;&quot;&gt;&lt;\/div&gt;\n&lt;input id=&quot;ext-comp-1095-inputEl&quot; type=&quot;text&quot; role=&quot;combobox&quot; class=&quot;x-form-field x-form-text x-form-focus x-field-form-focus\n x-field-default-form-focus&quot; autocomplete=&quot;off&quot; name=&quot;data[5].dummy&quot; placeholder=&quot;Search for an item&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>CAN:Ottawa:UTC-5(UTC-4),Canada\nFRA:Paris:UTC+1(UTC+2):French Republic,France\nDEU:Berlin:UTC+1(UTC+2):Federal Republic of Germany,Germany\nITA:Rome:UTC+1:Italian Republic,Italy\nJPN:Tokyo:UTC+9:Japan,Japan\nGBR:London:UTC(UTC+1):United Kingdom of Great Britain and Northern Ireland,United Kingdom\nUSA:Washington D.C.:UTC-5(UTC-4):United States of America,United States<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: span<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;span style=&quot;color:#0000aa;&quot; id=&quot;user_spanResult5&quot;&gt; (waiting)&lt;\/span&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"show_selected_value_2_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&#39;button&#39; id=&#39;user_btnNote5&#39;&gt;Show Note&lt;\/button&gt;&lt;br \/&gt;\nNote:&lt;br \/&gt;\n&lt;span style=&quot;color:#0000aa;&quot; id=&quot;user_spanResult5&quot;&gt; (waiting)&lt;\/span&gt;\n&lt;script&gt;\ndocument.querySelector(&#39;#user_btnNote5&#39;).addEventListener(&#39;click&#39;, function() {\n  const strValue5   = document.querySelector(&#39;input[name=&quot;data\\\\[5\\\\].selects&quot;]&#39;).value;\n  const strDisplay5 = document.querySelector(&#39;input[name=&quot;data\\\\[5\\\\].dummy&quot;]&#39;).value;\n  \/\/ note: input do not exist on loaded\n  \/\/ note: hidden input fields do not trigger the change event\n  document.querySelector(&#39;#user_spanResult5&#39;).innerHTML = &quot; &quot; + strDisplay5 + &quot;&lt;br \/&gt; &quot; + strValue5;\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"314\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Show-Selected-Value2.gif?resize=1200%2C314&#038;ssl=1\" alt=\"Workflow Decoration: Search Select Value as Note\" class=\"wp-image-97725\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Check-All\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Check All<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Target: Checkbox SELECT form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=&quot;section group&quot;&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;0&quot;&gt;&lt;div class=&quot;option&quot; data-item-index=&quot;0&quot;&gt;\n&lt;input type=&quot;checkbox&quot; id=&quot;field-1_6-0&quot; name=&quot;data[6].selects&quot; value=&quot;CAN&quot;&gt;\n&lt;label for=&quot;field-1_6-0&quot;&gt;Canada&lt;\/label&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;1&quot;&gt;&lt;div class=&quot;option&quot; data-item-index=&quot;1&quot;&gt;\n&lt;input type=&quot;checkbox&quot; id=&quot;field-1_6-1&quot; name=&quot;data[6].selects&quot; value=&quot;FRA&quot;&gt;\n&lt;label for=&quot;field-1_6-1&quot;&gt;France&lt;\/label&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;2&quot;&gt;&lt;div class=&quot;option&quot; data-item-index=&quot;2&quot;&gt;\n&lt;input type=&quot;checkbox&quot; id=&quot;field-1_6-2&quot; name=&quot;data[6].selects&quot; value=&quot;DEU&quot;&gt;\n&lt;label for=&quot;field-1_6-2&quot;&gt;Germany&lt;\/label&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;3&quot;&gt;&lt;div class=&quot;option&quot; data-item-index=&quot;3&quot;&gt;\n&lt;input type=&quot;checkbox&quot; id=&quot;field-1_6-3&quot; name=&quot;data[6].selects&quot; value=&quot;ITA&quot;&gt;\n&lt;label for=&quot;field-1_6-3&quot;&gt;Italy&lt;\/label&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div class=&quot;section group&quot;&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;4&quot;&gt;&lt;div class=&quot;option&quot; data-item-index=&quot;4&quot;&gt;\n&lt;input type=&quot;checkbox&quot; id=&quot;field-1_6-4&quot; name=&quot;data[6].selects&quot; value=&quot;JPN&quot;&gt;\n&lt;label for=&quot;field-1_6-4&quot;&gt;Japan&lt;\/label&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;5&quot;&gt;&lt;div class=&quot;option&quot; data-item-index=&quot;5&quot;&gt;\n&lt;input type=&quot;checkbox&quot; id=&quot;field-1_6-5&quot; name=&quot;data[6].selects&quot; value=&quot;GBR&quot;&gt;\n&lt;label for=&quot;field-1_6-5&quot;&gt;United Kingdom&lt;\/label&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;6&quot;&gt;&lt;div class=&quot;option&quot; data-item-index=&quot;6&quot;&gt;\n&lt;input type=&quot;checkbox&quot; id=&quot;field-1_6-6&quot; name=&quot;data[6].selects&quot; value=&quot;USA&quot;&gt;\n&lt;label for=&quot;field-1_6-6&quot;&gt;United States&lt;\/label&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;div class=&quot;col span_1_of_4&quot; data-cell-index=&quot;7&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"check_all_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div style=&quot;text-align:right&quot;&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_checkAll6()&quot; style=&quot;margin: 0px 10px;&quot;&gt;Check All&lt;\/button&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_uncheckAll6()&quot; style=&quot;margin: 0px 10px;&quot;&gt;Uncheck All&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nfunction user_checkAll6(){\n  const elCheckboxes6 = document.querySelectorAll(&#39;input[name=&quot;data\\\\[6\\\\].selects&quot;]&#39;);\n  for(let i = 0; i &lt; elCheckboxes6.length; i++) {\n    elCheckboxes6[i].checked = true;\n  }\n}\nfunction user_uncheckAll6(){\n  const elCheckboxes6 = document.querySelectorAll(&#39;input[name=&quot;data\\\\[6\\\\].selects&quot;]&#39;);\n  for(let i = 0; i &lt; elCheckboxes6.length; i++) {\n    elCheckboxes6[i].checked = false;\n  }\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"220\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Check-All.gif?resize=1200%2C220&#038;ssl=1\" alt=\"\" class=\"wp-image-97734\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Count-Days\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Count Days<\/mark><\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-background has-small-font-size wp-block-paragraph\" style=\"background-color:#ffff66\">v14.1\u4ee5\u964d\u3067\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: YYYY-MM-DD DATE form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input id=&quot;ext-gen1031-inputEl&quot; type=&quot;text&quot; role=&quot;textbox&quot; size=&quot;1&quot; name=&quot;data[7].input&quot; placeholder=&quot;YYYY-MM-DD&quot;\n class=&quot;x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus&quot; autocomplete=&quot;off&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: span<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;span style=&quot;color:#0000aa;&quot; id=&quot;user_spanResult7&quot;&gt; (waiting)&lt;\/span&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"count_days_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div style=&quot;text-align:right&quot;&gt;\n&lt;span style=&quot;color:#0000aa;&quot; id=&quot;user_spanResult7&quot;&gt; (waiting)&lt;\/span&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_countDays7()&quot; style=&quot;margin: 0px 10px;&quot;&gt; &lt;&lt; Count Days&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nfunction user_countDays7(e) {\n  if( document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;).value === &quot;&quot; ) return;\n  const strDatetime7 =\n          document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;).value + &quot; 23:59&quot;;\n  const date7   = user_toJsDate( strDatetime7 );\n  const dateNow = new Date();\n  let numDuration = date7.getTime() - dateNow.getTime();\n  let numDays     = numDuration \/1000 \/60 \/60 \/24;\n  let numHours    = numDuration \/1000 \/60 \/60;\n  let strStyle    = &quot;&quot;;\n  let strMessage  = &quot;&quot;;\n  if( numDays &gt; 365 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;10px dotted #A55B9A&quot;;\n  }else if( numDays &gt; 30 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;7px dotted #5D5099&quot;;\n  }else if( numDays &gt; 7 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;4px dotted #4784BF&quot;;\n  }else if( numDays &gt; 1 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;2px dotted #00AEE0&quot;;\n  }else if( numDays &gt; 0 ){\n    strMessage  = &quot;&lt;strong&gt;&quot; + Math.floor( numHours ) + &quot; hours&lt;\/strong&gt; from now&quot;;\n    strStyle    = &quot;2px dotted #00AEE0&quot;;\n  }else if( -365 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;10px double #DE6641&quot;;\n  }else if( -30 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;7px double #E8AC51&quot;;\n  }else if( -7 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;4px double #F2E55C&quot;;\n  }else if( -1 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;2px double #F2E55C&quot;;\n  }else{\n    strMessage  = &quot;&lt;strong&gt;&quot; + Math.floor( -numHours ) + &quot; hours&lt;\/strong&gt; ago&quot;;\n    strStyle    = &quot;2px double #F2E55C&quot;;\n  }\n  document.querySelector(&#39;#user_spanResult7&#39;).style.borderBottom = strStyle;\n  document.querySelector(&#39;#user_spanResult7&#39;).innerHTML = strMessage;\n}\nfunction user_toJsDate( bpmsDateOrDatetimeStr ){\n  \/\/ BPMS Date:     &quot;2020-04-01&quot;  (subtype &quot;Y\/M&quot; &quot;M\/D&quot; &quot;Y&quot;, not supported)\n  \/\/ BPMS Datetime: &quot;2020-04-01 23:59&quot;\n  let year       = 0;\n  let monthIndex = 0;\n  let day        = 0;\n  let hours      = 0;\n  let minutes    = 0;\n  \/\/  The ECMA\/JavaScript Date object has a large number of methods.\n  \/\/ &quot;Date.parse&quot; is danger (strongly discouraged)\n  \/\/ - new Date(&quot;2014-11-10&quot;) \/\/ Mon Nov 10 2014 09:00:00 GMT+0900 (JST)\n  \/\/ - new Date(2014, 10, 10) \/\/ Mon Nov 10 2014 00:00:00 GMT+0900 (JST)\n  let arrDatetime = bpmsDateOrDatetimeStr.split(&quot; &quot;);\n  if( arrDatetime.length === 1 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n  }\n  if( arrDatetime.length === 2 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    let arrTimeParts = arrDatetime[1].split(&quot;:&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n    hours      = parseInt(arrTimeParts[0], 10);\n    minutes    = parseInt(arrTimeParts[1], 10);\n  }\n  return new Date( year, monthIndex, day, hours, minutes );\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"250\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Count-Days.gif?resize=1200%2C250&#038;ssl=1\" alt=\"Workflow Decoration: Count Days\" class=\"wp-image-97785\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Check Future<\/mark><\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-background has-small-font-size wp-block-paragraph\" style=\"background-color:#ffff66\">v14.1\u4ee5\u964d\u3067\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: DATETIME form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input id=&quot;ext-gen1069-inputEl&quot; type=&quot;text&quot; role=&quot;textbox&quot; size=&quot;1&quot; name=&quot;data[11].input&quot; placeholder=&quot;YYYY-MM-DD&quot;\n class=&quot;x-form-field x-form-empty-field x-form-text&quot; autocomplete=&quot;off&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;\n\n&lt;input id=&quot;ext-gen1070-inputEl&quot; type=&quot;text&quot; role=&quot;combobox&quot; class=&quot;x-form-field x-form-text x-form-focus x-field-form-focus\n x-field-default-form-focus&quot; autocomplete=&quot;off&quot; name=&quot;data[11].time&quot; placeholder=&quot;HH:MM&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: span<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;span style=&quot;color:#0000aa;&quot; id=&quot;user_spanResult11&quot;&gt; (waiting)&lt;\/span&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"check_future_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div style=&quot;text-align:right&quot;&gt;\n&lt;span style=&quot;color:#0000aa;&quot; id=&quot;user_spanResult11&quot;&gt; (waiting)&lt;\/span&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_showDays11()&quot; style=&quot;margin: 0px 10px;&quot;&gt; &lt;&lt; Show Days&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nfunction user_showDays11(e) {\n  if( document.querySelector(&#39;input[name=&quot;data\\\\[11\\\\].input&quot;]&#39;).value === &quot;&quot; ) return;\n  if( document.querySelector(&#39;input[name=&quot;data\\\\[11\\\\].time&quot;]&#39;).value === &quot;&quot; ) return;\n  const strDatetime11 =\n          document.querySelector(&#39;input[name=&quot;data\\\\[11\\\\].input&quot;]&#39;).value + &quot; &quot; +\n          document.querySelector(&#39;input[name=&quot;data\\\\[11\\\\].time&quot;]&#39;).value;\n  const date11  = user_toJsDate( strDatetime11 );\n  const dateNow = new Date();\n  let numDuration = date11.getTime() - dateNow.getTime();\n  let numDays     = numDuration \/1000 \/60 \/60 \/24;\n  let numHours    = numDuration \/1000 \/60 \/60;\n  let strStyle    = &quot;&quot;;\n  let strMessage  = &quot;&quot;;\n  if( numDays &gt; 365 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;10px dotted #A55B9A&quot;;\n  }else if( numDays &gt; 30 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;7px dotted #5D5099&quot;;\n  }else if( numDays &gt; 7 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;4px dotted #4784BF&quot;;\n  }else if( numDays &gt; 1 ){\n    strMessage  = Math.floor( numDays ) + &quot; days from now&quot;;\n    strStyle    = &quot;2px dotted #00AEE0&quot;;\n  }else if( numDays &gt; 0 ){\n    strMessage  = &quot;&lt;strong&gt;&quot; + Math.floor( numHours ) + &quot; hours&lt;\/strong&gt; from now&quot;;\n    strStyle    = &quot;2px dotted #00AEE0&quot;;\n  }else if( -365 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;10px double #DE6641&quot;;\n  }else if( -30 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;7px double #E8AC51&quot;;\n  }else if( -7 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;4px double #F2E55C&quot;;\n  }else if( -1 &gt; numDays ){\n    strMessage  = Math.floor( -numDays ) + &quot; days ago&quot;;\n    strStyle    = &quot;2px double #F2E55C&quot;;\n  }else{\n    strMessage  = &quot;&lt;strong&gt;&quot; + Math.floor( -numHours ) + &quot; hours&lt;\/strong&gt; ago&quot;;\n    strStyle    = &quot;2px double #F2E55C&quot;;\n  }\n  document.querySelector(&#39;#user_spanResult11&#39;).style.borderBottom = strStyle;\n  document.querySelector(&#39;#user_spanResult11&#39;).innerHTML = strMessage;\n}\nfunction user_toJsDate( bpmsDateOrDatetimeStr ){\n  \/\/ BPMS Date:     &quot;2020-04-01&quot;  (subtype &quot;Y\/M&quot; &quot;M\/D&quot; &quot;Y&quot;, not supported)\n  \/\/ BPMS Datetime: &quot;2020-04-01 23:59&quot;\n  let year       = 0;\n  let monthIndex = 0;\n  let day        = 0;\n  let hours      = 0;\n  let minutes    = 0;\n  \/\/  The ECMA\/JavaScript Date object has a large number of methods.\n  \/\/ &quot;Date.parse&quot; is danger (strongly discouraged)\n  \/\/ - new Date(&quot;2014-11-10&quot;) \/\/ Mon Nov 10 2014 09:00:00 GMT+0900 (JST)\n  \/\/ - new Date(2014, 10, 10) \/\/ Mon Nov 10 2014 00:00:00 GMT+0900 (JST)\n  let arrDatetime = bpmsDateOrDatetimeStr.split(&quot; &quot;);\n  if( arrDatetime.length === 1 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n  }\n  if( arrDatetime.length === 2 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    let arrTimeParts = arrDatetime[1].split(&quot;:&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n    hours      = parseInt(arrTimeParts[0], 10);\n    minutes    = parseInt(arrTimeParts[1], 10);\n  }\n  return new Date( year, monthIndex, day, hours, minutes );\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"250\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Check-Future.gif?resize=1200%2C250&#038;ssl=1\" alt=\"Workflow Decoration: Check Future at Datetime form\" class=\"wp-image-97788\" title=\"\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Add Date<\/mark><\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-background has-small-font-size wp-block-paragraph\" style=\"background-color:#ffff66\">v14.1\u4ee5\u964d\u3067\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Target: YYYY-MM-DD DATE form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input id=&quot;ext-gen1031-inputEl&quot; type=&quot;text&quot; role=&quot;textbox&quot; size=&quot;1&quot; name=&quot;data[7].input&quot; placeholder=&quot;YYYY-MM-DD&quot;\n class=&quot;x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus&quot; autocomplete=&quot;off&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"add_date_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>2020-01-01 +1m \u2192 2020-02-01&lt;br \/&gt;\n2020-01-31 +1m \u2192 2020-03-02&lt;br \/&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;+1y&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;+1m&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;+7d&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;+1d&lt;\/button&gt; - \n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;-1y&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;-1m&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;-7d&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddDate7(this)&#39;&gt;-1d&lt;\/button&gt;\n&lt;script&gt;\nfunction user_btnAddDate7(elBtn) {\n  let elTarget = document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;);\n  if( elTarget.value === &quot;&quot; ) return;\n  const strOriginal = elTarget.value;\n  const strClicked  = elBtn.textContent;\n  const numClicked  = parseFloat( strClicked );\n  const strLast     = strClicked.slice( -1 ); \/\/ y:year, m:month, d:day\n  let dateNew = user_toJsDate( strOriginal );\n  if( strLast == &quot;y&quot; ){\n    dateNew.setFullYear( dateNew.getFullYear() + numClicked );\n  }else if( strLast == &quot;m&quot; ){\n    dateNew.setMonth( dateNew.getMonth() + numClicked );\n  }else if( strLast == &quot;d&quot; ){\n    dateNew.setDate( dateNew.getDate() + numClicked );\n  }\n  elTarget.value = dateNew.toISOString().slice(0,10);\n}\nfunction user_toJsDate( bpmsDateOrDatetimeStr ){\n  \/\/ BPMS Date:     &quot;2020-04-01&quot;  (subtype &quot;Y\/M&quot; &quot;M\/D&quot; &quot;Y&quot;, not supported)\n  \/\/ BPMS Datetime: &quot;2020-04-01 23:59&quot;\n  let year       = 0;\n  let monthIndex = 0;\n  let day        = 0;\n  let hours      = 0;\n  let minutes    = 0;\n  \/\/  The ECMA\/JavaScript Date object has a large number of methods.\n  \/\/ &quot;Date.parse&quot; is danger (strongly discouraged)\n  \/\/ - new Date(&quot;2014-11-10&quot;) \/\/ Mon Nov 10 2014 09:00:00 GMT+0900 (JST)\n  \/\/ - new Date(2014, 10, 10) \/\/ Mon Nov 10 2014 00:00:00 GMT+0900 (JST)\n  let arrDatetime = bpmsDateOrDatetimeStr.split(&quot; &quot;);\n  if( arrDatetime.length === 1 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n  }\n  if( arrDatetime.length === 2 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    let arrTimeParts = arrDatetime[1].split(&quot;:&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n    hours      = parseInt(arrTimeParts[0], 10);\n    minutes    = parseInt(arrTimeParts[1], 10);\n  }\n  return new Date( year, monthIndex, day, hours, minutes );\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"250\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Add-Date.gif?resize=1200%2C250&#038;ssl=1\" alt=\"Workflow Decoration: Add Date\" class=\"wp-image-97804\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Set Time<\/mark><\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-background has-small-font-size wp-block-paragraph\" style=\"background-color:#ffff66\">v14.1\u4ee5\u964d\u3067\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Target: DATETIME form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input id=&quot;ext-gen1069-inputEl&quot; type=&quot;text&quot; role=&quot;textbox&quot; size=&quot;1&quot; name=&quot;data[11].input&quot; placeholder=&quot;YYYY-MM-DD&quot;\n class=&quot;x-form-field x-form-empty-field x-form-text&quot; autocomplete=&quot;off&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;\n\n&lt;input id=&quot;ext-gen1070-inputEl&quot; type=&quot;text&quot; role=&quot;combobox&quot; class=&quot;x-form-field x-form-text x-form-focus x-field-form-focus\n x-field-default-form-focus&quot; autocomplete=&quot;off&quot; name=&quot;data[11].time&quot; placeholder=&quot;HH:MM&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"set_time_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&#39;button&#39; onclick=&#39;user_btnSetTime11(this)&#39;&gt;09:00&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnSetTime11(this)&#39;&gt;09:30&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnSetTime11(this)&#39;&gt;10:00&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnSetTime11(this)&#39;&gt;13:00&lt;\/button&gt;&lt;br \/&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddTime11(this)&#39;&gt;+60&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddTime11(this)&#39;&gt;+10&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddTime11(this)&#39;&gt;+1&lt;\/button&gt;,\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddTime11(this)&#39;&gt;-1&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddTime11(this)&#39;&gt;-10&lt;\/button&gt;\n&lt;button type=&#39;button&#39; onclick=&#39;user_btnAddTime11(this)&#39;&gt;-60&lt;\/button&gt;\n&lt;script&gt;\nfunction user_btnSetTime11(elBtn) {\n  const elTime   = document.querySelector(&#39;input[name=&quot;data\\\\[11\\\\].time&quot;]&#39;);\n  elTime.value = elBtn.textContent;\n}\nfunction user_btnAddTime11(elBtn) {\n  const elDate = document.querySelector(&#39;input[name=&quot;data\\\\[11\\\\].input&quot;]&#39;);\n  const elTime = document.querySelector(&#39;input[name=&quot;data\\\\[11\\\\].time&quot;]&#39;);\n  if( elDate.value === &quot;&quot; ) return;\n  if( elTime.value === &quot;&quot; ) return;\n  const strOriginal = elDate.value + &quot; &quot; + elTime.value;\n  const strClicked  = elBtn.textContent;\n  const numClicked  = parseFloat( strClicked );\n  let dateOriginal  = user_toJsDate( strOriginal );\n  let dateUpdated   = new Date( dateOriginal.getTime() + (numClicked * 60000) );\n  elDate.value = dateUpdated.toISOString().slice(0,10);\n  elTime.value = dateUpdated.toISOString().slice(11,16);\n}\nfunction user_toJsDate( bpmsDateOrDatetimeStr ){\n  \/\/ BPMS Date:     &quot;2020-04-01&quot;  (subtype &quot;Y\/M&quot; &quot;M\/D&quot; &quot;Y&quot;, not supported)\n  \/\/ BPMS Datetime: &quot;2020-04-01 23:59&quot;\n  let year       = 0;\n  let monthIndex = 0;\n  let day        = 0;\n  let hours      = 0;\n  let minutes    = 0;\n  \/\/  The ECMA\/JavaScript Date object has a large number of methods.\n  \/\/ &quot;Date.parse&quot; is danger (strongly discouraged)\n  \/\/ - new Date(&quot;2014-11-10&quot;) \/\/ Mon Nov 10 2014 09:00:00 GMT+0900 (JST)\n  \/\/ - new Date(2014, 10, 10) \/\/ Mon Nov 10 2014 00:00:00 GMT+0900 (JST)\n  let arrDatetime = bpmsDateOrDatetimeStr.split(&quot; &quot;);\n  if( arrDatetime.length === 1 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n  }\n  if( arrDatetime.length === 2 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    let arrTimeParts = arrDatetime[1].split(&quot;:&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n    hours      = parseInt(arrTimeParts[0], 10);\n    minutes    = parseInt(arrTimeParts[1], 10);\n  }\n  return new Date( year, monthIndex, day, hours, minutes );\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"210\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Set-Time.gif?resize=1200%2C210&#038;ssl=1\" alt=\"Workflow Decoration: Set Time\" class=\"wp-image-97812\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Quote Readonly<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: STRING form (read only)<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div id=&quot;readonly_0&quot; class=&quot;fit&quot;&gt;\n&lt;div class=&quot;auto-link&quot; id=&quot;ext-gen1031&quot;&gt;I forgot my password.&lt;br&gt;\nWhat should I do?&lt;br&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: Multiline STRING form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;textarea name=&quot;data[1].input&quot; rows=&quot;5&quot; placeholder=&quot;&quot; style=&quot;resize: both;&quot; class=&quot;fit&quot;&gt;&lt;\/textarea&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"QuoteReadonly_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&quot;button&quot; onclick=&quot;user_quote0to1()&quot;&gt; Quote from String0 INQUERY &lt;\/button&gt;\n&lt;script&gt;\nfunction user_quote0to1() {\n  const elReferrer = document.querySelector(&#39;#readonly_0&#39;);\n  const elTarget   = document.querySelector(&#39;textarea[name=&quot;data\\\\[1\\\\].input&quot;]&#39;);\n\n  let strResult = &quot;&quot;;\n  let arrTmp = elReferrer.innerText.split(&quot;\\n&quot;);\n  for( let i = 0; i &lt; arrTmp.length; i++ ){\n    if( i !== (arrTmp.length - 1) || arrTmp[i] !== &quot;&quot; ){\n      strResult += &quot;&gt; &quot; + arrTmp[i] + &quot;\\n&quot;;\n    }\n  }\n  elTarget.value = strResult;\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"501\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Quote-Readonly.gif?resize=1200%2C501&#038;ssl=1\" alt=\"Workflow Decoration: Quote Read Only\" class=\"wp-image-98013\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Local Date String<\/mark><\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-background has-small-font-size wp-block-paragraph\" style=\"background-color:#ffff66\">v14.1\u4ee5\u964d\u3067\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: YYYY-MM-DD DATE form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input id=&quot;ext-gen1031-inputEl&quot; type=&quot;text&quot; role=&quot;textbox&quot; size=&quot;1&quot; name=&quot;data[7].input&quot; placeholder=&quot;YYYY-MM-DD&quot;\n class=&quot;x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus&quot; autocomplete=&quot;off&quot; data-errorqtip=&quot;&quot; style=&quot;width: 100%;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Target: STRING form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;text&quot; name=&quot;data[19].input&quot; class=&quot;fit&quot; value=&quot;hello world&quot; placeholder=&quot;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"Local_Date_String_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div style=&quot;text-align:right&quot;&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_convert7enUS19()&quot; style=&quot;margin: 0px 10px;&quot;&gt; \u2193 en-US &lt;\/button&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_convert7enUSLA19()&quot; style=&quot;margin: 0px 10px;&quot;&gt; \u2193 en-US2 &lt;\/button&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_convert7enGB19()&quot; style=&quot;margin: 0px 10px;&quot;&gt; \u2193 en-GB &lt;\/button&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_convert7enGBUTC19()&quot; style=&quot;margin: 0px 10px;&quot;&gt; \u2193 en-GB2 &lt;\/button&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_convert7jaJP19()&quot; style=&quot;margin: 0px 10px;&quot;&gt; \u2193 ja-JP &lt;\/button&gt;\n&lt;button type=&quot;button&quot; onclick=&quot;user_convert7jaJPw19()&quot; style=&quot;margin: 0px 10px;&quot;&gt; \u2193 ja-JP2 &lt;\/button&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nfunction user_convert7enUS19() {\n  const elReferrer   = document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;);\n  const elTarget     = document.querySelector(&#39;input[name=&quot;data\\\\[19\\\\].input&quot;]&#39;);\n  const strReferrer  = elReferrer.value;\n  if( strReferrer === &quot;&quot; ) return;\n  const dateReferrer = user_toJsDate( strReferrer );\n  let options    = { year: &#39;numeric&#39;, month: &#39;long&#39;, day: &#39;numeric&#39;, weekday: &#39;long&#39;,\n                     timeZoneName: &#39;short&#39; };\n  let strResult  = new Intl.DateTimeFormat( &#39;en-US&#39;, options ).format( dateReferrer );\n  elTarget.value = strResult;\n}\nfunction user_convert7enUSLA19() {\n  const elReferrer   = document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;);\n  const elTarget     = document.querySelector(&#39;input[name=&quot;data\\\\[19\\\\].input&quot;]&#39;);\n  const strReferrer  = elReferrer.value;\n  if( strReferrer === &quot;&quot; ) return;\n  const dateReferrer = user_toJsDate( strReferrer );\n  let options    = { year: &#39;numeric&#39;, month: &#39;long&#39;, day: &#39;numeric&#39;, weekday: &#39;long&#39;,\n                     timeZone: &#39;America\/Los_Angeles&#39;, timeZoneName: &#39;long&#39; };\n  let strResult  = new Intl.DateTimeFormat( &#39;en-US&#39;, options ).format( dateReferrer );\n  elTarget.value = strResult;\n}\nfunction user_convert7enGB19() {\n  const elReferrer   = document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;);\n  const elTarget     = document.querySelector(&#39;input[name=&quot;data\\\\[19\\\\].input&quot;]&#39;);\n  const strReferrer  = elReferrer.value;\n  if( strReferrer === &quot;&quot; ) return;\n  const dateReferrer = user_toJsDate( strReferrer );\n  let options    = { year: &#39;numeric&#39;, month: &#39;long&#39;, day: &#39;numeric&#39;, \n                     timeZoneName: &#39;short&#39; };\n  let strResult  = new Intl.DateTimeFormat( &#39;en-GB&#39;, options ).format( dateReferrer );\n  elTarget.value = strResult;\n}\nfunction user_convert7enGBUTC19() {\n  const elReferrer   = document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;);\n  const elTarget     = document.querySelector(&#39;input[name=&quot;data\\\\[19\\\\].input&quot;]&#39;);\n  const strReferrer  = elReferrer.value;\n  if( strReferrer === &quot;&quot; ) return;\n  const dateReferrer = user_toJsDate( strReferrer );\n  let options    = { year: &#39;numeric&#39;, month: &#39;long&#39;, day: &#39;numeric&#39;, \n                     timeZone: &#39;UTC&#39;, timeZoneName: &#39;long&#39; };\n  let strResult  = new Intl.DateTimeFormat( &#39;en-GB&#39;, options ).format( dateReferrer );\n  elTarget.value = strResult;\n}\nfunction user_convert7jaJP19() {\n  const elReferrer   = document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;);\n  const elTarget     = document.querySelector(&#39;input[name=&quot;data\\\\[19\\\\].input&quot;]&#39;);\n  const strReferrer  = elReferrer.value;\n  if( strReferrer === &quot;&quot; ) return;\n  const dateReferrer = user_toJsDate( strReferrer );\n  let options    = { era: &#39;long&#39;, year: &#39;numeric&#39;, month: &#39;long&#39;, day: &#39;numeric&#39; };\n  let strResult  = new Intl.DateTimeFormat( &#39;ja-JP-u-ca-japanese&#39;, options ).format( dateReferrer );\n  \/\/ BCP 47 extension tag. JavaScript internationalization functions use the &quot;u&quot; (Unicode) extension.\n  \/\/ for use Japanese Era (\u548c\u66a6\/\u7687\u6b74). Unicode locale, key:ca (calendar), type:japanese\n  \/\/ https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Intl\n  elTarget.value = strResult;\n}\nfunction user_convert7jaJPw19() {\n  const elReferrer   = document.querySelector(&#39;input[name=&quot;data\\\\[7\\\\].input&quot;]&#39;);\n  const elTarget     = document.querySelector(&#39;input[name=&quot;data\\\\[19\\\\].input&quot;]&#39;);\n  const strReferrer  = elReferrer.value;\n  if( strReferrer === &quot;&quot; ) return;\n  const dateReferrer = user_toJsDate( strReferrer );\n  let options    = { era: &#39;long&#39;, year: &#39;numeric&#39;, month: &#39;long&#39;, day: &#39;numeric&#39;, weekday: &#39;short&#39; };\n  let strResult  = new Intl.DateTimeFormat( &#39;ja-JP-u-ca-japanese&#39;, options ).format( dateReferrer );\n  elTarget.value = strResult;\n}\nfunction user_toJsDate( bpmsDateOrDatetimeStr ){\n  \/\/ BPMS Date:     &quot;2020-04-01&quot;  (subtype &quot;Y\/M&quot; &quot;M\/D&quot; &quot;Y&quot;, not supported)\n  \/\/ BPMS Datetime: &quot;2020-04-01 23:59&quot;\n  let year       = 0;\n  let monthIndex = 0;\n  let day        = 0;\n  let hours      = 0;\n  let minutes    = 0;\n  \/\/  The ECMA\/JavaScript Date object has a large number of methods.\n  \/\/ &quot;Date.parse&quot; is danger (strongly discouraged)\n  \/\/ - new Date(&quot;2014-11-10&quot;) \/\/ Mon Nov 10 2014 09:00:00 GMT+0900 (JST)\n  \/\/ - new Date(2014, 10, 10) \/\/ Mon Nov 10 2014 00:00:00 GMT+0900 (JST)\n  let arrDatetime = bpmsDateOrDatetimeStr.split(&quot; &quot;);\n  if( arrDatetime.length === 1 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n  }\n  if( arrDatetime.length === 2 ){\n    let arrDateParts = arrDatetime[0].split(&quot;-&quot;);\n    let arrTimeParts = arrDatetime[1].split(&quot;:&quot;);\n    year       = parseInt(arrDateParts[0], 10);\n    monthIndex = parseInt(arrDateParts[1], 10) - 1;\n    day        = parseInt(arrDateParts[2], 10);\n    hours      = parseInt(arrTimeParts[0], 10);\n    minutes    = parseInt(arrTimeParts[1], 10);\n  }\n  return new Date( year, monthIndex, day, hours, minutes );\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"331\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Local-Date-String.gif?resize=1200%2C331&#038;ssl=1\" alt=\"Workflow Decoration: Convert Date to LocalDateString\" class=\"wp-image-97833\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Count Files<\/mark><\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-background has-small-font-size wp-block-paragraph\" style=\"background-color:#ffff66\">v14.0\u4ee5\u964d\u3067\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: FILES form (attached)<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=&quot;column column-1 &quot; data-pdd-number=&quot;0&quot;&gt;\n  . . .\n  &lt;a href=&quot;\/PE\/Workitem\/File\/download?id=47100220&processDataInstanceId=47100177&quot;\n    title=&quot;Download&quot; target=&quot;download&quot; class=&quot;button icon notext&quot;&gt;&lt;span class=&quot;download&quot;&gt;download:&lt;\/span&gt;&lt;\/a&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"count_files_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&quot;button&quot; onclick=&quot;user_countFiles0()&quot;&gt; Count Files &lt;\/button&gt;&lt;div id=&quot;user_divResult0&quot;&gt;(waiting)&lt;\/div&gt;\n&lt;script&gt;\nfunction user_countFiles0() {\n  const elDivFilesArea = document.querySelector(&quot;div[data-pdd-number=&#39;0&#39;]&quot;);\n  if ( elDivFilesArea === null ){\n    document.querySelector(&#39;#user_divResult0&#39;).innerHTML = &quot;Decoration Setting Error: not file type&quot;;\n    throw new Error(&#39;Decoration Setting Error: not file type&#39;);\n  }\n  const elList = elDivFilesArea.querySelectorAll(&#39;input[name=&quot;data\\[0\\].selects&quot;]:checked&#39;);\n  document.querySelector(&#39;#user_divResult0&#39;).innerHTML = &quot;Number of files to be posted: &quot; + elList.length;\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"220\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/03\/decoration-examples-Count-Files.gif?resize=1200%2C220&#038;ssl=1\" alt=\"Workflow Decoration: Counts the number of attachments. Only checked files are counted. It is coded in vanilla Javascript.\" class=\"wp-image-104593\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Unzip Files<\/mark><\/h2>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-background has-small-font-size wp-block-paragraph\" style=\"background-color:#ffff66\">v14.0\u4ee5\u964d\u3067\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: FILES form (attached)<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=&quot;column column-1 &quot; data-pdd-number=&quot;0&quot;&gt;\n  . . .\n  &lt;a href=&quot;\/PE\/Workitem\/File\/download?id=47100220&processDataInstanceId=47100177&quot;\n    title=&quot;Download&quot; target=&quot;download&quot; class=&quot;button icon notext&quot;&gt;&lt;span class=&quot;download&quot;&gt;download:&lt;\/span&gt;&lt;\/a&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"Unzip_Files_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&quot;button&quot; onclick=&quot;user_unzipFirstFile0()&quot;&gt; Unzip First File &lt;\/button&gt;&lt;div id=&quot;user_divResult0&quot;&gt;(waiting)&lt;\/div&gt;\n&lt;style type=&quot;text\/css&quot;&gt;\na.dlbtn {\n  border: 1px solid #000;\n  border-radius: 0;\n  background: #fff;\n  margin: 0.5em;\n  font-weight: 700;\n}\na.dlbtn:hover {\n  color: #fff;\n  background: #000;\n}\n&lt;\/style&gt;\n&lt;script&gt;\nfunction user_unzipFirstFile0() {\n  const elDivFilesArea = document.querySelector(&quot;div[data-pdd-number=&#39;0&#39;]&quot;);\n  if ( elDivFilesArea === null ){\n    document.querySelector(&#39;#user_divResult0&#39;).innerHTML = &quot;Decoration Setting Error: not file type&quot;;\n    throw new Error(&#39;Decoration Setting Error: not file type&#39;);\n  }\n  const elList = elDivFilesArea.querySelectorAll(&#39;input[name=&quot;data\\[0\\].selects&quot;]:checked&#39;);\n  if ( elList.length === 0 ){\n    document.querySelector(&#39;#user_divResult0&#39;).innerHTML = &quot;No file selected&quot;;\n    throw new Error(&#39;No file selected&#39;);\n  }\n  const elFirst = elList[0];\n  const elClosest  = elFirst.closest(&quot;div.process-data-file&quot;);\n  const elDownload = elClosest.querySelector(&quot;a[title=&#39;Download&#39;]&quot;);\n  console.log( &quot;Download Uri &quot; + elDownload.href );\n\n  let arrStrFilenames = [];\n  let arrBlobFiles = [];\n  \/\/ js-dynamic-loading\n  user_getScript(&#39;https:\/\/cdn.jsdelivr.net\/npm\/zlibjs@0.3.1\/bin\/unzip.min.js&#39;, function () {\n    fetch( elDownload.href )\n    .then( response =&gt; {\n      if ( !response.ok ) {\n        document.querySelector(&#39;#user_divResult0&#39;).innerHTML += &quot; Network response was not ok&quot;;\n        throw new Error(&#39;Network response was not ok&#39;);\n      }\n      return response.arrayBuffer();\n    })\n    .then( buf =&gt; {\n      console.log( &quot;ArrayBuffer byteLength: &quot; + buf.byteLength );\n      let byteArray = new Uint8Array( buf );\n      \/\/ https:\/\/github.com\/imaya\/zlib.js\/blob\/develop\/README.md#pkzip-1\n      \/\/ https:\/\/github.com\/imaya\/zlib.js\/blob\/develop\/README.en.md#pkzip-1\n      let unzip = new Zlib.Unzip( byteArray );\n      let filenames = unzip.getFilenames();\n      console.log( &quot;File and Directory: &quot; + filenames.length );\n      for( let i = 0; i &lt; filenames.length; i++ ){\n        if ( filenames[i].slice(-1) === &quot;\/&quot; ) { continue; } \/\/ directory\n        arrStrFilenames.push( filenames[i] );\n        let blob = new Blob([unzip.decompress(filenames[i])],{type: &quot;octet\/stream&quot;});\n        arrBlobFiles.push( blob );\n        console.log( &quot;File: &quot; + filenames[i] + &quot; &quot; + blob.size );\n      }\n\n      document.querySelector(&#39;#user_divResult0&#39;).innerHTML = &quot;Downloadable Files: &quot; +\n                                                        arrStrFilenames.length + &quot;&lt;br \/&gt;&quot;;\n      for( let i = 0; i &lt; arrStrFilenames.length; i++ ){\n        \/\/ a href=xx download=yy \n        const newAtagBtn = document.createElement(&quot;a&quot;);\n        const fileurl = URL.createObjectURL( arrBlobFiles[i] );\n        newAtagBtn.innerHTML = &quot;\u2193&quot;;\n        newAtagBtn.href = fileurl;\n        newAtagBtn.download = arrStrFilenames[i].split(&#39;\/&#39;).pop();\n        newAtagBtn.classList.add(&#39;dlbtn&#39;);\n        document.querySelector(&#39;#user_divResult0&#39;).appendChild( newAtagBtn );\n        \/\/ span\n        const newSpan = document.createElement(&quot;span&quot;);\n        newSpan.innerHTML = arrStrFilenames[i] + &quot; (&quot; + arrBlobFiles[i].size + &quot; byte)&quot;;\n        document.querySelector(&#39;#user_divResult0&#39;).appendChild( newSpan );\n        \/\/ br\n        const newBr = document.createElement(&quot;br&quot;);\n        document.querySelector(&#39;#user_divResult0&#39;).appendChild( newBr );\n      }\n    })\n    .catch(error =&gt; {\n      console.error(&#39;There has been a problem with fetch operation: &#39;, error);\n      document.querySelector(&#39;#user_divResult0&#39;).innerHTML = &quot;ZIP file checked? (eg: .zip .pptx .qar ..)&quot;;\n    });\n  }); \/\/ endof js-dynamic-loading\n\n}\nfunction user_getScript(scriptUrl, callback) { \/\/ for dynamic-loading\n  const script = document.createElement(&#39;script&#39;);\n  script.src = scriptUrl;\n  script.onload = callback;\n  document.body.appendChild(script);\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"220\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/03\/decoration-examples-Unzip-Files.gif?resize=1200%2C220&#038;ssl=1\" alt=\"Workflow Decoration: Unzips the ZIP file in your browser. Only the first file of the checked files will be decompressed. You can download the specified file in the archive. It is coded in vanilla Javascript.\" class=\"wp-image-104595\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">QR Code Generation<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Referrer: Singleline STRING form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;text&quot; name=&quot;data[0].input&quot; class=&quot;fit&quot; value=&quot;&quot; placeholder=&quot;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"QRCodeGeneration_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button type=&quot;button&quot; onclick=&quot;user_encodeToQrcode0()&quot;&gt; QR-Code Generation &lt;\/button&gt;\n&lt;div id=&quot;user_divResult0&quot;&gt;(waiting)&lt;\/div&gt;\n&lt;script&gt;\nfunction user_encodeToQrcode0() {\n  const strInput0 = document.querySelector( &#39;input[name=&quot;data\\\\[0\\\\].input&quot;]&#39; ).value;\n  if ( strInput0 === &quot;&quot; ){\n    document.querySelector(&#39;#user_divResult0&#39;).innerHTML = &quot;No String&quot;;\n    throw new Error(&#39;No String&#39;);\n  }\n  \/\/ js-dynamic-loading\n  user_getScript(&#39;https:\/\/cdn.jsdelivr.net\/npm\/qrcode@1.4.4\/build\/qrcode.min.js&#39;,\n            &#39;sha256-DhdpoP64xch\/Frz8CiBQE12en55NX+RhlPGRg6KWm5s=&#39;, function () {\n    const opts = {\n      errorCorrectionLevel: &#39;H&#39;, \/\/ L, M, Q, H\n      type: &#39;image\/png&#39;,\n      width: 200,\n      quality: 0.3,\n      margin: 1,\n      color: {\n        dark:&quot;#000&quot;,\n        light:&quot;#FFF0&quot; \/\/ alpha channel (opacity) = 0\n      }\n    };\n    QRCode.toDataURL( strInput0, opts, function (err, url) {\n      if (err) throw err;\n      let strHtml = &#39;&lt;a href=&quot;&#39; + url + &#39;&quot; download=&quot;QR.png&quot;&gt;&#39;;\n          strHtml += &#39;&lt;img src=&quot;&#39; + url + &#39;&quot; alt=&quot;QR Code&quot; \/&gt;&lt;\/a&gt;&#39;;\n      document.querySelector(&#39;#user_divResult0&#39;).innerHTML = strHtml;\n    });\n\n  }); \/\/ endof js-dynamic-loading\n}\nfunction user_getScript(scriptUrl, integrity, callback) { \/\/ for dynamic-loading\n  const script = document.createElement(&#39;script&#39;);\n  script.src = scriptUrl;\n  \/\/ Subresource Integrity (SRI) is a security feature that enables browsers to verify that\n  \/\/ resources they fetch (for example, from a CDN) are delivered without unexpected manipulation.\n  \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Subresource_Integrity\n  script.integrity = integrity;\n  script.crossOrigin = &quot;anonymous&quot;; \/\/ note: property name is &quot;crossOrigin&quot;, not &quot;crossorigin&quot;\n  script.onload = callback;\n  document.body.appendChild(script);\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"331\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/04\/decoration-examples-qr-code.gif?resize=1200%2C331&#038;ssl=1\" alt=\"QR Code Generation, Workflow Execution in Questetra BPM Suite\" class=\"wp-image-105955\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">Tokenize<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Target: STRING form<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;input type=&quot;text&quot; name=&quot;data[21].input&quot; class=&quot;fit&quot; value=&quot;&quot; placeholder=&quot;&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"Tokenize_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;style&gt;\nbutton#user_stripeTokenization {\n  background: #666EE8;\n  color: white;\n  border-radius: 4px;\n  font-size: 13px;\n  margin: 6px;\n}\nbutton#user_stripeTokenization:focus {\n  background: #555ABF;\n}\nbutton#user_stripeTokenization:active {\n  background: #43458B;\n}\n.StripeElement {\n  box-sizing: border-box;\n  height: 40px;\n  padding: 10px 12px;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background-color: white;\n  box-shadow: 0 1px 3px 0 #e6ebf1;\n  -webkit-transition: box-shadow 150ms ease;\n  transition: box-shadow 150ms ease;\n}\n.StripeElement--focus {\n  box-shadow: 0 1px 3px 0 #cfd7df;\n}\n.StripeElement--invalid {\n  border-color: #fa755a;\n}\n.StripeElement--webkit-autofill {\n  background-color: #fefde5 !important;\n}\n&lt;\/style&gt;\n&lt;div style=&quot;width: 95%; margin: 2px auto;&quot;&gt;\n  &lt;button type=&quot;button&quot; id=&quot;user_stripeTokenization&quot;&gt;\u2191 Tokenization&lt;\/button&gt;\n  &lt;span style=&quot;font-size:10px&quot;&gt;by &lt;strong&gt;\n    &lt;a href=&quot;https:\/\/stripe.com\/&quot; target=&quot;_Blank&quot;&gt;Stripe.com&lt;\/a&gt;&lt;\/strong&gt;&lt;\/span&gt;&lt;br \/&gt;\n  &lt;div id=&quot;user_card-element&quot; class=&quot;field&quot;&gt;&lt;\/div&gt;&lt;div id=&quot;user_card-errors&quot;&gt;&lt;\/div&gt;&lt;div id=&quot;user_card-success&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nuser_getScript(&#39;https:\/\/js.stripe.com\/v3\/&#39;, function () {\n  const elTarget = document.querySelector(&#39;input[name=&quot;data\\\\[21\\\\].input&quot;]&#39;);\n  var stripe = Stripe(&#39;pk_test_XXXXXxxxxxYYYYYyyyyyZZZZ&#39;); \/\/ Create a Stripe client\n\n  var elements = stripe.elements(); \/\/ Create an instance of Elements\n  var cardStyle = {\n    base: {\n      color: &#39;#32325d&#39;, fontFamily: &#39;&quot;Helvetica Neue&quot;, Helvetica, sans-serif&#39;,\n      fontSize: &#39;13px&#39;, &#39;::placeholder&#39;: { color: &#39;#aab7c4&#39; }\n    },\n    invalid: {\n      color: &#39;#fa755a&#39;, iconColor: &#39;#fa755a&#39;\n    }\n  };\n  var card = elements.create(&#39;card&#39;, { hidePostalCode: true, style: cardStyle } );\n  card.mount(&#39;#user_card-element&#39;);\n\n  card.addEventListener(&#39;change&#39;, function(event) {  \/\/ real-time validation\n    var displayError = document.getElementById(&#39;user_card-errors&#39;);\n    if (event.error) { displayError.textContent = event.error.message;\n    } else { displayError.textContent = &#39;&#39;; }\n  });\n\n  var tokenizeButton = document.getElementById(&#39;stripeTokenization&#39;);\n  tokenizeButton.addEventListener(&#39;click&#39;, function(event) {\n    var extraDetails = {};\n    stripe.createToken(card, extraDetails).then(function(result) {\n      if (result.error) {\n        var errorElement = document.getElementById(&#39;user_card-errors&#39;);\n        errorElement.textContent = result.error.message;\n      } else {\n        elTarget.value = result.token.id;\n        \/\/ document.getElementById(&#39;user_card-success&#39;).textContent = &quot;Token &quot; + result.token.id;\n        elTarget.readOnly = true;\n        elTarget.style.backgroundColor = &quot;#f2f2f2&quot;;\n      }\n    });\n  });\n});\nfunction user_getScript(scriptUrl, callback) {\n  const script = document.createElement(&#39;script&#39;);\n  script.src = scriptUrl;\n  script.onload = callback;\n  document.body.appendChild(script);\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"330\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-examples-Tokenize.gif?resize=1200%2C330&#038;ssl=1\" alt=\"Workflow Decoration: Tokenize\" class=\"wp-image-97901\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#1565c0;color:#1565c0\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#1565c0\" class=\"has-inline-color\">CSS Control<\/mark><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Target: Guide Panel<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=&quot;column column-1 &quot; data-pdd-number=&quot;17&quot;&gt;&lt;div class=&quot;help tform-html-panel-body&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Example of DESCRIPTION setting<\/h4>\n\n\n<div class=\"su-spoiler su-spoiler-style-modern-light su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-anchor=\"CSS_Control_javascript\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>vanilla JavaScript (click to open)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;p style=&quot;text-align:center;color:#ff0000;margin-top:16px&quot;&gt;Note:\n Using a Developer Account is subject to our Terms of Service&lt;\/p&gt;\n&lt;script&gt;\n(function () { \/\/ &quot;window.onload=function(){&quot; - &quot;};&quot; is better if there is Date &quot;x-panel&quot;.\n  if( document.getElementById(&quot;pi-search-form-pre&quot;) !== null ){\n    console.log( &quot;CSS Control does not work in Human tasks&quot; );\n    return;\n  } \/\/ CSS not controlled, in performing My Tasks.\n\n  \/\/ Margin Area\n  document.querySelectorAll( &#39;.all-wrapper, .page-body, .iframe-content&#39; ).forEach( el =&gt; {\n    el.style.padding = &quot;0px 0px 0px 0px&quot;;\n  });\n  document.querySelector( &#39;#taskForm&#39; ).style.margin = &quot;0px&quot;;\n  document.querySelector( &#39;h3.system&#39; ).style.border = &quot;0px&quot;;\n\n  \/\/ FormInput Area\n  document.querySelectorAll( &#39;.normal-tform, .x-panel-body-default&#39; ).forEach( el =&gt; {\n    el.style.backgroundColor = &quot;#ffffff&quot;;\n    el.style.borderColor = &quot;#ffffff&quot;;\n  });\n\n  \/\/ SubmitButton (FormAction) Area\n  document.querySelectorAll( &#39;.tform-action&#39; ).forEach( el =&gt; {\n    el.style.backgroundColor = &quot;#ffffff&quot;;\n    el.style.borderColor = &quot;#ffffff&quot;;\n  });\n\n  \/\/ Misc\n  document.querySelector( &#39;#submitButton&#39; ).value = &quot;Start 60-day free trial&quot;;\n  document.querySelector( &#39;div.footer&#39; ).remove();\n}());\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Capture<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default q-box\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"277\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-example-Change-Default.png?resize=1200%2C277&#038;ssl=1\" alt=\"Workflow Decoration: CSS Control\" class=\"wp-image-97969\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-example-Change-Default.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-example-Change-Default.png?resize=600%2C139&amp;ssl=1 600w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-example-Change-Default.png?resize=1024%2C236&amp;ssl=1 1024w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/decoration-example-Change-Default.png?resize=768%2C177&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30d5\u30a9\u30fc\u30e0\u753b\u9762\u306e &#8220;\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3HTML&#8221; \u306b\u306f JavaScript \u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u30b9\u30af\u30ea\u30d7\u30c8\u77e5\u8b58\u304c\u3042\u308c\u3070\u3001\u696d\u52d9\u52b9\u7387\u3092\u9ad8\u3081\u308b\u69d8\u3005\u306a\u30a2\u30a4\u30c7\u30a2\u306e\u5b9f\u73fe\u304c\u53ef\u80fd\u3067\u3059\u3002 Accelerate your Workflow!!<\/p>\n","protected":false},"author":2,"featured_media":98019,"parent":106397,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"66937","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"advanced_seo_description":"\u30d5\u30a9\u30fc\u30e0\u753b\u9762\u306e \"\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3HTML\" \u306b JavaScript \u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u30b9\u30af\u30ea\u30d7\u30c8\u77e5\u8b58\u304c\u3042\u308c\u3070\u3001\u696d\u52d9\u52b9\u7387\u3092\u9ad8\u3081\u308b\u69d8\u3005\u306a\u30a2\u30a4\u30c7\u30a2\u306e\u5b9f\u73fe\u304c\u53ef\u80fd\u3067\u3059\u3002 Accelerate your Workflow!!","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-98021","page","type-page","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?fit=1200%2C675&ssl=1",1200,675,false],"thumbnail":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=440%2C440&ssl=1",440,440,true],"medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?fit=560%2C315&ssl=1",560,315,true],"medium_large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?fit=768%2C432&ssl=1",768,432,true],"large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?fit=1024%2C576&ssl=1",1024,576,true],"1536x1536":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?fit=1200%2C675&ssl=1",1200,675,true],"2048x2048":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?fit=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-landscape-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-portrait-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=900%2C675&ssl=1",900,675,true],"newspack-article-block-square-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-landscape-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=800%2C600&ssl=1",800,600,true],"newspack-article-block-portrait-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=600%2C675&ssl=1",600,675,true],"newspack-article-block-square-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=800%2C675&ssl=1",800,675,true],"newspack-article-block-landscape-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=600%2C450&ssl=1",600,450,true],"newspack-article-block-portrait-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=450%2C600&ssl=1",450,600,true],"newspack-article-block-square-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=600%2C600&ssl=1",600,600,true],"newspack-article-block-landscape-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=400%2C300&ssl=1",400,300,true],"newspack-article-block-portrait-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=300%2C400&ssl=1",300,400,true],"newspack-article-block-square-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=400%2C400&ssl=1",400,400,true],"newspack-article-block-landscape-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=200%2C150&ssl=1",200,150,true],"newspack-article-block-portrait-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=150%2C200&ssl=1",150,200,true],"newspack-article-block-square-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?resize=200%2C200&ssl=1",200,200,true],"newspack-article-block-uncropped":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/11\/qmascot-workflow-form-decoration.png?fit=1200%2C675&ssl=1",1200,675,true]},"uagb_author_info":{"display_name":"IMAMURA, Genichi","author_link":"https:\/\/support.questetra.com\/ja\/author\/imamuragenichi\/"},"uagb_comment_info":0,"uagb_excerpt":"\u30d5\u30a9\u30fc\u30e0\u753b\u9762\u306e \"\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3HTML\" \u306b\u306f JavaScript \u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u30b9\u30af\u30ea\u30d7\u30c8\u77e5\u8b58\u304c\u3042\u308c\u3070&hellip;","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P9DiIh-puZ","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":106397,"url":"https:\/\/support.questetra.com\/ja\/tips\/","url_meta":{"origin":98021,"position":0},"title":"Developer Tips","author":"IMAMURA, Genichi","date":"2021-05-06","format":false,"excerpt":"\"\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u57fa\u76e4\" \u3092\u4f7f\u3044\u3053\u306a\u3059\u305f\u3081\u306e\u30d2\u30f3\u30c8\u96c6\u3002","rel":"","context":"\u985e\u4f3c\u6295\u7a3f","block_context":{"text":"\u985e\u4f3c\u6295\u7a3f","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":885,"url":"https:\/\/support.questetra.com\/ja\/","url_meta":{"origin":98021,"position":1},"title":"Questetra BPM Suite \u3092\u4f7f\u3044\u3053\u306a\u305d\u3046\uff01","author":"Hirotaka NISHI","date":"2018-03-09","format":false,"excerpt":"Questetra\u30e6\u30fc\u30b6\u306e\u305f\u3081\u306e\u30b5\u30dd\u30fc\u30c8\u30b5\u30a4\u30c8\u3067\u3059\u3002\u30a2\u30d7\u30ea\u8a2d\u8a08\u62c5\u5f53\u8005\u306f\u3001\u696d\u52d9\u306b\u5fc5\u8981\u306a \u201c\u30d2\u30e5\u30fc\u30de\u30f3\u5de5\u2026","rel":"","context":"\u985e\u4f3c\u6295\u7a3f","block_context":{"text":"\u985e\u4f3c\u6295\u7a3f","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/05\/SupportCover.png?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/05\/SupportCover.png?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/05\/SupportCover.png?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/05\/SupportCover.png?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/05\/SupportCover.png?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":106379,"url":"https:\/\/support.questetra.com\/ja\/tips\/low-code-development-for-workflow-automation\/","url_meta":{"origin":98021,"position":2},"title":"\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u81ea\u52d5\u5316\u306e\u305f\u3081\u306e\u30ed\u30fc\u30b3\u30fc\u30c9\u958b\u767a","author":"IMAMURA, Genichi","date":"2021-05-06","format":false,"excerpt":"\u300c\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u5de5\u7a0b\u306e\u81ea\u52d5\u5316\u300d\uff08\u30b5\u30fc\u30d0\u30b5\u30a4\u30c9\u3067\u306e\u7121\u4eba\u51e6\u7406\u5316\uff09\u3092\u5b9f\u73fe\u3057\u305f\u3044\u5834\u5408\u3001\u30a2\u30d7\u30ea\u8a2d\u8a08\u62c5\u5f53\u8005\u306f\u3001\u201d\u30d2\u2026","rel":"","context":"\u985e\u4f3c\u6295\u7a3f","block_context":{"text":"\u985e\u4f3c\u6295\u7a3f","link":""},"img":{"alt_text":"Low Code \u3067 Workflow\u30aa\u30fc\u30c8\u30e1\u30fc\u30b7\u30e7\u30f3","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/05\/Workflow-Automation-with-Low-Code-ja.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/05\/Workflow-Automation-with-Low-Code-ja.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/05\/Workflow-Automation-with-Low-Code-ja.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/05\/Workflow-Automation-with-Low-Code-ja.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/05\/Workflow-Automation-with-Low-Code-ja.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":88112,"url":"https:\/\/support.questetra.com\/ja\/support-service\/","url_meta":{"origin":98021,"position":3},"title":"\u30b5\u30dd\u30fc\u30c8\u30b5\u30fc\u30d3\u30b9","author":"Hirotaka NISHI","date":"2020-06-24","format":false,"excerpt":"\u3054\u5951\u7d04\u306e\u30a8\u30c7\u30a3\u30b7\u30e7\u30f3\u306b\u5fdc\u3058\u3066\u3001\u30b5\u30dd\u30fc\u30c8\u30b5\u30fc\u30d3\u30b9\u3092\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002","rel":"","context":"\u985e\u4f3c\u6295\u7a3f","block_context":{"text":"\u985e\u4f3c\u6295\u7a3f","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/07\/support-service-fi.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/07\/support-service-fi.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/07\/support-service-fi.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/07\/support-service-fi.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2020\/07\/support-service-fi.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":97486,"url":"https:\/\/support.questetra.com\/tips\/","url_meta":{"origin":98021,"position":4},"title":"Developer Tips","author":"IMAMURA, Genichi","date":"2020-11-05","format":false,"excerpt":"Tips and tricks for using Workflow Platform.","rel":"","context":"\u985e\u4f3c\u6295\u7a3f","block_context":{"text":"\u985e\u4f3c\u6295\u7a3f","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2023\/02\/business-process-developer-tips.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":125547,"url":"https:\/\/support.questetra.com\/tips\/task-form-decoration-202208\/","url_meta":{"origin":98021,"position":5},"title":"Task Form Decoration 202208","author":"IMAMURA, Genichi","date":"2022-07-28","format":false,"excerpt":"UI\/UX design is extremely important for improving \u2026","rel":"","context":"\u985e\u4f3c\u6295\u7a3f","block_context":{"text":"\u985e\u4f3c\u6295\u7a3f","link":""},"img":{"alt_text":"Task Form Decoration","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/07\/task-form-decoration-low-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\/2022\/07\/task-form-decoration-low-code.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/07\/task-form-decoration-low-code.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/07\/task-form-decoration-low-code.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/07\/task-form-decoration-low-code.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/pages\/98021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/comments?post=98021"}],"version-history":[{"count":20,"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/pages\/98021\/revisions"}],"predecessor-version":[{"id":125767,"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/pages\/98021\/revisions\/125767"}],"up":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/pages\/106397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/media\/98019"}],"wp:attachment":[{"href":"https:\/\/support.questetra.com\/ja\/wp-json\/wp\/v2\/media?parent=98021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}