Skip to main content
All CollectionsUse-case guidesUsing action steps
Applying the '{JSON} placeholder' data source & action steps
Applying the '{JSON} placeholder' data source & action steps

Need some dummy data for your application? JSON placeholder makes displaying dummy data in your application a breeze.

Updated over a year ago

After reading this article you'll learn how to:

  • Install the JSON placeholder data source

  • Install the {JSON} placeholder typicode data source step from the block store

  • Configure the {JSON} placeholder typicode data source step

  • Use the step in certain use cases

Starting off

In this example, we'll have to install one step. Search for 'json' in the block store. The block that need to be installed into our application is the JSON Placeholder 2.0.

Block store search results

Click on view details to check out what the block is about. In our case, the data source is there to provide us with a connection with JSON placeholder, the action are used to actually show the data using an action. These tabs also let us install the block into one of our applications. Simply hit the Install block button and select your organization followed by your application.

Installing a block

Once you've installed the 'JSON Placeholder 2.0' data source, you'll find it inside of the model overview. More specifically in the top-right of the overview in the list of data sources.

JSON placeholder in the data sources overview (data model)

After successfully installing the block, we can continue working with it.

Creating remote models

Let's begin where left off, the data model overview. Let's create a model based on the data source we installed. If you want to learn more about data sources, make sure to check out this article.

Alright, click on New model and select the remote model option. After that select the JSON placeholder data source and select the model that you want to create a remote model for, in this case, we'll select 'Todo'. You can select more than just one in this option but for this use case, one model suffices.

Setting up the JSON placeholder remote model

Click on Add models to add the remote data model to your application.

All the action steps that are needed are already available with the installation of the block. Meaning we can instantly build a page and display the data from the data source.

Displaying the data

Alright, let's add a page to display the data from JSON placeholder. The best way to do this is by making use of the 'back office' template, creating a new page and selecting the template.

Creating a new page with the back office template to display data from JSON placeholder

On the last page of the configure modal, I've chosen not to add a search option and I skipped the userId property present in the model.

Configuring a new page with the back office template to display data from JSON placeholder

Hit Save to create the page. Once the page is created, simply hit the Play button to compile the page and check out if what we've just created is working as we expect.

The back office overview

And as we can see there are quite a few tasks present. If we now want to check out some details of a task, we can click on the exclamation mark icon. A tab from the side will open and display some details.

The back office detail view

And there we go, retrieving just one task works as well. This verifies that our data source is working as intended and that the steps are also doing their job correctly.

You can create other remote models to make this use case a bit more fancy but we'll leave it here for this demonstration.

Did this answer your question?