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.

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 are 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 bandwidth.

Including jQuery as an internal resource:

1. Download jQuery from http://jquery.com/download/
2. Import the .js file (such as jquery-3.4.1.min.js) into your Web template (in Connect Designer) 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. (You can also right-click on the section and choose Includes… to see what resources are included.)
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-3.6.0.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-3.6.0.min.js, and click OK.
4. Create the JavaScript file and preview, as in 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.13.0-rc.3/jquery-ui.min.js
2. In Designer, right-click the JavaScript resource folder and click New JavaScript > Remote JS file… .
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.13.0/themes/ui-lightness/jquery-ui.css
5. In Designer, right-click the Stylesheet resource folder and click New Stylesheet > Remote CSS file… .
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.
8. Right-click on the Web Section and choose Includes… to open the Web Section Properties. Make sure that jquery UI appears lower than jquery in the include list, since jquery UI requires jquery.

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.

In order to test if jQuery UI works properly, you can copy and paste this HTML code in the Source tab (remove all other HTML code):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style><script>
  $( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  } );
  </script>
<div id="draggable" class="ui-widget-content">
    <p>
        Drag me to my target
    </p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>
        Drop here
    </p>
</div>

Now, if you click on the Live tab, you should see a functional drag-and-drop element. If this is the case, then jQuery UI works properly.