This article gives an example of how 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( “/” + Id + “/e”
, IMAGE( “/apex/ButtonImage?color=”
+ CASE( TEXT( Industry ), ‘Retail’, ‘darkgreen’, ‘Food & Beverage’, ‘orange’
, ‘Apparel’, ‘blue’, ‘Entertainment’, ‘cyan’, ‘red’ )
+ “&text=Edit+”
+ SUBSTITUTE( Name, “&”, “%26amp;” ) + “.”, “Test” ), “_self” )
The result is shown below in a report: the VisualForce page renders a button varying the color according to the Account.Industry field and the text “Edit <Account.Name>”.
It requires this simple VisualForce page with no controller (GitHub link below):
As explained in the first article of this series, this is a VisualForce page that uses the Scalable Vector Graphics format to specify an image using plain XML.
In addition to that, the page uses a few interesting resources to create a button image with 3D effect:
- apex:variable tags to calculate the size of the image based on the length of the text, and sets default colors when parameters are missing
- linearGradient tags (SVG) to create a highlight at the top of the button and a shadow at the bottom
- rect tags (SVG) to create the button itself and add the gradient effects to make the button appear 3D-like
- text tags (SVG) to display the button text with a shadow (more easily noticed when the color is light like the cyan button above)
There is a quick tutorial on SVG available on w3schools.com
The next article will show an example of how barcodes can be dynamically rendered by an SVG VisualForce page to be used in reports and page layouts.
