After reading this article you'll learn how to:

In this example we'll have to install two steps. Let's start off by searching 'json' in the block store. The blocks that need to be installed into our application are the JSON placeholder data source & the {JSON} placeholder typicode data source step. You can find bot by searching for 'json' in the search bar of the block store.

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.

After installing the '{JSON} placeholder typicode data source' step, it can be found in your action builder of the application that was selected. You'll find it in its own section of the action steps.

Once you've installed the 'JSON placeholder' 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.

After successfully installing both blocks, we can continue working with them.

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.

Click on Add models to add the remote data model to your application. We can now proceed to the next step which is creating the actions for this remote model.

Go to the Todo model and click on the actions tab, we'll work with just two of the actions that are there in this example, namely 'one for Remote Model Todo' and 'all for Remote Model Todo'. We will start off with the latter, click on it to open the action.

With the action opened up one of the first things you'll likely notice is that there are some variables already present inside the start step. We'll use these variables in the {JSON} placeholder typicode data source step.

Drag the 'get placeholder data' step in the action flow and configure it like so:

As you can tell, the variables already present are used in the step, type result in the response and press Save to save the action step. That's all we need to do to retrieve all the data from the remote model. We'll display this data in our application in a second but first, we'll create the action to retrieve the details of just one todo object.

Head back to the actions tab of the remote model and click on the one for Remote Model Todo to open the action. The exact same variables are present again in the start step of this action, but this time we'll drag the 'get one placeholder record' step into our action flow.

Configure the step like the image above and hit Save to save the step.

With our blocks properly configured, 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.

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.

Note: the two blocks will likely be combined in the future, making the data source also Betty Blocks verified.