Back to all How-tos

Using external librairies and frameworks

When it comes to offering choice, nothing beats the Internet. There are so many different frameworks and librairies out there, whatever you think you want to do is probably already available as a simple library you can add to your template with a single line of code. Why do you think we chose HTML, CSS and JavaScript as our new technology choice? This is why.

A fair warning
Most of what is written here is about doing Web Front-End Development, meaning that many of these things apply only, and exclusively, to Web contexts. Email does not (and will not in the forseeable future) support JavaScript, and our support in Print output is minimal at the moment.

Choosing your framework

Of course, you can’t have everything served to you in a silver platter. So, first you need to choose which kind of framework you want to work with, depending on the type of features you really desire. Of course, listing all the frameworks would take a bit of time, so you’ll have to do a little bit of research to decide which one you will use. As a starting point, I offer you a Google Search result with some relevant keywords. Why? Because the web changes, frameworks appear and disappear, and what’s true today might be replaced by something awesome tomorrow. So in reality, it really is up to you to decide what you prefer.

Adding a framework to your Template

So now that you’ve chosen your framework, it’s time to add it to the template. There are two ways of doing this: Internal resources and Remote resources. In this example we’ll add jQuery and jQuery UI, but any functional combination will do.

Internal Resources

Internal resources are files that can be included within your template and will follow along if it’s shared between different designers. It also does not require an Internet connection in order to generate Web output, as the files are right there. However, if producing Web output for clients, this means each and every time someone requests a page, these resources will be duplicated and served to the client individually, which can be a little more expensive on bandwith.

Including jQuery as an internal resource:

  1. Download jQuery from http://jquery.com/download/
  2. Import the .js file (such as jquery-1.11.3.min.js) into your template via Drag & Drop.
  3. Drag and drop the .js file from the JavaScript folder into the section within the Web context to ensure that it is included on output.
  4. Create a new JavaScript file and name it however you prefer (my_script.js, for example) and also drag it to the web section. Double-click on it to edit its contents and add whichever jQuery example you see fit. To view the result, either click on the Live view or the Preview HTML button to see it in the browser.

Here’s an example script to test out, which makes all paragraphs red (just for fun!):

$(document).ready(function(){
    $("p").css("background-color", "red");
});

Including jQuery as a Web/External resource:

  1. Copy the URL for the “CDN” version of the library. For jQuery, it’s http://code.jquery.com/jquery-1.11.3.min.js
  2. In Designer, right-click the JavaScript resource folder and click New Remote JavaScript.
  3. Paste in the address in the URL and enter a filename at the top, such as jquery-1.11.3.min.js, and click OK.
  4. Create the javascript file and preview, as Step 4 above.

Adding in jQuery UI:

When it comes to UI-modifying frameworks, there’s one little additional step: CSS. So, for jQuery UI, there are 2 separate files that need to be added, either through resources (downloading from http://jqueryui.com/download/) or the Remote version through https://code.jquery.com/ui/. So using CDN, for example:

  1. Copy the URL for jQuery UI CDN: https://code.jquery.com/ui/1.11.4/jquery-ui.js
  2. In Designer, right-click the JavaScript resource folder and click New Remote JavaScript.
  3. Paste in the address in the URL and enter a filename at the top, such as jquery-ui-1.11.4.js, and click OK.
  4. Copy the URL for a jQuery UI Stylesheet in the CDN: https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css
  5. In Designer, right-click the Stylesheet resource folder and click New Remote Stylesheet.
  6. Paste in the address in the URL and enter a filename at the top, such as ui-lightness.css, and click OK.
  7. Drag both the js file and css file to your web context. Make sure that jquery UI appears lower than jquery in the include list, since the former requires the latter.

OL® Connect’s “Web foundation framework” templates actually use Foundation to build its UI templates. Foundation is simply convenient because it does not require any JavaScript for most of its functionalities, but you are still free to choose.

Leave a Reply

Your email address will not be published. Required fields are marked *