Use integration in Patchwork

Overview

Using integration in Patchwork is done in three steps

Create an integration
Create the view that will receive data from the integration
Connect the integration with the view

intp1

Now let’s see how you can use integration in Patchwork.

Create an integration

First step would be to create an integration

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