Skip to content

Lucit Template JavaScript Guide

Overview

Lucit templates are very powerful and expose nearly limitless functionality through scripting that you can add to any template.

Lucit handles this in a controlled way in order to increase the re-use and flexibility of templates, prevent them from crashing, improve debugging, and generally make them safer and more portable.

Editing JavaScript

To edit the JavaScript for any template, you take the following steps:

  1. Edit a template
  2. On the Canvas area, in the Action Bar at the bottom, click on the <> icon (Less Than / Greater Than).
  3. The Code Editor dialog will open
  4. Click on the JS tab.

The JS tab is where you add your custom JavaScript code to the template.

Registering JavaScript Functions

In Lucit, you cannot directly write JavaScript into the JS tab without wrapping it in one of three different types of registration callback functions.

These are:

  • Designer Functions – These accept a name, some data, and return a single string value. These are used when building Custom Fields. See the Custom Fields Guide.
  • Text Formatting Functions – These functions accept a name, a DOM element, and a data-value, and can operate on the element. These also appear in the Format drop-down in the Template Designer user interface. See the Text Formatting Functions Guide.
  • Designer Formatting Functions – The most powerful functions. These accept a DOMElement, a data value, a data object, element settings values, and a CSS selector. These functions are designed to operate on one or more elements matching the CSS selector. See the Designer Formatting Functions Guide.

Any code that you try to add outside of these functions will be disallowed and will not run in the template.

How to choose which registration function to use

Designer Functions

Use these functions when you are building a Custom Field and you need more functionality than is provided by the fnValue and fnConcat functions.

Designer Functions accept parameters and return a string value that is then used as the data-value for a Text or Image element on the canvas.

Designer Functions do not provide any styles or actions. They simply return a string value.

Text Formatting Functions

Use these functions when you want to create a User Selectable Text Formatting Function that provides formatting or styles not available in the default list of available text formatting functions.

These functions present themselves to template users in the Format drop-down on their template and can apply to Text elements only.

These functions have access to the DOMElement and can operate on it and its children.

Designer Formatting Functions

Use Designer Formatting Functions when you need any of the following:

  • Advanced functionality not available in Designer Functions or Text Formatting Functions
  • The ability to style or format an Image, Object, Video, or SVG element
  • The ability to have a single function apply to one or more elements based on a CSS selector (ID, attribute, class, etc.)
  • You are building a custom Element in an Designer Elements Application and want to provide configurable settings for a user.

Comparison overview

Type Inputs Output / Effect Typical use case
Designer Functions Parameters (values) Returns a string Build data-value for Text or Image elements
Text Formatting Functions DOM element, data-value Mutate a single Text element User-selectable text formatting styles
Designer Formatting Functions DOM element, dataValue, dataObject, elementSettings Mutate one or more elements via CSS selector Advanced layouts and cross-element behaviors

Next steps