Advanced Custom Action Walkthrough

1. For this walkthrough, add an Input field and a Button to a blank screen as well as a Text property to the User's Collection called "Personal Link".

   
2. Select the component you want to add a custom action to. In this walkthrough, we'll be adding it to a button that will shorten a link for us using a free API from cleanuri.com

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.

   
5. Open the API Documents for the integration you are using to get the API Base URL and paste into the Custom Action Setup.

   
6. Most APIs will specify which Method should be used for an endpoint depending on it's function. For our example API, we will select POST from the dropdown. For more information on request methods, see our Methods primer.

   
7. Here you will enter any Headers or Query Params. The API in our example does not require Authorization so we will just set the Content-Type to application/json

   
8. 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.

9. Give the new input a label/name such as "URL to Shorten", 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.

   
10. We need to send any related parameters to our endpoint. The endpoint we are using requires that we send one parameter called url . In the JSON Body field of the Custom Action, paste in the Request code snippet from documentation: { "url": "https://mysite.com/this-is-a-rather-long-web-address" }

    
11. If the endpoint you're using requires multiple parameters, format them the same way, but add a comma after each line except the last one.

    1. For more information on using and creating JSON like this, see our primer on JSON or our tips on Working with JSON in Custom Actions.

12. Use the Magic Text button to replace the https://mysite.com/this... in quotes with the "URL to be Shortened" Input we created.

    
13. Click Run Test Request. If all goes well, you will receive a Test Successful message .

14. Click +Add Item to make data from the response available in the Outputs

    
15. Select the desired properties and rename if desired. This will make it easier to sort through if you have a larger response.

    

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

16. After adding your Outputs, click Save Custom Action. These Outputs can now be used in later actions or displayed in components on your screen. Once saving, the Custom Action will show on the component you originally selected.

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

    
18. 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.

    
19. Use Magic Text in the "Personal Link" property to place info from our previous custom action Shorten URL > Shortened_URL.

    

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

If you ever need to edit the Custom Action, click on the action and select the Pencil icon in the lower left of the action.

Learn More

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

• Test your API in Postman before connecting to Adalo.

• 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 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.

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!