# How to Create a Custom Action

1. **Add a Component with an Action**\
   Choose a component that supports actions, such as a **button**. Select it and click **Add Action** in the Component Setup panel.
2. **Choose Custom Action**\
   In the action options, select **Custom Action > New Custom Action**. This opens the Custom Action setup window.
3. **Configure the Request**
   * **Name:** This is internal and just for your reference. If building multiple apps, try noting the app this action is used in as to avoid making unintended changes.
   * **Type:** This is for ***internal purposes only*** and does not impact the API Setup.
   * **Method:** Select the HTTP method your API requires (GET, POST, PUT, PATCH, or DELETE).
   * **URL:** Enter the full endpoint URL of the API you want to connect to.
   * **Headers:** If required, add authentication or content type headers such as:
     1. `Content-Type: application/json`
     2. `Authorization: Bearer YOUR_API_KEY`
   * **Body/Inputs:** If your request needs to send data, add the JSON body. You can use **Magic Text** to include values from your app, like a user’s email or inputs from a field.
4.  **Run a Test Request**\
   Click **Run Test Request** to send the request and view the API’s response.
5. **View the Full Response**\
   Click **Show Full Response** to see all of the data returned by the API.
6. **Add Outputs**\
   Click **+Add Item** to make data from the response available in Adalo.\
   For each Output, select the appropriate data type:

   * **Text** for strings, URLs, or IDs
   * **Number** for numeric values
   * **Date/Time** for timestamps

   <div data-gb-custom-block data-tag="hint" data-style="danger" class="hint hint-danger"><p>Adalo currently supports only <strong>Text</strong>, <strong>Number</strong>, and <strong>Date/Time</strong> data types for Outputs.</p></div>
7. **Save the Custom Action**\
   After adding your Outputs, click **Save**. These Outputs can now be used in later actions or displayed in components on your screen.

***

### Re-Testing Custom Actions

When you re-test or edit a Custom Action, Adalo refreshes the API response structure. ***This removes any previously added Outputs.***

To restore them:

1. Click **Run Test Request** again.
2. Open **Show Full Response**.
3. Re-add your desired Outputs.
4. Click **Save** before leaving the editor.

***

### Using Outputs in Actions

Once saved, Custom Action Outputs can be used in any following action, such as updating a record or showing data on screen.

To map Outputs to a property:

1. Add an **Update** or **Create** action after your Custom Action.
2. Select the property you want to set.
3. Choose the corresponding field from your Custom Action Output flyout.