Archive for the ‘Components’ Category
Salesforce: A better way to work with jQuery selectors and Visualforce Component Ids
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!
Announcing the Salesforce Handbook
Recently, Jeff Douglas and I saw the potential for a beginner’s book – aimed at business owners, analysts and developers, that comprehensively documents Salesforce and Force.com. There is a tonne of documentation out there and we thought “Wouldn’t it be nice to have a handbook that lightly summarised the most important areas of the platforms as well as offering some best practise advice”. We mulled it over for a time, and today we’d like to announce that we’re currently writing:
The Salesforce Handbook
A newcomer’s guide to building applications on Salesforce.com and the Force.com Platform.
Hand-in-hand with the book we’ll be publishing content from the book on a WordPress site. Here you can expect to find excerpts from the book, but also content that supplements the book e.g. areas that’ll serve as best-practice hubs with links to official documentation, blog posts that rock the party, and even superb discussion forum threads.
We’d love to get your feedback on the book as it progresses, but for now you can checkout the announcement and let us know what you think of the idea.
DML currently not allowed
This almost belongs in my sarcastically titled, “Meaningful Error Messages ..” series, but as it has traceable causes, I thought I’d write something up on it’s most frequent causes (I meant to write this up a few months ago, but it slipped my mind (find it in your heart to forgive an ol’ developer) and now I think it’s time the world knew).
‘DML currently not allowed’, what could that mean? Well it means that DML isn’t allowed. And that it’s not allowed right now, but with the slight promise that given time, it will be allowed. Often in the past, hoping against hope, I kept on pressing that button/link/onclick-area, but the cloud never changed it’s mind. With a sigh I constructed the google-search query and began trundling through the results. Read the rest of this entry »
Flickr + jQuery + Salesforce = Awesome^5 [Part 2]
Okay software developing enthusiasts, I’m back from Paris (you didn’t know I was gone did ya?), I’m a year older and culturally, I’m richer (well I’d like to think so at least). It’s time to complete our two-part series on integrating disparate systems using the most-excellent combination of web services, jQuery and the Force.com platform. In part 1 we learnt how to connect to a third-party endpoint (Flickr in our case), and consume their SOAP-based web services. Now we’re going to jazz it all up with our spiffy jQuery gallery carousel. Let’s have another look at where we want to be at the end of this all,
OOP in the Salesforce Cloud – ReCaptcha Revisited
Can I get a OOP OOP?! That’s right folks, OOP is alive and well on the Force.com platform, and over the past few months I’ve had some pretty thrilling experiences implementing projects using those trusted sidekicks Encapsulation, Polymorphism and trusty ol’ Abstraction. There is some pretty sweet documentation on the subject, but I thought I’d demo something supercool I learnt by combining two articles from the Force.com wiki. Read the rest of this entry »
Visualforce & Dynamic CSS
When I started working on the Force.com platform CSS was an area that made me sad a bit. Deep down. Overriding the Salesforce CSS is a nightmare and I would recommend you don’t begin the dark and daunting journey down that path. Rather start afresh, you’ll thank me later.
That said, dealing with CSS on the platform can still be a timeconsuming task. Especially if you are incorporting images into your pages using CSS. My initial process was something similar to this:
- Create a stylesheet and some styles. Hopefully you’ve done a good job because you have no way of quick-previewing the result.
- Include said stylesheet and all referenced images in a zip file. Take care to preserve the directory structure so that you can reference all stylesheet and image files correctly.
- Upload the zip file as a static resource.
- Create references to the stylesheet in appropriate pages.
- View page. Realise you need to move one of your outputPanels 3px right. Be sad. Deep down. Goto 1.
The Silver Lining 