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

You will need a to use this feature: Professional Plan or above.
Ensure you have an understanding of , , and
Ensure you have read about the basics of APIs (see )

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

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

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!

3.) In the button's Click Actions area, click Add Action, then hover over Custom Action and choose New Custom Action. If you have created Custom Actions previously, you will see those here as well.

4.) Give the new custom action a Name such as "Shorten URL" and choose what type of action to display it as in Adalo. You can choose from either Create, Update, or Delete. For this walkthrough, let's choose Create and click Next.

7.) Click Create and you will see your new key in a black text box. Make sure you click Copy and save this to a safe, but memorable location. If you lose your key, you will need to create another one. Click Close once you're done.

8.) With the popup now closed, find the code snippet in the API Usage section, then copy the portion that says https://api.m3o.com/v1/{service}/{endpoint} . This is our Base URL. Paste this into your Custom Action's API Base URL field.

11.) This API requires authentication using our API key. Back in the API Keys portion of your Micro account, you will find in the API Usage section that it requires a Header (-H) named Authorization with your key as the value. For our Custom Action, click +Add Item under the Headers and Queries section, then choose Header

12.) For the name of the header, type in Authorization. For the value, type in Bearer, then paste in your API Key that you saved from Micro. Don't forget to add a space (not Enter) between Bearer and your Key.

13.) Next, we need to add an input field for our Action so that we can send any URL we want using Magic Text. Click +Add Input under the right-hand Inputs section of the Custom Action. Since a URL is a combination of letters, numbers and symbols, choose Text as the input type.

14.) Give the new input a label/name such as "URL to be Shortened", paste in a URL as the Example Value to test with, then click Done. You can find a complete list of the data types and descriptions in the Learn More section of this help guide.

{ "days": 3, "location": "St. Louis" }

17.) 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.

18.) Now we need use Magic Text to set the input we created called URL to be Shortened to be whatever the user types into the input field.

19.) You can use the outputs of a Custom Action in subsequent actions. For our example, let's add an Update action to our button underneath our Shorten URL action we just made. Let's have it update the Logged in User.

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.

Learn More

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