Need some dummy data for your application? JSON placeholder makes displaying dummy data in your application a breeze.
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 needs to be installed into our application is the JSON Placeholder 2.0.
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.
Once you've installed the 'JSON Placeholder 2.0' data source, you'll find it inside the model overview. More specifically in the top-right of the overview in the list of data sources.
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.
All right, 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.
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
All right, let's add a page to display the data from the 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.
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.
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.
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.
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.