{"id":268,"date":"2016-05-17T10:00:00","date_gmt":"2016-05-17T05:00:00","guid":{"rendered":"https:\/\/learnsf.wordpress.com\/?p=268"},"modified":"2023-12-30T17:11:48","modified_gmt":"2023-12-30T23:11:48","slug":"using-colors-in-reports-and-page-layouts","status":"publish","type":"post","link":"https:\/\/blog.felineflock.com\/index.php\/2016\/05\/17\/using-colors-in-reports-and-page-layouts\/","title":{"rendered":"Unlock the Power of Color in Your Reports and Page Layouts"},"content":{"rendered":"

Other than using Rich Text fields,\u00a0there are rigid\u00a0limits in regards to how fields\u00a0appear on a page layout or report.
\nIn the Account report below, you can see a text field that appears in different colors depending on the industry of the account. This article shows one way\u00a0to obtain that functionality.<\/p>\n

\"ReportColoredText\"<\/p>\n

Below is the formula used to display the colored text:<\/p>\n

IMAGE( “\/apex\/TextToImage?color=”
\n+
\nIF( CONTAINS( ‘Energy|Construction|Transportation|Shipping|Utilities|Manufacturing|Agriculture’, TEXT( Industry ) ), ‘red’, ‘green’ )
\n+ “&text=”
\n+ SUBSTITUTE( Name, “&”, “%26amp;” ) + ” (”
\n+ IF( CONTAINS( ‘Energy|Construction|Transportation|Shipping|Utilities|Manufacturing|Agriculture’, TEXT( Industry ) ), ‘Basic’, ‘Service’ ) + ” Industry)”, “Test” )<\/p><\/blockquote>\n

Notice how it starts with an IMAGE() function with a concatenation of:<\/p>\n

    \n
  1. a link to a VisualForce page<\/li>\n
  2. a parameter “color” followed by…<\/li>\n
  3. …an IF() function that determines whether the text should appear in red or green<\/li>\n
  4. a parameter “text” followed by…<\/li>\n
  5. …a SUBSTITUTE() function that replaces any “&” character in the Account Name with an\u00a0equivalent escape code<\/li>\n
  6. another IF() function that determines whether to append the words “(Basic Industry)” or “(Service Industry)” depending on the picklist value of the Account Industry<\/li>\n<\/ol>\n

    That is right, this formula transforms a text field into an image using a VisualForce page! How is that possible?<\/p>\n

    Here is the page markup for TextToImage:<\/p>\n

    \n
    <apex:page sidebar=\"false\" showHeader=\"false\"\n applyHtmlTag=\"false\" applyBodyTag=\"false\" \n standardStylesheets=\"false\" \n ContentType=\"image\/svg+xml\" >\n    <apex:variable var=\"textWidth\" \n         value=\"{! LEN( $CurrentPage.parameters.Text ) * 10 }\"\/>\n    <apex:variable var=\"textColor\" \n         value=\"{!IF( $CurrentPage.parameters.Color = null, \n                  'red', $CurrentPage.parameters.Color )}\" \/>\n\n    <svg id=\"layer_1\" \n        xmlns=\"http:\/\/www.w3.org\/2000\/svg\" \n        xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" \n        height=\"20\" width=\"{! textWidth }\">\n      <text x=\"0\" y=\"15\" font-family=\"Verdana\" \n          font-weight=\"bold\" fill=\"{! textColor }\">\n          {! $CurrentPage.parameters.Text }\n      <\/text>\n    <\/svg>\n<\/apex:page><\/pre>\n<\/blockquote>\n
    In this page there are 3 unusual things:<\/p>\n
      \n
    1. no controller, no header, no sidebar, no style sheet<\/li>\n
    2. the ContentType is set to image\/svg+xml<\/li>\n
    3. the SVG tag containing a TEXT tag<\/li>\n<\/ol>\n
      The SVG image format – Scalable Vector Graphics<\/a> – is relatively less known standard but it is very versatile and compatible with virtually all browsers. It allows us to define an image using plain XML.<\/p>\n
      In order to generate an image, this VisualForce page uses the parameters Text and Color. Color can be any CSS color code such as #FF00FF, #00A0C0, etc or a CSS color name such as red, green, darkblue, etc.
      \nAn URL like below would make the text “This is a test.” appear in cyan:<\/p>\n
      \/apex\/TextToImage?color=cyan&text=This+is+a+test.
      \n\"Screen<\/p>\n
      This way of manipulating text with SVG opens the door to a few ideas and allows interesting features that will be explored in the next article<\/a>s… (hint: \u00a0check out the bar codes in the first image!)<\/p>\n","protected":false},"excerpt":{"rendered":"
      Other than using Rich Text fields,\u00a0there are rigid\u00a0limits in regards to how fields\u00a0appear on a page layout or report. In the Account report below, you can see a text field that appears in different colors depending on the industry of the account. This article shows one way\u00a0to obtain that functionality. Below is the formula used […]<\/p>\n","protected":false},"author":1,"featured_media":271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formula"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":2,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/268\/revisions\/555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/media\/271"}],"wp:attachment":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}