top of page
Developer Support

Templates : Write Custom Formatting Functions

When you need more functionality and control over the formatting of elements on your template, you can build custom javascript formatting functions that you can apply to the template at render time


You can register your custom formatting functions in the code editor.


To open the code editor, click on the "Canvas" tab and then the "Code Editor" button. In the code editor, click on the "JS" tab.



In teh code editor, we will register our custom formatting function using the registerDesignerFormattingFunction function.


This function accepts 3 arguments

  • A function name

  • A callback that accepts a 2 paramaters

    • el the element that you are operating on

    • dataValue the value of this element (if any) - This usually is the "data-value" attribute of the element in the HTML

  • A selector to match elements that you wish to apply this function to


Here is an example function that will make the price text red in color, if the price is less than 30,000



Let's break this down


makeCheapVehiclesRed

This is the name or id of this function. Other than being used to identify this function later, it does not require special naming rules (like custom field functions do)


(el,dataValue) => {

This is the callback.


el represents the element that this function is being applied to. The element will be one or more elements matching your selector.


dataValue is the CURRENT value of this element. For instance, it might be a macro price, or text, etc.


const price = parseFloat(dataValue);

    if( price < 30000 ){
      el.innerHTML = '<span style="color:red">' + el.innerHTML + "</span>";
    }

Dynamic values are stored in the data-value attribute of their containing div. The dataValue param gives you easy access to this value


Then we test if it is less than 30000, and if so, we wrap the current innerHTML in span tag with the color red


'[x-objectcode="item_price"]'


This is the selector. Here we are selecting all elements that have an x-objectcode of "item_price"


NOTE: Learn more about the HTML / CSS Selectors in the Guide to HTML And CSS Layouts


Add this code into your code editor, and it should look like this


Now, check different vehicles to see the function applied and our prices under 30,000 are now RED!




Because the formatting functions have full control over the element. They can add any kind of markup to it. Add styles, and even remove all innerHTML to make the item disappear











bottom of page