QuickBase Straight Up

Disclaimer: If you don’t already have some familiarity with coding in QuickBase, you may find this article to be a bit confusing. However, we recommend that you read it anyway - it could end up making a big difference to your company.

Recently, with little fanfare, QuickBase began to include jQuery, the most popular client-side Javascript library, in all applications. You’d have to be eagle-eyed to catch this, though, because there’s no obvious indication of the change. To see for yourself, take a look at the source code of any page on QuickBase.com. Near the top, you’ll notice a block of code that looks like this:

<script src=”/js/utils.js?jst=2″ type=”text/javascript”></script>
<script src=”/js/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script src=”/js/jquery-ui-1.8.custom.min.js” type=”text/javascript”></script>
<script src=”/js/jquery.ui.autocomplete.js” type=”text/javascript”></script>

Et cetera.

If you’re not in the know about JavaScript, chances are high that your reaction to that text is a mixture of revulsion and dread. But if you are familiar with the versatile web scripting language, you’re probably drooling over the wealth of newfound possibilities made available by the inclusion of jQuery in QuickBase. If this is the case, please take a moment to clean and sanitize your keyboard. We’ll wait.

So, non-droolers, let’s try to demystify this situation, beginning with the basics. A JavaScript library is a collection of pre-written controls for JavaScript, intended to simplify the coding process by providing shortcuts and expanding the functionality of the scripting language. jQuery is one such library, and its ease of use in areas such as event handling combined with its integration of modern browser technologies such as Ajax has made it the most popular of its kind.

jQuery allows you to create content that is asynchronous, meaning it can change without requiring the page to be refreshed. Application dashboards and pages are the main places where this sort of code can come in handy. Take a look at our sample app to see just one example of how jQuery can enhance your application by using collapsible divs - regions of the page containing text or images that can be hidden or revealed with a single click.

 

You can also spice things up with jQuery menus, tabs, animation and more. You can create an interactive date picker for your dashboard with only five lines of code. You can create slideshows, drop-down menus, fade-ins and fade-outs, and much more! Check out this article if you’re in need of inspiration.

To supplement jQuery’s out-of-the-box functionality, Intuit has also opted to include some plug-ins that make the library even more versatile. One such add-on is jgrowl, a lightweight notification system that creates text bubbles which float over the page content. jgrowl notifications can be implemented with a line of code as simple as:

<a onclick=”$.jGrowl(’Hello!’);” href=”javascript:void(0);”>Click here</a>

creating a link which yields the following friendly little box:

Plenty of resources are available to help you move beyond the basics of jQuery and JavaScript as a whole. Once you begin to discover the functionality and flexibility that jQuery brings to your dashboard, you’ll be sold. And of course, drop us a line if you have some wisdom to share, or even if you just want to brag about your coding genius. We’d love to hear from you.