{"id":7692,"date":"2014-07-07T14:44:37","date_gmt":"2014-07-07T19:44:37","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/docs\/?page_id=7692"},"modified":"2023-12-06T14:20:00","modified_gmt":"2023-12-06T20:20:00","slug":"color-coding-via-m-painter","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/color-coding-via-m-painter","title":{"rendered":"Color Coding via m-Painter"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/m-painter-app-prop\/color-coding-via-m-painter\">here <\/a>to view the legacy documentation of this feature.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Overview<\/h3>\n\n\n\n<p>To help highlight data patterns, developers often employ the use of conditional styles to color code their data. For example, when a percentage is greater than 80%, you may wish to make that data cell green, whereas otherwise you would want to continue to leave it as a white background with black text. This documentation will explain how to implement the Color Coding functionality from the m-Painter editor. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Conditional Styling\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/b9U93NasCL4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cell\">Color Coding via Specific Styles<\/h3>\n\n\n\n<p>To color code a cell, click in the cell you wish to color code, then choose &#8220;Conditional Rendering&#8221; from the <em>Element Panel<\/em> and click &#8220;Styling (Color Coding).&#8221; <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/colorcoding1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><br><br>You will be brought to a screen that looks like this:<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/colorcoding2.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Utilize the condition area to specify the rules for your condition. In the &#8220;Description&#8221; input, add a brief note explaining what this rule will do. <\/p>\n\n\n\n<p>Next, add the actual rule by specifying the field to check, its relation to the value, and the value to check. Click the &#8220;Add And\/Or&#8221; if you need to specify multiple rules.<\/p>\n\n\n\n<p>Next, select the font color, background color, font size, or font weight to set the value to in the event the rule is true. When does, press Save.<\/p>\n\n\n\n<p>In m-Painter, I can see this individual cell has color coding on it, as there is now a small red triangle in the upper right hand corner of the cell.<\/p>\n\n\n\n<p><br><br><strong>Note: <\/strong> This border is only visible in m-Painter and will not be seen by the end-user.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/colorcoding3.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>At run-time my application looks something like this, adding a red background in the event the amount due is over $400,000:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/colorcoding4.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Note: <\/strong>While not explicitly stated above, the same process could be employed by row so that your conditional logic is applied to all cells within a row by right clicking on a cell, then using the up arrow on the blue menu to arrive at having the TR selected.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"column\">Color Coding via CSS rules<\/h3>\n\n\n\n<p>Similar to what is described above, rather than specifying specific individual rules, you can set entire CSS classes conditionally. <\/p>\n\n\n\n<p>To do so, click on the element you wish to conditionally style, then click &#8220;CSS Classes&#8221; from the <em>Conditional Rendering Menu<\/em> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/colorcoding5.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>On the subsequent screen, after adding all applicable conditional rules, specify a predefined CSS class within the &#8220;Element Classes&#8221; input.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/colorcoding6.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Notes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To delete an individual condition, click on the cell in question, then click &#8220;<em>Conditional Rendering.&#8221; <\/em>click the &#8220;Remove&#8221; link. From here, press the &#8220;X&#8221; icon within the panel.<\/li>\n\n\n\n<li>The color conditional logic is not designed to have multiple rules applied to the same cell. For instance, do not attempt to apply one rule to an individual cell, then a separate rule applied to the entire row.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Overview To help highlight data patterns, developers often employ the use of conditional styles to color code their data. For example, when a percentage is greater than 80%, you may wish to make that data cell green, whereas otherwise you would want to continue to leave it as a white&#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-7692","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\/7692","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=7692"}],"version-history":[{"count":24,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/7692\/revisions"}],"predecessor-version":[{"id":13875,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/7692\/revisions\/13875"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=7692"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=7692"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=7692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}