Oh my god. It's full of code!

jQuery, Apex, and Visualforce – 2 Getting Started

So by now you are eager to build something, but what? Well, since I just finished it, and it’s a good example of all these technologies working well together, I say we build a calendar, and since it’s my blog, that is what we are going to do. This ain’t no democracy. I’m sure you’d like to see a demo of this thing first, unfortunately I don’t have my own dev environment, and I can’t really show you the one I built for work, but trust me, it’s cool. It’s basically a google calendar that pulls data from an object in Salesforce and display them in a nice format. It supports filtering and other stuff.

If you just want the code, or want the whole thing so you can more easily follow along you can download all the required files here <- UPDATED!

There are a lot of steps, so anything that I think you should probably know how to do, I'm going to kind of gloss over. If you need more details, please feel free to ask in the comments. If explain everything step by step, this is going to end up being a freaking book.

1) Create a new site. Head to your sandbox and create a new Salesforce site, call it whatever you like. Make sure you mark it as active. You don't need to do anything else special in the configuration really. Great now you have a site to host your pages from.

2) Create your event object. I use a custom object called events__c (yes I know it should just be event__c but that name was already taken). On this object include at least 2 fields, 2 datetime fields, one for start time, one for end time. I would recommend including a few other things to, maybe a notes field, and some other pieces of data. Throughout the rest of the example, I will be using the following field names, which exist on my events__c object. If you want to be able to just copy and paste my code without having to modify much anything, create fields with same names.

  • Study_N__c
  • status__c
  • Start_Date__c
  • End_Date__c
  • Project_Manager__c
  • Project_Associate__c
  • Project_Name__c
  • ProjectNumber__c
  • Client__c
  • Start_Date__c
  • End_Date__c

3) Create a new VisualForce page. Use your preferred method of creating a VisualForce page (IDE or web UI, whatever floats your boat). Call it calendar (yes you can call it something else, but I’ll be referring to it as calendar). Set the options for the page like this

<apex:page standardStylesheets="false" expires="1" cache="false" showHeader="false" sidebar="false" standardController="Events__c">

That just says, don’t apply the standard stylesheet, don’t cache it (at least for while we are developing it, don’t show the header or sidebar, and set the source of data to Events__c. You can replace Events__c with whatever object you have that is going to be the source of events on your calendar.

4) Include the jQuery library. If we are going to be using jQuery we need to include it. You can either host it on your own server, upload it to Salesforce, Microsoft hosts it on their CDN, and so does Google. I use the google hosting personally. To do that put the line

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

in your visualForce page. The jQuery library will now be available to this page.

5) Building the calendar. One of the great things about jQuery is all the plugins. We will be using the fullCalendar plugin. It’s homepage can be found here http://arshaw.com/fullcalendar/
See that demo on the homepage, that is very much what ours it going to look like, but even better.

Download the source and save it somewhere handy. I really seriously recommend reading through the fullCalendar documentation just so you get a feel of how it works and what it can do.

To be able to use fullCalendar, we of course need to put all it’s resources somewhere they are available. Thankfully Salesforce lets us do this with their “static resources feature”. All you have to do is zip up everything you want to use and upload it. Personally, I didn’t really like the way the files were organized in the original fullCalendar. I also wanted to include some additional resources that we’ll get into later. You can download my revised stripped down package of the resources here.

6) Upload the resources. Now you have the adjusted resources (really all I did was reorganize a few files, remove some unneeded clutter, and add a few more files we are going to want later, I didn’t adjust the actual file contents at all) we need to get that into Salesforce. Click static resources, and add this package. Call it calendarResources. I have the cache control set to public, not sure if it matters or not. I didn’t use a namespace prefix either. Now this package is available. You can access it’s contents using the {!URLFOR apex function. Include the following lines in your visual force page to get the needed resources.

<link rel='stylesheet' type='text/css' href="{!URLFOR($Resource.CalendarResources,'theme.css')}" />
<link rel='stylesheet' type='text/css' href="{!URLFOR($Resource.CalendarResources,'fullcalendar.css')}" />
<script type='text/javascript' src="{!URLFOR($Resource.CalendarResources,'fullcalendar.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.CalendarResources,'dragresize.js')}"></script>

7) Now your VisualForce page will include all the required resources to actually build the calendar, but we still need to include the HTML where we want it to display. In the body of your VisualForce page (which is really just an HTML document at this point) include the following.

<div id='calendar'></div>

That is where fullCalendar will load it’s data once we hook it all up.

So far we have created a site to host the calendar, created the front end page, uploaded the required resources and got some of the framework in place. Next issue we’ll work on writing the data fetcher component, and getting the data into the calendar.

At this point you don’t really have anything functional, so if you have been following along and you try to get to your page, don’t feel bad if it doesn’t do anything, that is expected. We haven’t included the page in the site, or set up the required javascript. You probably cannot even load the page at this point.

14 responses

  1. Excellent article! How does the story end? I look forward to your next installment.

    May 17, 2010 at 8:45 pm

  2. Holy cow, someone actually read this thing? Haha, well now I have to remember how I did this and try to finish it up. I’ll get around to writing the next part as soon as I recall how I did it in the first place 🙂 Thanks for the compliment.

    May 17, 2010 at 8:48 pm

  3. Very nice! Was looking for cool calendar to try and plug into Salesforce.com. Apex and Visualforce aren’t that bad. Check out my blog (http://blog.jeffdouglas.com) for a bunch of articles and code samples. BTW… I started with ColdFusion 2.5. It IS the best.

    August 7, 2010 at 12:39 pm

    • Hey glad it helped you out. Yes, Coldfusion rocks. It’s an extremely useful tool and works really well integrated with salesforce.

      August 7, 2010 at 4:46 pm

  4. timm

    any chance you have this code available still? would love to go through it – vf/apex noob here

    January 17, 2011 at 10:20 pm

    • I can digg it up. I a m just leaving work now but I’ll post it tomorrow morning.

      January 17, 2011 at 10:44 pm

  5. timm

    great! thank you!

    January 18, 2011 at 2:30 pm

  6. Devendra

    Is vf,apex code still available? I would like to go through it.

    November 5, 2011 at 5:38 pm

    • I am trying to find some file hosting for my projects. As of right now I don’t have it available, but I should soon. If you’d like I can send you an email when I find a place to host my stuff.

      November 5, 2011 at 7:47 pm

      • Devendra

        Yes, i would like to go through those files. Hope you get soon. Its an urgent requirement.

        Thanks and Regards,
        Devendra S

        November 7, 2011 at 4:01 pm

  7. Jeff

    Hello! This looks great. Do you have a working link for the source code? The link in the first paragraph is broken. Thanks!

    December 13, 2011 at 2:51 pm

  8. I think I am actually going to rewrite this using Apex remoting. I feel bad even distributing this version because it is super shitty now compared to what could be done. I’ll still see about hosting it soon.

    December 13, 2011 at 3:36 pm

  9. chandu

    HI,

    Its a grt help but the link to the resources is broken. Can u pls send the right url?

    Thanks.

    April 9, 2012 at 9:27 am

  10. Anonymous

    Whaer is the code

    August 20, 2012 at 8:39 pm

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s