# 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**](https://cleanuri.com/docs) 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](https://help.adalo.com/glossary#method) 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](https://help.adalo.com/glossary#json) or our tips on [Working with JSON in Custom Actions.](https://help.adalo.com/integrations/custom-actions/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. ![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FvtOG8qKBq58FPjX04NrW%2FScreenshot%202025-10-28%20at%204.22.55%E2%80%AFPM.png?alt=media\&token=22824254-50d5-42a4-afc6-8c4879d0a3bb) 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](https://help.adalo.com/glossary#custom-action). * 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](https://appacademy.adalo.com/course/custom-actions) from [The Adalo App Academy](https://appacademy.adalo.com/homepage). If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!