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

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 below.

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 asyncto 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.)

Popular hosted frameworks on CDN networks are:

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.

  
  • Last Topic Update: 26, March, 2018 04:10 AM
  • Last Published: 23, May, 2019 01:55 PM