Loading a snippet via a script

It is possible, and often very useful, to load a snippet dynamically.

Create a script (see Writing your own scripts). In the code use the following function:

  • For an HTML snippet: loadhtml(‘snippets/nameofthesnippet.html’).
    To insert the snippet in the content at any position where the script's selector is encountered, write results.loadhtml('snippets/nameofthesnippet.html').
    Make sure that the file name is exactly the same as the file in the Snippets folder. If the file name isn’t correct, the snippet will not appear in the template.

  • For a JSON snippet: loadjson(‘snippets/nameofthesnippet.json’).

  • For a Handlebars snippet: see Handlebars in OL Connect.

Tip: To insert the code to load a snippet even quicker, you can:

  • Drag a snippet into the Script window. The function that loads the script - loadhtml() or loadjson(), depending on the file type - will automatically be added, including the file name.

  • Right-click a snippet and select Copy Resource Location to copy the relative path of the snippet to the clipboard. It may then be pasted into a script.

Remote snippets are retrieved in the same way, except that the file extension should be .rhtml instead of .html. If it is a remote JSON snippet, the file extension is .rjson.
Again, note that the name of the snippet must be exactly the same as in the Snippets folder.

For more examples, see loadhtml() and loadjson().

Tip: The techniques described in this topic are demonstrated in a how-to: Using a selector to load part of a snippet.

Loading part of an HTML snippet

When a snippet contains a part that can be identified by a selector, that selector can be used to load that part of the snippet into a template.

In script, use the following code:

Copy 
results.loadhtml(‘snippets/nameofthesnippet.html’, ‘selector’)

See loadhtml() for more information about this function.

Loading a snippet, depending on the value of a data field

To load a snippet depending on the value of a data field, you have to add a condition to the script.

Example: The following script evaluates if the value of the LANGUAGE field in the record is ‘En’. If so, the snippet is added to the content.

if (record.fields.LANGUAGE == ‘En’) {
results.loadhtml(‘snippets/nameofthesnippet.html’);
}

Loading part of a snippet, based on the value of a data field

When a snippet contains a part that can be identified by a selector, that selector can be used to load that part of the snippet into a template. It is possible to do this, based on the value of the data field. This is easiest when the selector matches the value of a data field.

Example: The following script reads the value of the LANGUAGE field in the record and uses that value as the selector in the function loadhtml(). If the snippet contains an HTML element with this ID (for example, <p ID=”En”>), that HTML element will be added to the content:

var language = record.fields.LANGUAGE;
results.loadhtml(‘snippets/nameofthesnippet.html’, ‘#’+ language)

See also: Standard Script API.

Tip:

An easy way to group content in an HTML snippet is putting each part in a container and giving that container an ID, for example:
<div ID=”EN”><p>This is text for English customers.</p></div>

Use the function .children() to load the contents of the container, and not the container itself. For example:

results.loadhtml(‘Snippets/myfooter.html’, ‘#EN’).children()

This script loads the paragraph of the example (<p>), but not the container itself (<div>).

Load a snippet and insert variable data into it

The following script loads part of an HTML snippet based on the value of a field, and then finds/replaces text with the value of a field before inserting the content into the document.

Copy 
var promoTxt = loadhtml('snippets/promo-en.html', '#' + record.fields['YOGA']); 
promoTxt.find('@first@').text(record.fields['FIRSTNAME']);
results.html(promoTxt);