Use integration in Patchwork

Overview

Using integration in Patchwork is done in three steps

  1. Create an integration

  2. Create the view that will receive data from the integration

  3. Connect the integration with the view

Example

th

Create an integration

Integrations are created in the Data > Integrations menu.
Create your integration by specifying endpoint, method etc.

In order to use data from the API response, you need to map it out properly. This is done in the “output” section of the API-endpoint editor.

The output settings can be found in the panel on the right hand side of the integration editor.

550699041

The fields in the output panel are: Name, Response Key and Type.
Name is very important as it will be used to flow data out of the integration to other views.
Response key is the path to the data in the API’s response.
Type is the type of data that the output corresponds to (ie. Text, Number, etc)

In the example below, the API-endpoint returns this payload:

[
  {
    "id": 789,
    "title": "My title"
    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Fusce ultricies molestie neque non consectetur.
                Sed varius libero sit amet dolor porttitor, sit amet
                posuere justo molestie."
  },
  {
    "id": 788,
    "title": "Other title",
    "content": "More content here ..."
  }
]

To map one of the objects to an output, you specify its order in the “response key”-field.

550862861

In the example above the fields id, title and content are mapped to the first entry in the payload.
This is denoted by the “0” in the beginning of the Response Key-field.

When you have mapped the outputs you are ready for the next step.

Create the view

Navigate to Design > Views and create a new view. This view will be receiving data from the integration.

Begin by creating inputs where we can flow data into the view. From the example above, we have three inputs: id, title and content. Navigate to the “View properties”-tab and in the “Input” section, create three inputs.

550928432

Create three properties: id (number), title (text) and content (text).

Proceed by adding two text display components to this view.

550699053

Now select one of the components and in the right-hand menu switch to the “Component properties” tab.
Click the Text field in the Data section and begin typing $\{
This will activate the auto-completion function and display the possible inputs that can be mapped into this component:

550666283

Complete the process by mapping all inputs to components.

The syntax for mapping inputs to components is:
${variable-name}
This convention is used throughout the platform.

Connect the integration with the view

Navigate to Patchwork and press “Add patch”.
In the API Category, select the “Integration” patch

image

Add another patch and select the view you created in the previous step of this tutorial.

Next, select the API-integration patch that you dragged onto the patchwork canvas.
Specify which integration you want to use and which method you want to call.

437453055

Now connect the “success” edge to the view-patch:

550928456

Next, select the thin green line connecting the two patches.

550862901

When the line is selected it becomes dashed and the panel on the right hand appears.

integration patch connection

In this panel the inputs of the view can be connected to the outputs of the API-endpoint.

When this is done, you’re all set and your integration should be up and running!