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.
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:
Here are the steps:
1. Define custom function
To define the custom function:
Select Custom Functions from the Navigation Menu (left side of your screen).
Click + Add, select Function and provide the Function Name.
To get output, see the Return Value section,
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.
When you are sure this argument will always have a value and will not be null, you can uncheck the Nullable option.
To pass input:
Click on the + Add Argument (under the Define Arguments section).
Enter the Name of the first parameter in the Argument 1 input box.
Set the Type of the incoming value to a suitable type.
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.
When you are sure that this argument will always have a value and will not be null, you can uncheck the Nullable option.
2. Add code
To add the code:
In the Function Code tab, add your custom code.
Alternatively, you can also use our Code Copilot 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. Note that it will generate code based on the input and output parameters you added.
To get the code, click Copy Function.
To regenerate code with another variation, click the refresh button.
Click Save Function.
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).
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:
After you have added to the code, select the Test Function tab.
Provide the inputs to the function. For this example, it will be a list of JSON objects, each containing product details.
Click on the Run button.
Verify the output displayed below the Run button.
To add more tests, + Add Test button. To run all your test together, click on the Run All Tests button.
4. Use custom function
The newly created function is accessible via the set from variable menu. Here's how you use it:
Select any widget property that allows you to set value from variable.
Select Custom Function > [custom_function_name].
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).
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.
Similarly, you can use the same custom function wherever you require in your app. Tip: You can copy variable feature.
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.
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:
Find the line where the code editor shows the red underline.
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.
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).
Uploaded File: To pass/receive locally uploaded files such as PDF, Audio (MP3), or any other file type.
FAQs
I can't add imports!
You can't have imports in a custom function. To be able to add imports, consider using Custom Widget or Custom Action.
Getting error: The function 'FFAppState' isn't defined.
You can't use the app state variable (i.e., FFAppState().variablename) directly in your custom function code. Instead, you can pass the app state variable as a parameter and then use it in your code, as shown in the figures below.
Last Updated Date: September 1, 2023
Last updated
