Using a selector to load part of a snippet

Learn how to load a part of snippet and add the retrieved part to your document using the loadhtml() scripting command. A snippet is a small, ready-to-use piece of content in a file. In this example we use a snippet that holds address information for three ‘office’ locations. Each address is placed in a paragraph where line breaks are used to place the address segements on seperate lines. The paragraphs have an ID assigned which allows the loadhtml() to identify the element and extract the information.

For more information on snippets, refer to the OL Connect Designer online Help.

Steps

We are going to retrieve a part from this snippet based on certain data field value. In this example, we can use the “province” field to retrieve the corresponding text.

Preparing the snippet

  1. Right-click on the Snippets folder and choose New snippet > HTML file. Rename the snippet offices.
  2. Double-click on the snippet. Create three paragraphs, one for each of the mentioned office locations. Enter the text as shown image above. Use Shift+Enter to create line breaks within the paragraph.
  3. Place the cursor in the text of the first paragraph and select the p element in the breadcrumbs bar. The paragraph is now selected. Enter the name of the respectieve province in the ID field of the Attributes panel and hit enter. Repeat these steps for the other paragraphs.

Save the snippet and toggle back to the document.

Creating the script

We achieve this via scripting using the selector option in the loadhtml() function. The steps are as below:

  1. Insert a new positioned box and place it to the right side of the page.
  2. Set the ID attribute of this box to e.g. location and hit enter.
  3. Click the “ID:” label. A new script is created in the Scripts pane and the selector is automatically set to #location, the ID of our box,
  4. Enter the following script to load the offices snippet:
let province = record.fields.province
let office = loadhtml('snippets/offices.html', '#' + province )
results.html( office )

Save the script and switch to the preview mode (click the Preview tab). Browse through the records to see the result.