Working with an API

For this tutorial we will need to make a new Blueprint. If you'd like to continue in your current Blueprint, you can create a new UI Page. To get a new UI Page, right click somewhere in the blueprint and click on selector. A sidebar opens up with different actions. Scroll down until you see UI: Page.

Page Setup

After creating the UI: Page, you can start making your page. How you want to set up your page is up to you. In this tutorial we will create this setup:

  • Page header
  • Form
  • Table results

Before you begin making the rest of the page, we advise you (if you haven't already) to take a look at the tutorials Simple Form , 'Advanced form' and 'Form elements'. In this form we will use Form: Select with an Input Event: On Change, an empty row for the custom input forms: 'License', 'Brand' and 'Trade name'. (These will be made in Dutch, because the API we will use is from a Dutch Government agency) and a button to get the results.

  • Kenteken: License
  • Merk: Brand
  • Handelsbenaming: Trade name

(This is the page setup, an design of your own is also possible. When you dont want to make your own, you can see how we have done it and recreate it. You might want to add your own styling.)

Dynamic form input

The Input Event: On Change function connected to the select input will be called when value of the select input is changed. Within the function you need to get the data using the UI: Get Form Data. Select the field name used in the Select Input. This field will determine what Input Field will be shown on the page.

The 2 empty grid: colum's will be used for the Form Input's. These column's needs to be updated using UI: Dynamic Content Update (make sure to connect the correct outlet with the Dynamic update). In the image above the first column is for the label, the only thing that needs to be done is create Form: Label with text. The value for the label will be the output from the UI: Get Form Data, get: get fields.

The first column is now filled with the selected value. To update the second column, the same needs to be done. Create an UI: Dynamic Content Update and connect the correct outlet. Fill the the content with Form: Text Input. This is a simple text input. Reference Simple Form

When you update the form multiple times with new data, the fields will be filled all the time. Later on this will bring issues with the API. Therefore the form data needs to be emptied, the only field we need to keep is from the select input.

Total function

Webhook HTTP trigger GET

Now the page is setup to be used we can get started with the API. The API will be called whenever the user clicks the button or presses enter(if it's enabled). In the function search for webhooks: HTTP trigger: GET.

When created the webhooks: HTTP trigger: get, the API can be connected with the URL pin, for this example we are using the License check API. https://opendata.rdw.nl/resource/m9d7-ebf2.json?.

Query String + Headers

Now the API is connected it already should work. When you simulate (See: Simulate data) the function connected to the webhooks: HTTP trigger: GET, you will get data from the response pin. When everythng is done right the Code pin should have an output of 200.

Without any filters the API will return the first 1000 results. To use filters for the API you can use the Query String in pin. It will accept any object, a premade object in previous functions or new objects etc. For this example we will use a create: new object. On This site all the different fields you can use are documented.

The fields we use:

  • kenteken - (license)
  • merk - (brand)
  • handelsbenaming - (trade name)
  • Some API's are build that the Query String will search for the specific data given (Example: search for '530I' will only give result matching the exact same.). This is the case when using this API. This is also the reason the Form object needs to be cleared on any changes made. When your previous search was a brand: 'BMW' and your next is trade name: 'R8', the 2 combined will be 'BMW R8' this won't return any result.

    Examples:

    The previous examples are with 'hardcoded' parameters. The parameters can also be filled with the custom data, use UI: Get Form Data to get the data from the form. It is possible for multiple fields to use the normal way of adding fields to the create: new object, but you will need to make multiple checks if one is empty.

    To make it easier with less 'Blocks' use the Mutations pin, from this pin create an mutations: set custom field, the Field pin needs to be filled with the data from the select input (kenteken, merk, handelsbenaming). The field will now change every time the select input changes.

    The same can be used to select the data for the parameter. Tha RDW API will search only with all uppercase data. Create value: convert to uppercase and connect it with String pin. Create an get: custom field and connect Field pin with the value vrom the select input. The last step is to connect String pin with Value pin

    To see if it works, an UI: Debug and conntet the Response to a value in the debug. Go to your page and test (for example) the brand (merk) with 'BMW'.

    The only thing left to do is update the page with the result you get from the API. To do this we need to parse the respons from the API and loop over all the results and update the table. To parse the date you can use JSON: parse this will parse the respons to an object. Cast the object to an array, with the array we will be able to loop over the results and add every result in a table row. The field you want to show in the table is up to you. You can checkout which fields you can use on this page https://opendata.rdw.nl/Voertuigen/Open-Data-RDW-Gekentekende_voertuigen/m9d7-ebf2/data.

    Foreach:

    The Headers pin works the same as the Query string pin. the Headers pin is mainly used for settings/API keys for the API.

    Custom URL

    The URL pin can also be used like you would use it within code. The pros for this is you can control the output better. When you can use custom queries within th url, you can search for data the mathes partially like the input. To make this work within the BP, you need to concatenate multiple values. To make this work with the API we are using, we need to o the following. From the URL pin create a strnig: concatenate strings and connect the pieces from the API in each pin. First String: https://opendata.rdw.nl/resource/m9d7-ebf2.json?$where=

    When you search for a Trade name, the results will also contain rows that will not match 100% to your search