Custom Actions

Build custom actions that let you do things you can't do in Adalo - like use external services (APIs) to send emails, crop photos, generate IDs, or shorten URLs like in this walkthrough.

Skill Level: Expert

Before You Begin

Current Limitations:

  • You can't use the return value of a Custom Action if it is used as a whole-screen action.

  • Custom Actions do not work on Form component submit buttons.

Intro Video

The video above is Version 1 of Custom Actions. If you want to see Version 2 where you can now bring data back into your app from other external apps, watch the video here!

Walkthrough

For a detailed beginner's walkthrough with a simple example, click on the In-Depth tab.

1.) Select the component you would like to add the custom action to. Note that custom actions do not work on forms or for using return values on whole-screen actions.

2.) In the Click Actions section of the component's settings, click Add Action, hover over Custom Action, then click New Custom Action.

3.) Give your new Custom Action a name and select the label to be displayed in the Adalo Builder. Choose from Create, Update, or Delete, then click Next

4.) Next you'll want to reference your chosen APIs documentation to find its Base URL, Authorization requirements (if any), and parameters to be sent. Each API is different and has different requirements. For help with this step you can see our primer on APIs or start with a simple example in the In-Depth tab to get your feet wet.

5.) Input the APIs Base URL in the API Base URL field of the custom action. Note that you can use Magic Text here as well to reference the inputs you create (Step 7)

5.) Add any headers or query parameters that are required for your API by clicking +Add Item, then choosing either Header or Query Parameter. Some common headers are the Authorization header and the Content-Type header.

6.) Next, you'll need inputs for your action. You'll want to add an input for each changing piece of data you want to send to the API. In the right side of the popup under the Inputs section, click +Add Item

7.) Give the input a label/name and select what type of data it is. More information on data types can be found in the Learn More section of this help guide.

8.) In the Body input field, build or paste the request JSON body. You can use Magic Text to replace portions of the request with the inputs you just made. This makes these portions of the request variable (dynamic) so you can send different data to the API with each request.

9.) Click Run Test Request. If all goes well, you will receive a Test Successful message along with an output from the API called shortURL. These outputs are automatically created Magic Text outputs for the returned data. You can customize these outputs by clicking on them to change their name or type, or you can delete an output if you don't need it. Once done, click Save Custom Action.

If you receive an error or the test is not successful, check your Custom Action setup and try again. You can always click Show Full Response to see the full response from the API as well as any error codes. If you don't have any returned information, you can also click on +Add Item to find and add the result manually if it is available.

11.) Now that your custom action is setup, you can use it in any app in your team and on any component!

Example

Now when a user puts a link into the input field and taps the button, it will send the link to the Micro API, return the shortened link, and save it to the User's record.

Since Custom Actions cannot be copied with apps, we can't provide a cloneable template, but if you would like to try out the app used in this walkthrough, click here.

Learn More

  • The Micro API has lots of wonderful endpoints that work the exact same way as this walkthrough. Just be sure to branch out and explore other APIs now that you have some experience with a simple one. You can use a site like Public APIs to find free and paid APIs to help you do all sorts of cool things in Adalo.

  • For a complete list of use cases for Custom Actions, click here.

  • Custom Actions work best with REST APIs and can only recognize JSON responses. APIs utilizing XML, SOAP, or GraphQL are not supported unless they can return JSON responses.

  • Custom Actions do not work on form actions.

  • Custom Actions can't send multiple records in their API request.

  • Custom Actions are different from External Collections in that they are used to perform a single function instead of displaying a list of items like an external collection.

  • Custom Actions cannot be copied from team to team

Help

If you would like to take a further look at the capabilities of Custom Actions, we will highly recommend you to take the Custom Actions Course from The Adalo App Academy.

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!

Last updated