Templates : Custom Field : Write A Custom Function to Calculate Monthly Payment

In this guide, we will use the Custom Fields and Custom Functions of the Lucit Template designer to create a field that will display the estimated monthly payment for a vehicle.

To accomplish this, we will take the following 2 steps

1. Create a custom function using registerDesignerFunction

2. Create a custom field using our custom function

Create a Custom Function

Custom functions in Lucit a registered using 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 the code editor, we will register our custom function using the registerDesignerFunction function

This function accepts 2 arguments. A function name, and a callback

The callback should accept a single params element in order to accept an array of data during render

Designer Function Rules

Functions must adhere to the following rules

1. Function names MUST begin with fn

2. Functions MUST accept a SINGLE element called params

3. The params element MUST be an array

Example Function Code

Here is our example function. You can copy and paste this function as is into your code editor

Let's break down what is happening

fnCalcPayment

This is the name of your function. This is what you will reference later when calling this function from your Custom Field

All custom designer functions MUST begin with the characters fn Any functions not beginning with fn will be ignored

(params) => {
  const [amount,interestRate,month,suffix = "/Mo"] = params

This section is the function definition. Note we have a params parameter and this expcets an array of 4 elements

After adding your custom function. Your code editor will look like this

Save it to close out of the editor

Add the Custom Field

Now that we have our custom function, we can use it in a Custom Field

Click the "+" next to Custom Field at the bottom of the Dynamic Data Elements section

In the dialog, name your field "My Monthy Payment" and note that your Function List now contains your new fnCalcPayment function

In the code section enter the following

Note how we structure the array params that we are providing to this function.

We are providing the price macro, 7.5 for the interest rate, 60 for the number of months, and a suffix of " per month"

Your code editor should look like this

Finally, save your changes, and then click on your Custom Field to add it to your template