Tag: visualforce

How to have a Visualforce Page Download as a pdf

Salesforce Logo

When creating applications it’s a pretty common request to be able to create a formatted report or file in pdf file format.

For the most part, most customized pages and data can be easily converted into a PDF file without having to make many changes. In Salesforce, we can change customized Visualforce pages to create a pdf file by using the renderAs property and set the value to pdf.

Continue reading

Using jQuery in Visualforce

jQuery Logo

jQuery is one of the most utilized JavaScript libraries and can be easily be integrated into any visualforce page regardless of whether it’s meant for your internal users or on a force.com site.¬†jQuery is usually used for manipulating elements in the DOM, animation or even event handling. Usually, I use it for doing some in page validation on form fields, so that we don’t have to post back to the server to find out if something is valid or not.

Before jQuery can be used in the visualforce page, it needs to be referenced. I recommend using the script hosted on a CDN by either jQuery or google or Microsoft. If you are interested in using Google’s, you can find it on the google developers site.

Here’s how to include it in the page (if using Google’s CDN):

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js />

If you decide to host jQuery yourself, you’ll need to do something like the following. Your value could be different, I’m assuming you’ve uploaded into a static resource called “scripts.zip” which has jQuery named as jQuery.js.

<apex:includeScript value="{!URLFOR($Resource.scripts, '/jQuery.js')}" />

After including jQuery, we need to put jQuery in no conflict mode because Salesforce uses Prototype and references the $ sign. Usually, I assign j$ to be used instead of simply typing jQuery instead of $.

<script> j$ = jQuery.noConflict(); </script>

And now, whenever you want to use jQuery in the javascript in your visualforce page you will need to use j$ instead.

Here’s an example of how to do it:

j$(function() { doSomething(); });

instead of

$(function() { doSomething(); }

Note: it’s best to avoid duplicating code in each page, so consider doing this in a custom visualforce component or using a visualforce master page.

And finally, always set an id or class on any element that you would want to reference in javascript. The engine that converts visualforce components into actual html mangles the ids quite a bit. It’s easiest to make use of the attribute ends with method because the managled ids contain special characters that need to be escaped.

Example Element:

<apex:inputText value="{!account.Name}" id="acc_Name" />

To reference the example element, you would then need to do the following:


Hope this helps!

Salesforce Spring15 Including Mapping Features

Salesforce’s Spring 15 release is going to include mapping and geolocation for address fields. I believe, location based features started appearing before I started using Salesforce.

Even more exciting, is that visualforce will include a map component. The mapping component appears to be using Google Maps, but this could probably change.

The new mapping component uses JavaScript to zoom, and move around.

If you get an error when including the maps that reads something like this: “visualforce maps are not enabled for your organization. please contact your administrator” you will need to enable them by following the below directions.

How to Enable in Pre-Release
Setup -> Build -> Customize -> Maps & Location -> Settings. Read the disclaimer and click Okay or Agree.

Including the Map in Visualforce is incredibly easy; it can be done in basically one line of code. The component is simply apex:map.

If you get an error when trying to save the page, make sure your page version is at least 32.