How to Create a Custom Action

These are the basic steps to create and use a Custom Action in your Adalo App

1. Add a Component with an Action Choose a component that supports actions, such as a button. Select it and click Add Action in the Component Setup panel.

2. Choose Custom Action In the action options, select Custom Action > New Custom Action. This opens the Custom Action setup window.

3. Configure the Request

   • Name: This is internal and just for your reference. If building multiple apps, try noting the app this action is used in as to avoid making unintended changes.

   • Type: This is for internal purposes only and does not impact the API Setup.

   • Method: Select the HTTP method your API requires (GET, POST, PUT, PATCH, or DELETE).

   • URL: Enter the full endpoint URL of the API you want to connect to.

   • Headers: If required, add authentication or content type headers such as:

     1. Content-Type: application/json

     2. Authorization: Bearer YOUR_API_KEY

   • Body/Inputs: If your request needs to send data, add the JSON body. You can use Magic Text to include values from your app, like a user’s email or inputs from a field.

4. Run a Test Request Click Run Test Request to send the request and view the API’s response.

5. View the Full Response Click Show Full Response to see all of the data returned by the API.

6. Add Outputs Click +Add Item to make data from the response available in Adalo. For each Output, select the appropriate data type:

   • Text for strings, URLs, or IDs

   • Number for numeric values

   • Date/Time for timestamps

   Adalo currently supports only Text, Number, and Date/Time data types for Outputs.

7. Save the Custom Action After adding your Outputs, click Save. These Outputs can now be used in later actions or displayed in components on your screen.

---

Re-Testing Custom Actions

When you re-test or edit a Custom Action, Adalo refreshes the API response structure. This removes any previously added Outputs.

To restore them:

1. Click Run Test Request again.

2. Open Show Full Response.

3. Re-add your desired Outputs.

4. Click Save before leaving the editor.

---

Using Outputs in Actions

Once saved, Custom Action Outputs can be used in any following action, such as updating a record or showing data on screen.

To map Outputs to a property:

1. Add an Update or Create action after your Custom Action.

2. Select the property you want to set.

3. Choose the corresponding field from your Custom Action Output flyout.