To quickly connect a custom API use HTTP Request Builder. You can make GET
request to visualizing orders data in Table component or POST
request to reset a password for a specific user.
1. Go to Component Settings then click Add Data Source
2. Choose Resource – Rest API then choose Collection – Make an HTTP request
To pass parameters from API Query Builder, such as customer id
you need to specify it as a parameter.
Go to Parameters then click +Add Field
Specify Parameter type (for example, Number Field for ID parameter or Text Field for Email parameter)
Mark as Required (if you need to make this field required)
Specify query parameters
Set customer
value in Tokens and run query
Tokens are app variables that store Jet's data. There are different type of tokens that you can use on your requests:
Parameters. When you create a new parameter it becomes available as tokens
Current User. User's account properties like email, id, token, etc. available in Current User
. You can specify custom properties)
Pagination
Sorting
You can specify default values for your tokens that will use in the request.
To transform a body before the request is performed you can specify Body Transformer
. You can modify your function's return value by adding a transformer. Use the identifier data
for the return value and enter any expressions to modify the result, such as add a property or loop over the data set.
return data['email'];
For simple transformers, you can use response nested keys
to transform the response:
For more complex transformers, you can use a JavaScript response transformer. Thedata
is a JS variable that stores a response from your request. You can find it in Advanced Settings:
function getProperties(data) {result = {};for (var key in data) {result[key] = data[key]['value'];}return result;}function contactMapper(contactData) {result = getProperties(contactData['properties']);result['dealId'] = contactData['dealId'];return result;}return data['deals'].map((x)=>contactMapper(x));
You can sort all fields by ascending and descending value:
APIs like to send data back in pages. By default, you only get 1 page. You will need to ask for more. In your API docs, there is probably a section called Pagination.
There are 3 types of pagination: page, offset, and cursor pagination.
If you see the mention of a numerical page number that you increment to get each page, then you are in the right place.
Intercom uses this style of pagination. And it looks like this in their docs:
The first page from this endpoint would look like this: https://api.intercom.io/users?page=0
$ curl https://api.intercom.io/users?page=0 \-H 'Authorization:Bearer <access_token>' \-H 'Accept:application/json'
In API Builder that would be set up with these settings:
If you see the word offset
in your API docs, this is the style for you. Hubspot uses this style. Their docs say:
Some endpoints support a way of paging the dataset, taking an offset and limit as query parameters:
https://api.hubapi.com/v1/deals/v1/deal/paged?offset=20&limit=20
In this example, in a list of 20 (total
) singles by the specified deal: from the twentieth (offset
) deal, retrieve the next 10 (limit
) deals.
In Jet API Builder that would be set up with these settings:
https://api.hubapi.com/v1/deals/v1/deal/paged?offset={{paging.offset}}&limit={{paging.limit}}
Sometimes APIs use something that looks weird for their pagination. Each call may return a cursor key to use to get the next page. Something like "nextPageCursor": "<cursor_key>"
or ID as the next cursor (Stripe API) "next cursor" : data['data'][data['data'].length - 1].id
For instance, Stripe sends back a URL as well as a cursor (object ID) to use to get the next page. Their docs show this:
You can send this in two ways. Either use the cursor or use the full URL. If you use the cursor, you need to send it in a parameter:
For instance, Stripe API in Jet API Builder that would be set up with these settings:
https://api.stripe.com/v1/customers?limit={{paging.limit}}&starting_after={{paging.cursor_next}}&ending_before={{paging.cursor_prev}}