Easy 3D hyperlink buttons using SVG VisualForce pages

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>”.
Screen Shot 2016-05-19 at 11.20.12 PM

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.
Screen Shot 2016-05-19 at 11.51.26 PM


Posted on 05/20/2016, in formula. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: