{"id":455,"date":"2016-05-20T09:00:58","date_gmt":"2016-05-20T04:00:58","guid":{"rendered":"https:\/\/learnsf.wordpress.com\/?p=455"},"modified":"2023-12-30T17:07:10","modified_gmt":"2023-12-30T23:07:10","slug":"custom-hyperlink-buttons-in-a-formula","status":"publish","type":"post","link":"https:\/\/blog.felineflock.com\/index.php\/2016\/05\/20\/custom-hyperlink-buttons-in-a-formula\/","title":{"rendered":"Quick Guide to Stunning 3D Buttons using SVG VisualForce"},"content":{"rendered":"<p>This article gives an example of\u00a0how to use an SVG VisualForce page to generate images for buttons.<\/p>\n<p>The button is a formula that uses HYPERLINK() and IMAGE() functions that link to a VisualForce page passing parameters color and text.<\/p>\n<blockquote><p>HYPERLINK( &#8220;\/&#8221; + Id + &#8220;\/e&#8221;<br \/>\n, IMAGE( &#8220;\/apex\/ButtonImage?<strong>color<\/strong>=&#8221;<br \/>\n+ CASE( TEXT( Industry ), &#8216;Retail&#8217;, &#8216;darkgreen&#8217;, &#8216;Food &amp; Beverage&#8217;, &#8216;orange&#8217;<br \/>\n, &#8216;Apparel&#8217;, &#8216;blue&#8217;, &#8216;Entertainment&#8217;, &#8216;cyan&#8217;, &#8216;red&#8217; )<br \/>\n+ &#8220;&amp;<strong>text<\/strong>=Edit+&#8221;<br \/>\n+ SUBSTITUTE( Name, &#8220;&amp;&#8221;, &#8220;%26amp;&#8221; ) + &#8220;.&#8221;, &#8220;Test&#8221; ), &#8220;_self&#8221; )<\/p><\/blockquote>\n<p>The result is shown below in a report: \u00a0the VisualForce page renders a button varying the color according to the Account.Industry field and the text &#8220;Edit &lt;Account.Name&gt;&#8221;.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-458\" src=\"http:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-20-12-pm.png\" alt=\"Screen Shot 2016-05-19 at 11.20.12 PM\" width=\"1458\" height=\"724\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-20-12-pm.png 1458w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-20-12-pm-300x149.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-20-12-pm-1024x508.png 1024w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-20-12-pm-768x381.png 768w\" sizes=\"auto, (max-width: 1458px) 100vw, 1458px\" \/><\/p>\n<p>It requires this simple VisualForce page with no controller (GitHub link below):<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/Fernando-Fernandez\/SVG-Images-For-Salesforce\/blob\/master\/ButtonImage.page\" target=\"_blank\" rel=\"noopener\">ButtonImage.page<\/a><\/li>\n<\/ul>\n<p>As explained in the <a href=\"https:\/\/learnsf.wordpress.com\/2016\/05\/17\/custom-formats-in-reports-and-page-layouts\/\">first article of this series<\/a>, this is a VisualForce page that uses the\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics\" target=\"_blank\" rel=\"noopener\">Scalable Vector Graphics<\/a>\u00a0format to specify an image using plain XML.<\/p>\n<p>In addition to that, the page uses a few interesting resources to create a button image with 3D effect:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.pages.meta\/pages\/pages_compref_variable.htm\" target=\"_blank\" rel=\"noopener\">apex:variable tags<\/a> to calculate\u00a0the size of the image based on the length of the text, and sets default colors when parameters are missing<\/li>\n<li><a href=\"http:\/\/www.w3schools.com\/svg\/svg_grad_linear.asp\" target=\"_blank\" rel=\"noopener\">linearGradient tags (SVG)<\/a> to create a highlight at the top of the button and a shadow at the bottom<\/li>\n<li><a href=\"http:\/\/www.w3schools.com\/svg\/svg_rect.asp\" target=\"_blank\" rel=\"noopener\">rect tags (SVG)<\/a> to create the button itself and add the gradient effects to make the button appear 3D-like<\/li>\n<li><a href=\"http:\/\/www.w3schools.com\/svg\/svg_text.asp\" target=\"_blank\" rel=\"noopener\">text tags (SVG)<\/a> to display the button text with a shadow (more easily noticed when the color is light like the cyan button above)<\/li>\n<\/ul>\n<p>There is a quick tutorial on SVG available on <a href=\"http:\/\/www.w3schools.com\/svg\/\" target=\"_blank\" rel=\"noopener\">w3schools.com<br \/>\n<\/a><\/p>\n<p>The next article will show an example of how <strong>barcodes<\/strong> can be dynamically\u00a0rendered\u00a0by an SVG VisualForce page to be\u00a0used in reports and page layouts.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-503\" src=\"http:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-51-26-pm.png\" alt=\"Screen Shot 2016-05-19 at 11.51.26 PM\" width=\"1106\" height=\"364\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-51-26-pm.png 1106w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-51-26-pm-300x99.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-51-26-pm-1024x337.png 1024w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2016\/05\/screen-shot-2016-05-19-at-11-51-26-pm-768x253.png 768w\" sizes=\"auto, (max-width: 1106px) 100vw, 1106px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article gives an example of\u00a0how to use an SVG VisualForce page to generate images for buttons. The button is a formula that uses HYPERLINK() and IMAGE() functions that link to a VisualForce page passing parameters color and text. HYPERLINK( &#8220;\/&#8221; + Id + &#8220;\/e&#8221; , IMAGE( &#8220;\/apex\/ButtonImage?color=&#8221; + CASE( TEXT( Industry ), &#8216;Retail&#8217;, &#8216;darkgreen&#8217;, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":458,"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-455","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\/455","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=455"}],"version-history":[{"count":2,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/455\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/455\/revisions\/553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/media\/458"}],"wp:attachment":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/media?parent=455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/categories?post=455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/tags?post=455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}