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





Posted on 05/18/2016, in formula. Bookmark the permalink. 1 Comment.

Leave a Reply

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

You are commenting using your 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: