Javascript and Visualforce: Tips and Tricks

In the web 7.0 or whatever version of the web we’re in, Javascript is king. Now, there’s lots of stuff you can do directly with Visualforce (like dynamic picklists) but sometimes for the best user experience you’ll want to use Javascript to make it even better. There are lots of Javascript tutorials out there and there are lots of Visualforce tutorials out there (don’t forget Trailhead) so I’m going to talk about some tricks that people should know when working with Javascript on Visualforce

Use Static Resources

It’s super convenient to use a CDN to host your Javascript files but this opens you up to lots of security concerns. If you’re just doing your development, using a CDN is fine, but when it comes time to deploy it to production, move your Javascript into a static resource. There are two ways that you can do this.

Single Javascript Files

The easiest way to manage your Javascript static resources is to upload them as a single file and then import them. This is fast and easy to update new versions of files. The downside of this is you end up with lots of static resources in your org and it can be quite painful to manage. After creating your static resource, you can include it in your Visualforce by using the includeScript tag

<apex:includeScript value="{!$Resource.js_jquery}" />

This assumes that your static resource is named “js_jquery”

A zip of Javascript Files

The first method is great if your page only needs a single resource or you ok with having a common version of Javascript file throughout your all of your pages, but most applications have multiple Javascript files per page. If you want to compartmentalize every application so that you can update Javascript versions without affecting other applications. To do this, you’ll want to create a zip file with your files in it (just remember your folder structure) and upload it as a static resource. Then you can include it in your Visualforce by using the includeScript tag again.

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

This assumes that your static resource is named “MyAppResouces” and the jquery.min.js file is in a “js” folder.

Use Endswith Selector in jQuery

If you’ve ever looked at the source of a Visualforce page you’ll see lots of long complicated ids for fields. For example if I have the following Visualforce

<apex:inputField id="resolutionDescription" value="{!Case.Resolution_Description__c}" />

I can get the following HTML generated

<textarea id="j_id0:form:caseEdit:j_id36:resolutionDescription" ...></textarea>

This can lead to problems if you want to run any jQuery against that id. The best way to work around this is to use jQuery’s ends with selector.

var jq_resDesc = jQuery('textarea[id$="resolutionDescription"]');

The selection above will find the resolution description

Use the $Component variable

While I typically use the jQuery trick above, sometimes you need to pass the id of a field to a method and you can’t use jQuery to get it. In that case you can use the $Component variable to inject the richfaces id.

<apex:outputPanel onclick="jsMethod('{!$Component.thePanel}')" id="thePanel">Text</apex:outputPanel>

Use Remote Actions

There are lots of way to push and pull data to Salesforce with Javascript. But I would recommend using Remote Actions whenever possible. The reasoning behind this is that you have the tight binding to the data model that Apex provides as well as the extra assurance provided by Apex testing. By moving most of your logic back into Apex, you don’t have to worry as much about setting up new processes for testing your Javascript.

Stand on the Shoulders of Giants

There are lots of smart people out there and many of them way smarter than me. Whenever possible, try to see if someone has made your life easier. For example, check to see if anyone has made something to make your Javascript life easier. If you’re developing an application in Angular look at ngForce. One of my favorites is jsforce which provides many easy ways to interact with Salesforce data.

Posted in Development, Salesforce | Tagged , , | Leave a comment

Managing reports and dashboards programatically

One of the challenges you get when you have a special snowflake org is lots of people want to write lots of reports and lots of dashboards for each of their special use cases.  Now, lots of times reports aren’t the right way to go with this so you have to educate your users on the right way to do this and their old reports get abandoned.  Or a user will create a one off report and never look at it again.  As it stands right now, we have several thousand reports that haven’t been looked at in more than 90 days.

Continue reading

Posted in Development, Salesforce | Tagged , , , | Leave a comment

List of objects for POST in Apex REST


A while ago, someone posted on the developer boards a question about how to bulk create tasks for contacts via REST.  I thought it was an interesting enough problem to cover how to do it and how to format the data correctly to use it.


Before we can bulk create tasks for a contact, we need to know how to identify those contacts.  To do this, I create an unique external Id field called External_Id__c.  As long as your contacts are uniquely identifiable then it doesn’t matter what field you use.  For this example I have two contacts under different accounts “Andy Young” with an external Id of “ayoung” and “Edna Frank” with an external Id of “efrank”

Continue reading

Posted in Development, Salesforce | Tagged , , | Leave a comment

Table Header in PDFs with Visualforce

Table header in PDF
One of the problems I had with the way that we generated the PDFs in previous Battle Station Invoice posts was that the table header wasn’t repeated for long lists of supplies or resources that continued on the next page.  There’s a simple way to add the table header for PDFs generated in Salesforce using the flying saucer mark-up but that won’t generate the table header correctly for us.  It seems that the -fs-table-paginate tag does not play well when combined with a Visualforce component so we’ll need to take a bit more of a native CSS approach.

NOTE: If you are doing this with plain Visualforce and apex:pageBlockTable, the -fs-table-paginate is the way to go.

Continue reading

Posted in Development, Salesforce | Tagged , , | Leave a comment

GlobalPicklist changes in Winter ’17

Like many companies, we have a deployment process in place to handle changes in seasonal releases in Salesforce so that when a sandbox is ahead of production, we can still deploy to both without having to wait for production to be updated.  Then, after both the release hits production, we go through a manual process of updating the API (primarily the ant-salesforce.jar) and the metadata to the most recent API version.  Typically this just involves updating the jar and updating the API version in the request, pulling down the updated metadata and writing it to SCM.  However, with the Winter ’17 release we saw a problem trying to deploy our GlobalPicklist files after updating the API.

Continue reading

Posted in Development, Salesforce | Tagged , , | Leave a comment

Japanese Users and Reports

There are lots of times where working with Salesforce would be so much easier if it weren’t for the users.  But, they’re the reason I still have a job, so you’ve got to put up with them.  One of the problems with users is they tend to like to live all over the world and they all have their own ways of working and cultural eccentricities.  One of the ones that has caused us grief in the past (both in Apex and in reports) is the fact that Japanese users in Salesforce default to “Lastname Firstname” when using the Name field on Users.   Now, this in and of itself is not really a problem because lots of reports are written for a single user or for a relatively small group of users (such as others in the same geographical location).  Where this becomes a problem is when locales get mixed with reports and all hell breaks loose.

Continue reading

Posted in Development, Salesforce | Tagged , , | Leave a comment

2016 Tuna 200 Race Report

This will be the first time I’ve written a post like this, so if it’s terrible, I’m sorry.  This post will be not related to Salesforce work at all so don’t feel obligated to read it if you’re expecting Salesforce stuff.

2016 marks the 3rd year that I’ve participated in the Tuna 200 and the 5th time I’ve done a endurance relay race.  I thought I’d take a moment to record how this year’s race went, what worked well and what I would change for next year

Continue reading

Posted in Off Topic | Tagged , , , | Leave a comment

Child Package: Extending a Manage Package

child package
In an effort to try to reduce the amount of code in our base repository we’ve been looking at writing managed packages that we install in our production org and then delegate the development and maintenance of these packages off to other teams.  Being a Open Source company we also want to try to offer what work we’ve done to other people.  However, not everything we want this package to do is useful outside of our business.  To solve this, we’re releasing the base package and then creating a private child package to hold most of our business logic and custom fields.

Continue reading

Posted in Development, Salesforce | Tagged , | Leave a comment

Dreamforce recap

So it’s been a week since the end of Dreamforce 2016 and I’ve had some time to soak in what was talked about.  This year my task for Dreamforce was to go and get some pretty specific answers.  So, instead of talking about everything that happened at Dreamforce and what I think about it, I’m going to talk about the three things I was tasked with looking into.

Continue reading

Posted in Development, Salesforce | Tagged , | Leave a comment