Custom Functions

A custom function is a block of code that performs a specific task and can be reused in different parts of the app. If you find yourself performing a particular set of operations repeatedly in your app, it may be helpful to create a custom function.
Our custom code editor allows you to define incoming and outgoing parameters, and you can easily check for any errors right within the editor.
Custom function example 1
Custom function example 2

Adding Custom Function

Let's see how to add a Custom Function by building an example of a shopping cart page that calculates and displays the total price of items in a cart. You can create a custom function that takes in the items in the cart as a parameter and returns the total price of all the items. This function can be reused throughout the app whenever you need to calculate the total price of items in a shopping cart. Here's how it looks:
Using a custom function to calculate the total price and display at multiple places
Here are the steps:
  1. 2.
    ​Add code​
  2. 3.
    ​Testing code​
  3. 4.

1. Define custom function

To define the custom function:
  1. 1.
    Select Custom Functions from the Navigation Menu (left side of your screen).
  2. 2.
    Click + Add and select Function and provide the Function Name.
  3. 3.
    To get output, see the Return Value section,
    1. 1.
      Set the Type of return value to a suitable type. For example, if the Custom Function returns a text, set the Type to String. If your custom function returns a list of data, such as numbers or fruit names, tickmark the List option. For this example, set it to Double because we might have the total price value in decimal.
    2. 2.
      When you are sure this argument will always have a value and will not be null, you can uncheck the Nullable option.
  4. 4.
    To pass input:
    1. 1.
      Click on the + Add Argument (under the Define Arguments section).
    2. 2.
      Enter the Name of the first parameter in the Argument 1 input box.
    3. 3.
      Set the Type of the incoming value to a suitable type.
    4. 4.
      Determine whether you need to pass a single item or multiple and set the List accordingly. For this example, it will be a list of products in JSON format.
    5. 5.
      When you are sure this argument will always have a value and will not be null, you can uncheck the Nullable option.
Define custom function

2. Add code

To add the code:
  1. 1.
    In the Function Code tab, add your custom code.
  2. 2.
    Alternatively, you can also use OpenAPI Codex tab to generate code from text. Simply tell it what kind of function you need, for example, 'calculate the total price of items,' and it will generate a sample code you can use. Note that it will generate code based on the input and output parameters you added.
    1. 1.
      To get the code, click Copy Function.
    2. 2.
      To regenerate code with another variation, click the refresh button.
  3. 3.
    Click Save Function.
  4. 4.
    Click on Check Errors to see if you are ok to proceed. If everything is ok, you'll see the No Errors! button, otherwise, you'll see the Has Errors button (click on it to see errors; also, see how to fix errors using ChatGPT).
Add code

3. Testing Code

Testing the Custom Function code allows you to see if your code works as expected against the various inputs. In general, it helps you gain confidence in shipping your app to production.
To test the code:
  1. 1.
    After you have added to the code, select the Test Function tab.
  2. 2.
    Provide the inputs to the function. For this example, it will be a list of JSON objects, each containing product details.
  3. 3.
    Click on the Run button.
  4. 4.
    Verify the output displayed below the Run button.
  5. 5.
    To add more tests, + Add Test button. To run all your test together, click on the Run All Tests button.
Testing custom function

4. Use custom function

The newly created function is accessible via the set from variable menu. Here's how you use it:
  1. 1.
    Select any widget property that allows you to set value from variable.
  2. 2.
    Select Custom Function > [custom_function_name].
  3. 3.
    Provide the input to the custom function using Set Function Argument. For this example, provide the list of products in JSON format (which is saved in the app state variable for this example).
  4. 4.
    Optionally, you can set the number format options for displaying numbers in an appropriate format. e.g., displaying the total price in decimal format with a currency symbol.
  5. 5.
    Similarly, you can use the same custom function wherever you require in your app. Tip: you can copy variable feature.
Using custom function

Formatting Custom Function

When working with code, it's important to ensure that it's properly formatted and easy to read. When code is not properly aligned, it can be difficult to understand and debug. To address this, we offer a built-in code formatter that can automatically format your code.
To use it, simply click on the Format Code (
) icon located on the top right side of the code editor.
Format code

Identifying errors

It is possible that you may make mistakes while adding the code in the code editor. In this situation, our code editor helps you find the errors. To identify the errors:
  1. 1.
    Find the line where the code editor shows the red underline.
  2. 2.
    Bring your mouse cursor over the line the see the exact error.
You can also click on the Check Errors button to see a list of all errors.
Identify errors

Supported Data Types

The following data types are available while defining the parameters for Custom Actions.
  • Integer: To pass/receive numbers such as 100, 4302, 50000, etc.
  • Double: To pass/receive a decimal number such as 12.43, 3233.50, 65.5666, etc.
  • Boolean: To pass/receive either a true or false value.
  • String: To pass/receive plain text such as title, description, etc.
  • Image Path: To pass/receive the URL of the uploaded image.
  • Video Path: To pass/receive the URL of the uploaded video.
  • Audio Path: To pass/receive the URL of the uploaded audio.
  • Color: To pass/receive color value.
  • Document Reference: To pass/receive a reference of a document.
  • Document: To pass/receive the actual record, i.e., a Firestore document.
  • JSON: To pass/receive the JSON value such as {"firstName":"John", "lastName":"Doe"}.
  • DateTime: To pass/receive date and time value.
  • TimestampRange: To pass/receive the start date-time and end date-time values.
  • Lat Lng: To pass/receive the latitude and longitude of a particular place.
  • GooglePlace: To pass/receive the GooglePlace data.
  • Data Type: To pass/receive custom data type (aka Firestore Map).
  • Supabase Row: To pass/receive actual row data from a Supabase table.