Posts Tagged ‘JavaScript’
Salesforce: JavaScript Remoting – a different way of thinking
Remoting is awesome.
JavaScript Remoting for Apex operates in a very different paradigm from what you might be used to i.e. Visualforce pages have controllers and the two interact through action methods – where this might be a full form submission or some neat AJAX functionality. Remoting also calls controller methods but there is a gaping maw in terms of how the two work under the hood.
I’ve seen a few great articles on the syntax and example usage of JavaScript Remoting for Apex but when I started using it I came across a number domain differences that weren’t documented anywhere. Hopefully my list here will help you in the learning process. The best way to describe the new way of thinking is to examine the features set in contrast to “normal” Apex and Visualforce.
How JavaScript Remoting Differs
- Pass parameters naturally i.e. the call matches the method signature syntactically instead of requiring <apex:param/>.
- Action methods when called in “normal” Visualforce can only return NULL or a PageReference. Remoting allows you to return a wider range of data types, even objects and collections.
- Remoting methods have no access to the view state e.g. if a static variable is initialised to some value (outside the remoting method) a remoting method will see this as NULL unless it is re-initialised in that method! Conversely if a remoting method sets a state variable value the scope of that value is only within that method.
- It’s much faster. I’m building an application at the moment that is 95% backed by JS Remoting and when I show it to other developers they are struck dumb for at least 3 hours because of the speed.
- Neater debugging info in the browser console. Salesforce has done a great job of providing feedback directly to the browser’s console log.
- Each method call gets its own executional/transactional context i.e. fresh governor limits per call!
If I’ve missed anything please let me know and I’ll add it. Viva la knowledge crowdsourcing!
Salesforce: A better way to work with Visualforce Component Ids and JavaScript
Irregular Expressions
I get very sad when discussing this particular topic. There are a variety of ways of get Visualforce component Ids and using them in JavaScript but all of them keep me awake at night. Srsly. A commenter on one of my posts got me thinking about how we can do this better and I’ve come up with a way that I think is great. Hopefully you’ll agree.
This post means that my older posts here and here are now retired in favour of this method.
If the world was on the brink of nuclear war with no clear path to peace what could you count on to save the day? Regular Expressions of course. If a meteor the size of Pluto was about to crash into Earth and Bruce Willis was too old to land on it and blow it up what could we count on to rid us of the troublesome rock. Yes that’s right, Regular Expressions. I think you can guess where I’m going with this.
jQuery has the ability to understand very simple regular expressions in it’s attribute selectors. The full documentation can be found here.
To solve our particular problem however the code is simple:
<apex:page>
<head>
<style>
a,span{
display:block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
$('#btn').click(function(e){
e.preventDefault();
console.log('The following element was found when looking for an id of \'output1\':');
console.log($('[id$=output1]')); /* Here's where we're grabbing the element. */
});
});
</script>
</head>
<apex:outputText value="She sells seashells by the seashore." id="output1"/>
<apex:outputText value="Peter Piper picked a pack of pickled peppers." id="output2"/>
<a href="" id="btn">Click me.</a>
</apex:page>
The important part here is the selector $(‘[id$=output1]‘) which says, “Find the id value that ends with ‘output1′”. This comes with a warning though! Do not duplicate the Visualforce Id that you give to your elements otherwise this piece of code will find all of them.
When I first wrote this post I used a selector extension library that gives you the full power of JavaScript-based regular expression but Ryan Fritts has rightly shown that the above will deal with 99% of use cases and is simpler. For those of you that need to deal with the extra 1% I’ve implemented a wrapper to regex selector as an example. It does exactly what jQuery is doing above and gives you access to the regex flags as documented here.
Thanks again Ryan!
Salesforce: Debugging JavaScript
Alert(). Old skool and not in a good way
I love JavaScript, and working within the Force.com Platform I’m always finding new ways that it can be applied to business needs. I know this is the case for many developers out there but I’ve seen that their typical development process is:
- Develop the JS code
- Create bug
- Include calls to the alert() method to troubleshoot
- Iterate
alert() is bad for debugging
I’m sure this process sounds familiar to many of you, but do you know what, the alert() method is a very weak way of troubleshooting. I abandoned it years back because of poor features such as outputting object representations as ‘[object]‘ or ‘[undefined]‘ – which doesn’t give you a lot to go on.
Meet console.log()
Modern browsers have access to a library called ‘console‘ which offers a far richer experience, and without the annoying pop-ups. The console.log() method accepts any JavaScript type as a parameter and will always give you detailed and sensible output. In the images below I’ve passed the method a variable representing a Div and the log outputs the entire DOM from the Div down. You can even pass it jQuery objects and it’ll output all of that object’s associated data!
Console. Unobtrusive with richer output.
Now that's what I call a debugger!
So where does it output to? On the console tab of course. I almost always use Chrome these days and you’ll find the console tab if you open Chrome’s Developer Tools. It’s similarly placed within Firebug for Firefox.
For those who’d like to learn more about the console library here’s an excellent article. There you’ll see that the library has far more to offer than just the log() method.
Debugging Custom JavaScript Button
A neat tip to remember is that console.log() is available wherever JavaScript is used on the platform. That means you can even debug the JavaScript you use to access the AJAX API through Custom Buttons!
Salesforce: Force.com Sites and Google Analytics
This is a cross-post from the Tquila blog.
My Favourite Chart Type
Not having analytics built into your public sites is much like having a Q&A site but not allowing people to answer. In this case some of the questions are:
- Where did you come from?
- How long did you stick around for?
- Where did you hang out on your visit?
Now I’m not going to debate which set of analytics is best but I did come across a few quirks when setting Google Analytics (GA) up for wesnolte.com that I suspect are fairly universal.
Build a Site
This of course is quite a big step and I’m going to assume you’re just about done. To get analytics up and running though you’re going to have to do a few extra bits.
Don't hack me pls.
- Sign up for a GA account, create a Website Profile and you’ll receive an Analytics Code. My code has been blocked out in orange in the image alongside, your code should appear in it’s place.
- Insert the standard Google Analytics Visualforce component into your page.
- Enter the same Analytics Code as above on the Force.com Site Detail page – the field is called “Analytics Tracking Code”.
If you go back to your Analytics home page and refresh you’ll see a little warning sign that tells you something is amiss – and it is but it’s difficult to figure out just what that something is.
S.O.S
The problem in this case is that the default robots.txt file for Force.com Sites blocks all bots. This is not a bad idea but it’s not obvious when setting all this up.
Michaelforce and myself seemed to have had these pains at the same time and he posted his findings here. You’ll need to apply step 3 from his post to allow GA to peek at your site.
Now in my particular case I did all of this and GA was still not able to access my site so I threw in the towel and coded the GA JavaScript straight into my page. A few days later however I realised that the robots.txt was probably caching so I ripped out that funky ol’ JavaScript, plugged the Visualforce component back in and BHAM! It worked. Now I know that exactly 5 people visit my site per day, and that 4 of them of from the UK 
Some Advice
My analytics are working a charm but I’ve realised there’s a snag. Since salesforce.com doesn’t allow you access to their nameservers you have to point your root domain to your Force.com Site using URL forwarding at the domain registrar’s side i.e. I can use a CNAME to point www.wesnolte.com to my Force.com site but wesnolte.com has to bounce to my registrars forwarding server before it finally hits the real site. What this means is that – to GA – the traffic directly to wesnolte.com looks like it’s all coming from one source, that is the forwarding server. The only way that I know to work around this is to get people to only use the www.domain.com form of your URL – not ideal I know.
Client-Side VisualForce Pagination with Pajinate
Pajinated DataTable
Pagination is an essential, and not so easy to implement user interface device that allows the developer to break long lists of items, or one very long item into sub-pages. I love the challenge that pagination brings (who doesn’t really) when developing efficient and reusable server-side code, but this article isn’t about that. Sometimes I need things done quickly, easily, and preferably with as little compromise as possible, and that’s what client-side pagination is all about. Read the rest of this entry »
Pajinate – A jQuery Pagination Plugin
Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content into multiple separate pages. Not only is it a simpler alternative to server-side implementations, the time between paginated-page loads is almost nil (up to a reasonable page-size of course).
Pajinate - A pagination plugin the whole family can enjoy!
Read the rest of this entry »
VisualForce Element Ids in jQuery selectors
I have retired this approach in favour of a much neater solution that can be found here.
This tricky topic had me puzzled for some time and in earlier posts I went the way of using CSS classes to identify DOM elements; but was always a touch dissatisfied with the solution. Not only is it less efficient – valid XHTML pages should only have one element with any Id, although CSS classes can be shared by many elements – but it also feels all hacky ‘n stuff. I’m a bit older now, a bit more experienced and I RTFM. Without further ado, here is why it’s tricky, and how to fix it. Read the rest of this entry »
Masking Input on VisualForce Pages
I am a developer and (at least as often) a (l)user. UI and UX design are important from both perspectives, and it’s important to bear this in mind whilst creating any application. What is this waffle all about? There are some platforms, based in yonder cloud that could tweak the tiniest of features, and make the lives of their users (and administrators) 1 x shed-load better. Until they do that, we’re gonna have to do it ourselves.
Let’s get specific. Typically, validation error messages provided by Apex and VisualForce are only apparent after form is submitted ( or when we’re on the last page of a 39-page wizard ). Of course some cases require that it be this way, but for other cases it’s like my (very) old professor used to say, “Jus’ don’t let em make the mistake in the first place boy *tongue-click*”. Heeding Prof. Swart’s advice, let’s see how we can easily do this. Read the rest of this entry »
Passing Apex values to Javascript Code.
For the sake of completeness, and because I’ve received a large number of hits from the googled phrase ‘pass apex to javascript’, I thought it would be appropriate for me to write an article detailing the converse of an operation explain in a previous post. Read the rest of this entry »
Passing Javascript values to Apex code.
It’s been a while crocodile. Truth be told I was working furiously on my Site’s Developer Challenge entry, and then I was just too pooped to post. I’m sure you were all waiting with bated breath for my next post.. nooooot.
Anyway, let’s get down to brass tacks. Quite often I’ve needed to manipulate variable values in-page(Visualforce) with JS, and then pass these modified values to Apex or a Standard Controller. Just as often I’ve simply dismissed the possibility and worked-around the issue. Recently I was speaking to a fellow who proposed the beginnings of a terribly smashing idea and thought I’d try my hand at a simple implementation. Read the rest of this entry »
