Custom Actions
Note: This feature is only available in apps on paid plans.
Custom actions allow you to trigger an API request as an action. So, for example, you could make it so that when a user clicks a button, it sends a request to the SendGrid API to send an email. You can also customize the inputs of a custom action so that the data sent in the API request can use magic text and be dynamic depending on the circumstance of the user and data in your app. Finally, you can use the results of custom action as magic text outputs that other actions can use.
Custom actions can be used for a wide variety of use cases such as sending emails or sms, creating a contact in a CRM, getting the geo-coordinates for an address, or sending data to a web hook. Check out our more in-depth list of use cases for Custom Actions.
1) Select the component you want to add a custom action to
2) Click Add Action, then in the menu, select Custom Actions. You will see a list of your existing custom actions, and the option to add a new one.
3) Specify the Type and Name of the Action
.gif?alt=media&token=b25c97fe-4a5c-4569-a668-4f7250863e6c)
4) Configure the API Request
Set the Base URL
Add any Authentication
Format the Body of the Request
Add & Use any Inputs
Inputs can be used as Magic Text in the Request body as well as the Base URL and Authentication values. These inputs become the inputs for the Action once you've added it to your app. Note: Don't forget to add a test value for your input.
.gif?alt=media&token=50e6e2e9-eaf0-46a5-9d89-c70ca39401f9)
5) Set up your Outputs
Adalo will run a test of your custom action and, based on the API response, will automatically create 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.
6) Add your Custom Action
.gif?alt=media&token=ac1625ca-0e85-4d60-8c0a-e8a6bf0d818a)
If you set up outputs for your custom action, you can use those output values as magic text in subsequent actions. Maybe your custom action is looking up the latitude and longitude of an address and you want to save those coordinates in your app's database, or maybe your custom action is creating an email in an external system like SendGrid and you want to save the Id of that email.
1) First, add your custom action.
2) Add a 2nd action that will use the outputs of your custom action. This 2nd action will likely update or create a new record, or possibly change the value of an input on your screen.
3) When setting up your 2nd action, click the magic text icon. In the magic text menu, you will see your prior custom action listed, and if you hover over it, you will see its outputs for you to select.
.gif?alt=media&token=82f4b966-c06c-4684-a1e3-9047552c2806)
1) Find a component that is already using the custom action you want to edit, or add it to a component.
2) With the action expanded, click on the pencil icon.
.gif?alt=media&token=55174a0c-db94-4b1e-9a38-365d9f43e43a)
You can't yet use the return values of custom actions, but this is in active development.
Forms can't use custom actions, but this is on the roadmap. In the meantime, you can use individual input components to have user entered data be sent in a custom action OR you can add a custom action as a subsequent action on a form's submit button.
Custom Actions can't send multiple records in their API request.
Because both Custom Actions and External Collections are ways to integrate your app with an API, you may be wondering about the difference and when is the right time to use each.
You should use an External Collection if you need to display a list of items in your app that are stored in a 3rd party system. For example, if my restaurant's menu items are already stored in Airtable, I can use external collections to display a list of those menu items in my app.
You should use Custom Actions if you want to perform a function like sending an email or getting the latitude and longitude of an address.