Monthly Archives: May 2016

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

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


Bending fields to our will in reports and page layouts with SVG VisualForce pages!

If you add a long text field to a report, you may end up with something undesirable like the image below:  a field of plain text squeezed and stripped of any formatting.

Screen Shot 2016-05-17 at 10.36.35 PM.png

The “normal” way of fixing that would be to create a plain text field and use a workflow to copy the first 255 characters of the long text field to it – that is, truncating the long text field.

This article shows another way of overcoming that limitation and making long text fields display with a fixed size and word wrap and in color without truncation.

In the previous article it was shown how to display formatted text using a VisualForce page that accepted parameters and converted text to a SVG image.
Now that idea will be expanded:   create a page that will accept any field from any object and generate an image after applying word wrap and color to its text value. The result is below:

Screen Shot 2016-05-17 at 11.00.43 PM.png

Much nicer!

Here is how it was done:  an IMAGE formula field (below) that sends parameters to a VisualForce page which returns a SVG image.

IMAGE( ‘/apex/FieldToImage?wrap=60&color=’
+ IF( CONTAINS( ‘Energy|Construction|Transportation|Shipping|Utilities|Manufacturing|Agriculture’, TEXT( Industry ) ), ‘red’, ‘green’ )
+ ‘&object=Account&fieldName=description&id=’ + Id, ‘Color Description’ )

Please notice the following parameters passed to the FieldToImage VisualForce page:

  1. wrap=60 – this limits each line to 60 characters
  2. color= red or green, depending on the Account Industry – self-explanatory
  3. object=Account – this tells the page controller to retrieve data from the Account
  4. fieldName=description – this tells the page controller to retrieve data from the Account.Description field
  5. id= the Account ID – self-explanatory

Instead of passing the text directly to the page, we passed the names of the object and field because formulas cannot reference long text fields directly (by the way, this idea needs more upvotes).

The code that implements the page and controller is here (GitHub links):

  1. FieldToImageController.cls

The Apex controller uses the parameters “object”, “fieldName” and “id” to create a dynamic SOQL query. It then fetches the text from the object and substitutes a couple of special characters in order to not break the SVG syntax.

// fetch the field and convert to text
List<SObject> objList = Database.query( ‘SELECT ID, ‘ + fieldName
+ ‘ FROM ‘ + objectName + ‘ WHERE ID = \” + theID + ‘\’ LIMIT 1′ );
if( objList.size() <= 0 ) {
String rawText = String.valueOf( objList[ 0 ].get( fieldName ) );
if( rawText == null ) {
rawText = rawText.replace( ‘<‘, ‘&lt;’ ).replace( ‘&’, ‘&amp;’ );

This idea can be expanded to make the VisualForce page return and display long text from related records or combined with parent records.
This is something that is not possible to do with just a formula since long text fields cannot be referenced in formulas and there are limited ways of accessing children records in the context of a page layout or report.

The next article will show a way to create dynamic hyperlink buttons – like the ones below – to display on page layouts and reports:

Screen Shot 2016-05-17 at 11.48.14 PMScreen Shot 2016-05-17 at 11.38.52 PM




Colors in reports and page layouts with SVG VisualForce pages

Other than using Rich Text fields, there are rigid limits in regards to how fields appear 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 to obtain that functionality.


Below is the formula used to display the colored text:

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

Notice how it starts with an IMAGE() function with a concatenation of:

  1. a link to a VisualForce page
  2. a parameter “color” followed by…
  3. …an IF() function that determines whether the text should appear in red or green
  4. a parameter “text” followed by…
  5. …a SUBSTITUTE() function that replaces any “&” character in the Account Name with an equivalent escape code
  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

That is right, this formula transforms a text field into an image using a VisualForce page! How is that possible?

Here is the page markup for TextToImage:

<apex:page sidebar="false" showHeader="false"
 applyHtmlTag="false" applyBodyTag="false" 
 ContentType="image/svg+xml" >
    <apex:variable var="textWidth" 
         value="{! LEN( $CurrentPage.parameters.Text ) * 10 }"/>
    <apex:variable var="textColor" 
         value="{!IF( $CurrentPage.parameters.Color = null, 
                  'red', $CurrentPage.parameters.Color )}" />

    <svg id="layer_1" 
        height="20" width="{! textWidth }">
      <text x="0" y="15" font-family="Verdana" 
          font-weight="bold" fill="{! textColor }">
          {! $CurrentPage.parameters.Text }

In this page there are 3 unusual things:

  1. no controller, no header, no sidebar, no style sheet
  2. the ContentType is set to image/svg+xml
  3. the SVG tag containing a TEXT tag

The SVG image format – Scalable Vector Graphics – 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.

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.
An URL like below would make the text “This is a test.” appear in cyan:

Screen Shot 2016-05-17 at 12.59.35 AM

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 articles… (hint:  check out the bar codes in the first image!)