Using JavaScript

JavaScript files, libraries and frameworks can be added to a template, primarily for use in Web pages and Capture OnTheGo Forms.

Which kind of library or framework you'll want to work with depends on the type of features you really desire. For a bit of help with that and a few examples, see this how-to: Using external libraries.

Some JavaScript files are added automatically:

  • When you create a template with a COTG Template Wizard (see Capture OnTheGo template wizards), the Designer automatically adds the jQuery library and the COTG library: cotg-2.0.0.js. This also happens when you add a Capture OnTheGo (COTG) element to a template that you didn't start with a COTG template wizard. For more information about this plugin, see Using the COTG plugin: cotg-2.0.0.js.
  • Capture OnTheGo and Jumbotron template wizards automatically add the Foundation files v. 5.5.1 to the resources of the template. For more information about the use of Foundation in the Designer, see Using Foundation.

It is possible to open and edit any JavaScript file in the Designer: select File > Open, select All files (*.*) as the file type and then select a JavaScript file.

Adding JavaScript files to the Resources

Adding a JavaScript file

To add a JavaScript file to the resources:

  • Right-click the Javascript folder on the Resources pane, and click New Javascript. Double-click it to open and edit it.
  • Alternatively, drag and drop the JavaScript file from the Windows Explorer to the JavaScript folder on the Resources pane.

Next, include it in a Web page; see Including a JavaScript file in a Web context.

Adding a remote JavaScript file

A Remote Javascript Resource is a file that is not located within your template but is hosted on an external web server (generally called a CDN). When generating Web output, these files are referenced in the web page's header and are served by the remote server, not by the Connect Server module.

There are a few advantages to using remote resources:

  • These resources are not served by your server, saving on space, bandwidth and processing.
  • Using a popular CDN takes advantage of caching - a client having visited another website using that same CDN will have the file in cache and not re-download it, making for faster load times for the client.

To add a remote javascript:

  1. Right-click the Javascript folder on the Resources pane, and click New Remote Javascript.
  2. Enter a name for the file as it appears in the Javascript resources. For better management, it's best to use the same filename as the remote resource.
  3. Enter the URL for the remote resource. This must be a full URL, including the http:// or https:// prefix, domain name, path and filename.
  4. Optionally, check defer or async to add the async or defer attribute to the <link> element in the <head> of the segment.

    Defer postpones the execution of the script until the page has finished parsing. This attribute is required by APIs like Google Maps.

    When async is checked, the script executes asynchronously with the rest of the page (while the page continues the parsing).

    When neither option is checked, the script is fetched and executed immediately, while the parsing of the page is paused.

  5. Optionally, for a Capture OnTheGo Form, you can check Use cached Capture OnTheGo resource, to prevent downloading a remote JavaScript file again if it has been downloaded before. The file should be available on a publicly accessible location, for example: a folder location on a corporate website, hosted by a CDN (Content Delivery Network) or shared via a Workflow process.

In Workflow, when using the Create Web Content task, check the Embed All Resources option to download and embed all remote resources. (See Workflow Help: Create Web Content.)

After adding the remote file, you may right-click it and select Download Resource. This allows you to maintain a central file, from which you can quickly download a copy to your template without having to copy & paste.

Popular hosted frameworks on CDN networks are:

Using JavaScript files in a template

Including a JavaScript file in a Web context

To link a JavaScript file to the Web context, or to a certain Web section or COTG template:

  1. On the Resources pane, expand the Contexts folder, and then either right-click the Web context, or expand the Web context and right-click a Web section.
  2. Click Includes.
  3. From the File types dropdown, select JavaScripts.
  4. The available JavaScript files are listed at the left. Use the arrow buttons to move the JavaScript files that should be included to the right-hand list. Using the Up and Down buttons you can change the order of the files, too.
  5. Click OK.
JavaScript files that are linked to (i.e. included in) a section show a chain icon in the Resources pane (see Resources pane).
Any JavaScript files included in a section run after the scripts in the Scripts pane.

Using JavaScript in other contexts

Email clients do not support JavaScript. Therefore, Email contexts cannot include JavaScript resources.

When a JavaScript file is included in a Print section, the Designer itself acts as the browser. When generating Print output, it runs the JavaScript after generating the main page flow contents and the pagination. So it is possible to change the Print output by a JavaScript; for example, to add a barcode that includes the page number to each document. A warning is appropriate, however: changing the DOM may change the page flow and doing so at this point may result in bad output and/or serious errors or a crash of the software.

Previewing a template with JavaScript resources

A template with JavaScript resources can be viewed on the Preview tab, just like all other templates. A Web section can also be viewed on the Live tab.

Scripts in the Resources pane are interpreted by an internal browser. The browser engine which is used as of version 2018.2, Gecko 38, is compliant with the ECMAScript 5 language specification.
This means that scripts using features described in ECMAScript 2015 (aka ES6) - such as the keyword let - will fail in the Preview and Live tab of the Designer. Nevertheless, they should work fine when processed by a (modern) client browser. (See for example the browser compatibility table at the bottom of the Mozilla documentation for "let": Mozilla documentation.)