Actions

INFO

The build integrations section is best understood when read from beginning to end. To get the most value out of it, start from the first page and read through page by page.

Add actions to the app.

Open the thecatapi/index.js file and add the highlighted lines for actions.

javascript

import defineApp from '../../helpers/define-app.js';
import auth from './auth/index.js';
import triggers from './triggers/index.js';
import actions from './actions/index.js';

export default defineApp({
  name: 'The cat API',
  key: 'thecatapi',
  iconUrl: '{BASE_URL}/apps/thecatapi/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/thecatapi/connection',
  supportsConnections: true,
  baseUrl: 'https://thecatapi.com',
  apiBaseUrl: 'https://api.thecatapi.com',
  primaryColor: '#000000',
  auth,
  triggers
  actions
});

Define actions

Create the actions/index.js file inside of the thecatapi folder.

javascript

import markCatImageAsFavorite from './mark-cat-image-as-favorite/index.js';

export default [markCatImageAsFavorite];

TIP

If you add new actions, you need to add them to the actions/index.js file and export all actions as an array.

Add metadata

Create the actions/mark-cat-image-as-favorite/index.js file inside the thecatapi folder.

javascript

import defineAction from '../../../../helpers/define-action.js';

export default defineAction({
  name: 'Mark the cat image as favorite',
  key: 'markCatImageAsFavorite',
  description: 'Marks the cat image as favorite.',
  arguments: [
    {
      label: 'Image ID',
      key: 'imageId',
      type: 'string',
      required: true,
      description: 'The ID of the cat image you want to mark as favorite.',
      variables: true,
    },
  ],

  async run($) {
    // TODO: Implement action!
  },
});

Let's briefly explain what we defined here.

name: The name of the action.
key: The key of the action. This is used to identify the action in Automatisch.
description: The description of the action.
arguments: The arguments of the action. These are the values that the user provides when using the action.
run: The function that is executed when the action is executed.

Implement the action

Open the actions/mark-cat-image-as-favorite.js file and add the highlighted lines.

javascript

import defineAction from '../../../../helpers/define-action.js';

export default defineAction({
  // ...

  async run($) {
    const requestPath = '/v1/favourites';
    const imageId = $.step.parameters.imageId;

    const headers = {
      'x-api-key': $.auth.data.apiKey,
    };

    const response = await $.http.post(
      requestPath,
      { image_id: imageId },
      { headers }
    );

    $.setActionItem({ raw: response.data });
  },
});

In this action, we send a request to the cat API to mark the cat image as favorite. We used the $.http.post method to send the request. The request body contains the image ID as it's required by the API.

$.setActionItem is used to set the result of the action, so we set the response data as the action item. This is used to display the result of the action in the Automatisch UI and can be used in the next steps of the workflow.

Test the action

Go to the flows page of Automatisch and create a new flow. Add the Search cat images as a trigger in the flow. Add the Mark the cat image as favorite action to the flow as a second step. Add one of the image IDs you got from the cat API as Image ID argument to the action. Click Test & Continue button. If you a see JSON response in the user interface, it means that both the trigger and the action we built are working properly.

Actions #

Add actions to the app. #

Define actions #

Add metadata #

Implement the action #

Test the action #

Actions

Add actions to the app.

Define actions

Add metadata

Implement the action

Test the action