Using scripts and snippets

So far you have been using wizards to create personalized and dynamic content. The wizards are dialogs that hide the underlying script code. You can see this in any script wizard when you click the Expand button. This button opens the Script Editor which lets you edit the script directly.

The Script Editor allows to select elements in a template and apply an action to them. The selection is not limited to items inside sections; scripts may also control other elements, such as elements on master pages.

Actions include changing styles and formatting, hiding, or removing elements, replacing elements and injecting content (from HTML snippets, for example).

In OL Connect Designer all scripts are written in JavaScript, a scripting language that was originally developed to create interactive web pages. For this chapter you don’t need to know anything about JavaScript – you may copy the script - but it will pay off to learn the basics. Many books are published about this subject and many websites provide tutorials, code snippets and other resources (Google is your friend).

This chapter explains how to write your own script, without a wizard. The script will insert part of a snippet (a small HTML file) in the template, depending on the value of a field in the record set.

1. Importing a snippet

The company, OLSG-Mobile, has several offices. This exercise shows how to import a snippet that contains the addresses.
Snippets are imported in much the same way as images are imported.

  1. Locate the snippet olsg_address.html, provided with this tutorial.
  2. Copy the snippet into the Snippets folder in the Resources pane. (If asked, click OK to accept the encoding.)
  3. Double-click the new snippet to open it in the workspace.
  4. Click the Source tab at the bottom of the workspace, to view the HTML of the snippet.

Every paragraph in this snippet has an ID that is identical to one of the values used in the province data field, as you can see in the Data Model pane. In the following exercise these ID’s will be used to select a paragraph from the snippet and insert that in the template.

2. Inserting a snippet via script

In this exercise you will learn how to write a script that fills the box on Master page 1 with a variable address: the address in Ontario or the address in Québec. A customer living in Ontario should see the Ontario address. All other customers should see the address in Québec. The two addresses are stored in the snippet that you imported in the previous exercise.

  1. Open the Master Page that contains the address box.
  2. Select the box (div) using the breadcrumbs.
  3. Give the box an ID: on the Attributes pane, in the ID field, type office.
  4. Right-click the box. Make sure not to right-click the text inside it.
  5. Choose New Script from the shortcut menu. The Script Editor appears. The name and selector of the script are added automatically. The ID of the box is used as the script’s selector.
  6. Change the script name to Change Company Address.

  7. Add the following script.

    Copy 
    var office = loadhtml("snippets/olsg_address.html", "#" +
        record.fields.province);
    results.html(office);

    In Preview mode and when output is generated, this script will read the value of the province field in the current record. It will load the paragraph that contains the address of the office in that state value from the snippet and insert that in the template.

    Note: The functions used in this script are documented in the Designer Scripts API in the online documentation.

  8. Click OK and switch to Preview mode to see if the correct address appears in the template.