Custom Actions

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". If you need help with this step, please see our Getting Started guide first. You should have something like this:

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 powerful external service called Micro.

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 browser tab containing your Micro account, click on your email in the top right corner, then click on API Keys. API Keys are like a password for your API usage. For this particular API, we can create multiple API Keys if we need to for different apps, but not all APIs are this way.

6.) Click on Create. A popup will appear where you should enter a key Description and select the Scopes, or permissions, this key will use. The scopes directly relate to the services you would like to use with this API Key. In our case, we're going to use the URL service to shorten a URL so just check URL for now. (You can see a full list and descriptions of Micro's services here.)

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.

9.) Next we'll replace the {service} and {endpoint} portions of the link with the service and endpoint we want to use. The Micro documentation for the url service tells us that the endpoint for shortening URLs is called shorten. So our Base URL now looks like this: https://api.m3o.com/v1/url/shorten.

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

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.

15.) We need to send any related parameters to our endpoint. In this case, we need to send the URL to be shortened. The Micro documentation for our "Shorten" endpoint tells us that we only have to send one parameter called destinationURL . In the JSON Body field of the Custom Action, paste in the Request code snippet from Micro documentation: { "destinationURL": "https://mysite.com/this-is-a-rather-long-web-address" }

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. Take Micro's Weather Forecast endpoint for example:

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

For more information on using and creating JSON like this, see our primer on JSON

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

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.

20.) Use Magic Text in the "Personal Link" property to place info from our previous custom action Shorten URL > shortURL. 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.

Custom Action Example - Shorten a Link with the Micro API

Custom Action Example - Send an Email with SendGrid

Custom Action Example - Send Information to a Zapier Webhook

Using the Results or Outputs of a Custom Action