In this screencast we will create an integration to a JSON data service endpoint.
We will make requests and fetch user resource from jsonplaceholder service.
A sample JSON response of a user data looks like:
/* fetched from https://jsonplaceholder.typicode.com/users/1 */
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}Autogenerate JSON Schema for user JSON data and organize schema according to needs.
Define endpoint of integration using an optional id parameter.
https://jsonplaceholder.typicode.com/users/{{id}}Bind data using Twig syntax.
<div class="bg-indigo-600 p-6 text-center h-screen flex items-center justify-center">
<div class="font-anime text-white text-4xl">
<div class="text-8xl my-3">{{ name }}</div>
<div class="mt-6">{{ username }}</div>
<div class="my-3">{{ email }}</div>
</div>
</div>Creating documents will prompt a dialog asking for endpoint parameter user's id.
Document creation lifecycle
When users enter optional parameters, uhuu executes following tasks sequentially.
- Fill optional parameters to build an endpoint url.
- Fetch remote data from endpoint.
- Render template with data and create document.
- Build an editable form to let users change data.
- Re-create documents after updates.