top of page

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









Comments


Commenting has been turned off.
bottom of page