{"id":1574,"date":"2008-02-29T03:45:04","date_gmt":"2008-02-29T09:45:04","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/docs\/?page_id=1574"},"modified":"2023-06-20T16:50:24","modified_gmt":"2023-06-20T21:50:24","slug":"how-to-use-field-substitutions-within-html-attributes-and-inline-styles","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/how-to-use-field-substitutions-within-html-attributes-and-inline-styles","title":{"rendered":"Use Field Substitutions within HTML Attributes and Inline Styles"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Overview<\/h3>\n\n\n\n<p>m-Painter allows field substitution parameters within HTML attributes and CSS styles. This document will help to explain how m-Painter can be used with field substitutions.<\/p>\n\n\n\n<p>Some HTML attributes accept any character data as valid. For example; &#8220;title&#8221;, &#8220;alt&#8221;, and &#8220;class&#8221; can be set to any text value. Other HTML attributes, however, require values from a delimited list or range. An example of this would be the attribute &#8220;align&#8221;, which for most elements accepts only the following values: left, center, right, justify. Upon rendering the page, a field substitution may be rejected by m-Painter as invalid when used for these types of attributes. However, many of these types of attributes have been deprecated in recent HTML specifications in favor of inline styles, and m-Painter will now correctly handle these substitutions in inline styles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Conditionally Set an <\/strong>Attribute<\/h3>\n\n\n\n<p>Sometimes you may wish to conditionally set an attribute within the HTML based on the data in your dataset. You may want to justify your data &#8220;center&#8221; or &#8220;right&#8221; depending on a value within the record.<\/p>\n\n\n\n<p><strong>Problem:<\/strong> m-Painter will reject the use of field substitutions when used with an attribute such an &#8220;align&#8221;:<\/p>\n\n\n\n<p><code>&lt; td align=\"${row.CALCULA001}\"&gt;${row.FLD1}&lt;\/td&gt;<\/code><\/p>\n\n\n\n<p>Because <code>${row.CALCULA001}<\/code> is not a valid value for the &#8220;align&#8221; attribute it is rejected and removed by m-Painter.<\/p>\n\n\n\n<p><strong>Solution:<\/strong> The appropriate way to accomplish this, which is now supported by m-Painter, is to use an inline style as follows:<\/p>\n\n\n\n<p><code>&lt;td style=\"text- align: ${row. CALCULA001}\"&gt;${row.FLD1}&lt;\/td&gt;<\/code><\/p>\n\n\n\n<p>m-Painter has now been enhanced to allow field substitutions with any style attribute. A full list of properties and valid values for each can be found here: <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/propidx.html\">https:\/\/www.w3.org\/TR\/CSS21\/propidx.html<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conditionally Set a Color<\/h3>\n\n\n\n<p>Suppose I have a report that displays various orders. In this report I want to highlight the orders in which my customers ordered a quantity of 20 or more of a given product. This is a situation where you can use a field substitution within an HTML inline style.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a conditional calculation that will set the calc equal to the word &#8216;yellow&#8217; if the quantity ordered is greater than or equal to 20.<\/li>\n\n\n\n<li>Compile the application.<\/li>\n\n\n\n<li>In m-Painter open the HTML source and find the field substitution for the field you wish to highlight.<\/li>\n\n\n\n<li>Add an inline style to the <code>&lt;td&gt;<\/code> tag associated with this field that sets the cell&#8217;s background color equal to the calculation.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/images\/fieldsubs1.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/fieldsubs3.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>The resulting output is below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/images\/fieldsubs2.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/fieldsubs4.jpg\" alt=\"\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Overview m-Painter allows field substitution parameters within HTML attributes and CSS styles. This document will help to explain how m-Painter can be used with field substitutions. Some HTML attributes accept any character data as valid. For example; &#8220;title&#8221;, &#8220;alt&#8221;, and &#8220;class&#8221; can be set to any text value. Other HTML&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[],"class_list":["post-1574","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=1574"}],"version-history":[{"count":10,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1574\/revisions"}],"predecessor-version":[{"id":12872,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1574\/revisions\/12872"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=1574"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=1574"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=1574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}