In this article, you'll learn how to:

To create a connection with another Betty Blocks application we'll use the remote data sources feature. In order to work with this feature we'll have to make use of a Swagger file, or use oData, you'll have to create this manually for your application.

The 'Get Betty Blocks data' action step is being used, make sure to install it when you're trying to build along.

To display data from an application we'll first of all need a model with data. In this use case we won't go in-depth, simply create a project model like this:
​

Add some projects to the model so that we can display those projects in our other application. This can be done via the playground or by creating a new page with a create form.

For this quick use case make sure that all the roles and permissions are set to public for this model.

With the model and its data ready, create a swagger file that we can use to create a data source in another application. Check out Swagger's documentation to create a file or use oData, in this use case we'll use swagger.

With the source application set up, we can open another application. In this application, we'll create a data source based on the source application's 'project' model.

First, navigate to the public files of the application.

Here, upload the swagger file based on the source application.

Click on the Copy link button, we'll need to link to this file in the data source that we'll create next.

Next up, go to the data model tab and click on the New data source button. We don't want to select an already existing so click the button again to create one from scratch. Give the data source a name and paste the link we just copied in the URL field. Click connect to establish a connection.

If the swagger file works we'll get a small prompt telling us we're connected. In more advanced data sources an API key could be needed but that's outside the scope of this use case.

With the data source in place, we can copy over the model in the 'source' application into our new application. To do this create a new model and select the remote model option. Then select the data source we just created, depending on which models you specified in your swagger file. We can now select our 'project' model, and finally click on Add models to add it to the new application.

Once the model is added we can instantly see it in the list of already existing models.

We can see the properties are there, just like the 'source' application.

Now to show this data in the new application, head to the actions tab of the model. Click on the all for Remote Model Project, this will open an action. In this action, we'll retrieve all the projects from the 'source' application.

With the action open, drag the 'Get Betty Blocks data' block in between the start and finish step. Configuring it is rather self-explanatory.

The first option 'params' are already present, simply select the params variable.

The second option is to fill in the runtime URL of the 'source' application, go to any action in the 'source' application and copy the URL of the playground. Paste it in the data API URL field of the action step.

The third step is to copy the UUID of the authentication profile. Check out this article, to learn how you can find the UUID of your authentication profile. Copy and paste the UUID in the authentication profile UUID field in the action step.

The third and fourth step is to fill in the email address and the password of a user with the authentication profile above.

The fifth field is to give the name of the model you'd like to retrieve, in this case: 'Project'.

The sixth option lets us choose how we want to retrieve the data, either a single record or a collection of records, in our case, we'll use a collection.

The seventh option is to map parent models, we won't go into that in this use case.

The last option is the response, in our case, I'll name it 'orange_projects'.

After configuring the step it'll look like this:

It's very important to assign the result variable 'orange_projects' to the finish step.

Voila, we can now display all the data that the action retrieves.

Create a new page, in this page drag a data table onto the canvas and configure it like this:

Compile the page by clicking in the Play button in the top-left corner, if everything is configured properly we should be able to see our projects from the 'source' application.

What's cool is that it updates on the spot so when we check the second page:

Only one project is present here, but if we create another project in the 'source' application and we refresh the page:

It'll show up without us having to do anything!

This is a very straight-to-the-point use case, but the theory used in this article can be applied to way more complex use cases.