{"id":166708,"date":"2024-10-01T18:06:51","date_gmt":"2024-10-01T09:06:51","guid":{"rendered":"https:\/\/support.questetra.com\/?p=166708"},"modified":"2026-04-14T15:47:10","modified_gmt":"2026-04-14T06:47:10","slug":"decoration-string-diff","status":"publish","type":"post","link":"https:\/\/support.questetra.com\/en\/developer-blog\/decoration-string-diff\/","title":{"rendered":"Display the Difference Between Two String Type Data Items on the Processing Form Screen"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">When updating existing documents or conducting repetitive tasks such as website updates, creating contracts, or reviewing code, the review process can proceed more efficiently if the changes are clear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This article introduces a sample that uses <a href=\"#decoration\">decoration<\/a> (HTML \/ JavaScript) on the processing form screen to display the difference between two String-type data items. Questetra Form JavaScript API is used to refer to the value of the data item.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Display Differences in String-type Data Items (diff)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is a sample that gets the input values \u200b\u200bof two String-type data items (input 1 [q_input1], input 2 [q_input2]), calculates and displays the difference (diff). If there is a difference in the input text, the part with the difference will be highlighted as shown in the following image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Prepare a Guide Panel-type data item and copy and paste the sample code below into the &#8220;Description&#8221; field to try it out. Note that in this example, the data items &#8220;Input 1&#8221; and &#8220;Input 2&#8221; are editable, but it will work even if one or both are display only. Also, please set the Guide Panel-type data item into which you entered the code to display only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/diff-sample-en.png?ssl=1\" alt=\"\" class=\"wp-image-166299\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Sample Code<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/diff@7.0.0\/dist\/diff.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/diff2html@3.4.48\/bundles\/js\/diff2html-ui.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n   qbpms.form.on(&#39;ready&#39;, () =&gt; {\n        \/\/ Add style specification by link tag (forcefully) in the head tag\n        const addLinkTag = () =&gt; {\n            const linkTag = document.createElement(&#39;link&#39;);\n            linkTag.rel = &#39;stylesheet&#39;;\n            linkTag.href = &#39;https:\/\/cdn.jsdelivr.net\/npm\/diff2html@3.4.48\/bundles\/css\/diff2html.min.css&#39;;\n            document.head.appendChild(linkTag);\n        };\n        addLinkTag();\n\n        const drawDiff = () =&gt; {\n            const input = qbpms.form.get(&#39;q_input1&#39;);\n            const target = qbpms.form.get(&#39;q_input2&#39;);\n            const unifiedDiff = Diff.createPatch(&quot;Input 1\/Input 2&quot;, input, target);\n\n            const targetElement = document.getElementById(&#39;q_diff&#39;);\n            const diff2htmlUi = new Diff2HtmlUI(targetElement, unifiedDiff, {\n                outputFormat: &#39;side-by-side&#39;,\n                matching: &#39;lines&#39;,\n                drawFileList: false,\n                fileListToggle: false,\n                fileContentToggle: false,\n            });\n            diff2htmlUi.draw();\n        };\n        drawDiff();\n        \n        qbpms.form.on(&#39;change&#39;, &#39;q_input1&#39;, drawDiff);\n        qbpms.form.on(&#39;change&#39;, &#39;q_input2&#39;, drawDiff);\n    });\n&lt;\/script&gt;\n&lt;div id=&quot;q_diff&quot;&gt;&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Utilized Libraries<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This sample uses the following two (external) libraries.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">jsdiff<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Calculates the difference between texts and outputs it in UnifiedDiff format.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>jsdiff<\/strong>: <a href=\"https:\/\/github.com\/kpdecker\/jsdiff\">https:\/\/github.com\/kpdecker\/jsdiff<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Diff computation is complex in depth, and jsdiff is a lightweight library. It is not very good at calculating the diff for large texts.<br>If the output is in UnifiedDiff format, it can be processed using the following diff2html, which can be replaced by other libraries such as diff-match-patch.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">diff2html<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">It takes the diff in UnifiedDiff format and displays it in HTML.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>diff2html<\/strong>: <a href=\"https:\/\/diff2html.xyz\/\">https:\/\/diff2html.xyz\/<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Demo Video<\/h3>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='331' src='https:\/\/videopress.com\/embed\/LV70b55p?cover=1&amp;posterUrl=https%3A%2F%2Fsupport.questetra.com%2Fwp-content%2Fuploads%2F2024%2F10%2Fdiff-movie-en_mp4_avc_240p.original.jpg&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1725245713'><\/script>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-uagb-separator uagb-block-200dfba2\"><div class=\"uagb-separator-spacing-wrapper\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"decoration\">Appendix: What is Decoration?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Decoration is a feature that app designers can use to make forms more user-friendly for processors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you set a description for the data item, it will be displayed as a note at the bottom of the input form. Since you can set not only plain text but also HTML and JavaScript, you can implement various ideas to improve work efficiency, such as emphasizing business-related notes, displaying URL links to related sites, and displaying an input character counter.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/360002245252-M213-Guidance-Descriptions-on-the-Operating-Screen-HTML-JavaScript\">M213: Guidance Descriptions on the Operating Screen (HTML\/JavaScript)<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/360024615831-R2131-HTML-Tags-Available-for-Operation-Form\">R2131: HTML Elements Available in Markdown<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/4406943475097-R2132-Questetra-Form-JavaScript-API\">R2132: Questetra Form JavaScript API<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we use Questetra Form JavaScript API (available in Professional Edition) to get the value (text) entered in String-type data items. This article is intended for those who can use Questetra Form JavaScript API, so if you have not used it yet, you can easily understand the sample code by studying the following documents.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Basic usage of Questetra Form JavaScript API<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-3\/\">Perform Your Own Input Checks on Form Screens<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/\">Get\/Set Data Item Values on the Form Screen<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-2\/\">Perform Processing When an Event Occurs on the Form Screen<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article explains how to display the difference between two text-type data items using decoration (HTML\/JavaScript) on the form screen. Questetra Form Javascript API is used to get the input value.<\/p>\n","protected":false},"author":3,"featured_media":166718,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uag_custom_page_level_css":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[296],"tags":[3280],"faq_section":[],"class_list":["post-166708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-blog","tag-questetra-form-javascript-api"],"jetpack_publicize_connections":[],"uagb_featured_image_src":{"full":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=1200%2C675&ssl=1",1200,675,false],"thumbnail":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=440%2C440&ssl=1",440,440,true],"medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=560%2C315&ssl=1",560,315,true],"medium_large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=768%2C432&ssl=1",768,432,true],"large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=1024%2C576&ssl=1",1024,576,true],"1536x1536":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=1200%2C675&ssl=1",1200,675,true],"2048x2048":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-landscape-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-portrait-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=900%2C675&ssl=1",900,675,true],"newspack-article-block-square-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=1200%2C675&ssl=1",1200,675,true],"newspack-article-block-landscape-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=800%2C600&ssl=1",800,600,true],"newspack-article-block-portrait-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=600%2C675&ssl=1",600,675,true],"newspack-article-block-square-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=800%2C675&ssl=1",800,675,true],"newspack-article-block-landscape-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=600%2C450&ssl=1",600,450,true],"newspack-article-block-portrait-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=450%2C600&ssl=1",450,600,true],"newspack-article-block-square-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=600%2C600&ssl=1",600,600,true],"newspack-article-block-landscape-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=400%2C300&ssl=1",400,300,true],"newspack-article-block-portrait-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=300%2C400&ssl=1",300,400,true],"newspack-article-block-square-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=400%2C400&ssl=1",400,400,true],"newspack-article-block-landscape-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=200%2C150&ssl=1",200,150,true],"newspack-article-block-portrait-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=150%2C200&ssl=1",150,200,true],"newspack-article-block-square-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?resize=200%2C200&ssl=1",200,200,true],"newspack-article-block-uncropped":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=1200%2C675&ssl=1",1200,675,true]},"uagb_author_info":{"display_name":"Hirotaka NISHI","author_link":"https:\/\/support.questetra.com\/en\/author\/nishiquestetra\/"},"uagb_comment_info":0,"uagb_excerpt":"This article explains how to display the difference between two text-type data items using decoration (HTML\/JavaScript) on the form screen. Questetra Form Javascript API is used to get the input value.","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9DiIh-HmQ","jetpack-related-posts":[{"id":126766,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-1\/","url_meta":{"origin":166708,"position":0},"title":"Get\/Set Data Item Values on the Form Screen","author":"Hirotaka NISHI","date":"2022-09-01","format":false,"excerpt":"This section describes how to get\/update Data Item values on the form screen using the Questetra Form JavaScript API.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/ja\/category\/developer-blog\/"},"img":{"alt_text":"tutorial questetra form javascript api","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":127065,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-2\/","url_meta":{"origin":166708,"position":1},"title":"Perform Processing When an Event Occurs on the Form Screen","author":"Hirotaka NISHI","date":"2022-09-05","format":false,"excerpt":"This section describes how to register\/delete event handlers for data items on the form screen and for the form screen itself using Questetra Form Javascript API.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/en\/category\/developer-blog\/"},"img":{"alt_text":"tutorial questetra form javascript api","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":121982,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/data-auto-input\/","url_meta":{"origin":166708,"position":2},"title":"Automatically Populate Multiple Data Fields with Selected Employee Information","author":"Peter Glover","date":"2022-10-04","format":false,"excerpt":"This section introduces a mechanism whereby information about choices is automatically populated in other Data Items when specified as a Select type.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/en\/category\/developer-blog\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/05\/automatic-input.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\/05\/automatic-input.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/05\/automatic-input.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/05\/automatic-input.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/05\/automatic-input.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":127110,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/tutorial-questetra-form-javascript-api-3\/","url_meta":{"origin":166708,"position":3},"title":"Perform Your Own Input Checks on Form Screens","author":"Hirotaka NISHI","date":"2022-09-06","format":false,"excerpt":"Implement your own input checking mechanism that runs on the form screen using the Questetra Form Javascript API.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/en\/category\/developer-blog\/"},"img":{"alt_text":"tutorial questetra form javascript api","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2022\/06\/tutorial-questetra-form-javascript-api.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":194460,"url":"https:\/\/support.questetra.com\/en\/data-items\/description\/","url_meta":{"origin":166708,"position":4},"title":"Data Item Description","author":"kobayashi","date":"2026-09-14","format":false,"excerpt":"Setting the [Description] in a Data Item's properties displays it as a note below the corresponding Data Item on the input form. It is used to help the Operator with input by presenting input examples and criteria for judgment. [Description] is a setting common to all data types. Input is\u2026","rel":"","context":"In &quot;Data Items&quot;","block_context":{"text":"Data Items","link":"https:\/\/support.questetra.com\/en\/category\/data-items\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/09\/Data-item-edit.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/09\/Data-item-edit.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/09\/Data-item-edit.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/09\/Data-item-edit.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/09\/Data-item-edit.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":79794,"url":"https:\/\/support.questetra.com\/en\/data-items\/guidepanel-type\/","url_meta":{"origin":166708,"position":5},"title":"Guide Panel-type","author":"Peter Glover","date":"2019-09-30","format":false,"excerpt":"Displays non-editable text as guidance for users of the input form.","rel":"","context":"In &quot;Data Items&quot;","block_context":{"text":"Data Items","link":"https:\/\/support.questetra.com\/en\/category\/data-items\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2019\/09\/Guide-panel-code.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2024\/10\/text-diff-en.png?fit=1200%2C675&ssl=1","_links":{"self":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/166708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/comments?post=166708"}],"version-history":[{"count":12,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/166708\/revisions"}],"predecessor-version":[{"id":179219,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/166708\/revisions\/179219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/media\/166718"}],"wp:attachment":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/media?parent=166708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/categories?post=166708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/tags?post=166708"},{"taxonomy":"faq_section","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/faq_section?post=166708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}