jQuery Customizations for WebCenter

jQuery has become a staple for a lot of the customizations in WebCenter Content. In fact, I can’t think of a customization over the past couple years that I haven’t used jQuery in some form. I’ve outlined below a few of the basics to get jQuery running on your content server and a couple examples on how we use it. For those of you mumbling “jQuery is just javascript”, well you’re right, but who in the world would pick an axe to cut down a tree when you’ve got a perfectly good chainsaw to do the work for you? Javascript is still great for the little stuff, but jQuery is a much better toolbox.

First things first, you need a place to include your jQuery and you customizations. We generally create a brand new component, which I won’t cover here, but you’ll find all the  information you need at oracle.com. You’ll also need to download the latest and greatest jQuery here:

http://www.jquery.com/download

After downloading the jQuery source you’ll need to put it on the server so the client can access it. We usually store these files with the component we create to allow easy access.
Once you’ve created your new jQuery customizations component you’ll simply need to overwrite the std_html_head_declarations like so:

You will need to make a few small changes to setup the source highlighted in red, but this is pretty straight forward. (it’s the location of those jQuery files you’ve just downloaded)

Now that all the pieces are in place to use jQuery, let’s move on to some quick and easy customizations.  Say you have a pretty basic UCM check-in screen: Content ID, Title, Author and any other information you need for a standard check-in. This is great, but your users don’t follow the standard you’d really like them to follow for Titles. This can be difficult to regulate and the default profiles and rules just don’t cut it. With jQuery, we could simply add the following code and it would pop-up a message when the user clicks on the title field:

$(document).on("click", "input[name='dDocTitle']", function(){
     alert("Please make sure to add ‘FB_’ to the beginning of
     your titles.");
});

While this may look confusing the code is very straight forward. It basically states that when the document is ready for check in, add a click event to the dDocTitle input, and when this click event occurs send an alert to the user. With such a minimal amount of code we were able to let our users know they need to structure their titles to start with ‘FB_’.

This is great and almost everyone is following the process, but they are getting really frustrated with all the alerts. Here is some code to check if they have added the ‘FB_’ and alert them if they haven’t:

$(document).on("focusout", "input[name='dDocTitle']", function(){
     if(jQuery(this).val().substr(0,3) !== "FB_"){
          alert("Please make sure to add 'FB_' to the beginning of
          your titles.");
     }
});

With just a simple if statement to check the beginning of all our clients values when they focus off the item we can alert them of their mistake. To take this one last step further, we can add the ability to check for the correct value. If it’s not there, it would be added instead of warning our users by simply adding this section inside of the ‘if statement’ above:

$(document).on("focusout", "input[name='dDocTitle']", function(){
     jQuery(this).val("FB_" + jQuery(this).val());
});

While regulating what our users enter can be very difficult in most situations, jQuery makes regulating this easy. On top of that it removes any server side work which can take a lot of expensive resource time for even the simplest validation. I encourage you to give jQuery a try and see what other solutions you can come up with.