Connecting to Real Data in App Builder

Easily connecting real, live data as you build your app is important, especially when you are building prototypes so you can get feedback from stakeholders and customers. By including live data you can take your prototypes and proof of concepts to the next level and ensure you are delivering the entire experience, not just interactions. Prototypes with real data also have a different “look” than with dummy data, and they give the tester / stakeholder a real app experience, not a ‘sort-of-app-experience’, which usually leads to confusion and miscommunication.

In this code-focused Accelerator webinar, we step through how you can add real live data in App Builder(tm), including how to get your data into the correct format for the low-code platform itself, connect remote and local data sources, use data bound controls and generate data access code. And after the earlier release back in March, the drag & drop app maker now gives you the option to use Swagger UI for your Angular or Blazor projects. We will show you the ways to do it further down the article.

Here are a few of the main demos:

• Connect to JSON Data Sources and Bind a Data Grid in App Builder
• Data Binding a List Control and Card Control for Social Media
• How to Create JSON Data in Excel with Excel2Json.io
• What is JSON?
• Using App Builder Swagger UI with Angular and Blazor apps

Connect to JSON Data Sources and Bind a Data Grid in App Builder 

This is a demo of data binding by uploading a local JSON data file. Data binding is how you take your data (from a JSON file, SQL Server, etc) and display it in your app.  Without data binding, you wouldn’t see any real, live data. With App Builder, data binding is simple – each UI control that can be bound to data has a “Data” property, which lets you set the data source and the field that you want to display in the UI control.

In the case of the data grid, you App Builder generates all the Angular data binding code, including binding attributes on the data grid, the code-behind that calls the service, and the service that requests the data to be bound to the control. All this code is automatically created for you, you do not need to write any data binding code.

Angular Data Binding a List Control and Card Control for Social Media 

This demo connects a List Control (which is in the toolbox) to a URL which is in the data source. It shows how you can easily grab elements from a data source and add real data to your Control. Data binding is how you take your data (from a JSON file, SQL Server, etc) and display it in your app.  Without data binding, you wouldn’t see any real, live data. With App Builder, data binding is simple – each UI control that can be bound to data has a “Data” property, which lets you set the data source and the field that you want to display in the UI control.

We also demo how to data bind a Card Control to a JSON data source for use in a travel sample app with images coming from real data sources for social media.

How to Create JSON Data in Excel with Excel2Json.io 

What if you don’t have JSON data or a JSON feed but you want to use the data in App Builder? The easiest way is to use https://Excel2JSON.io, an app we recently published that lets you take any Excel file and convert it to JSON. This is useful since the App Builder lets you upload local JSON data, or it lets you connect to a cloud-based URL to get JSON data.

What is JSON?

JSON, or JavaScript Object Notation, is a standard format and self-describing syntax that is most used to pass data from web servers to web pages to display data in data bound UI controls when building web apps. It is an open standard, language independent and for the most part, can be parsed and displayed in web pages with a single line of code. Its popularity is because it is easy to create, easy to read, and when used with standard web compression, is a very lightweight way to pass data from server to client.

In App Builder, you use JSON to pass data to data bound controls. JSON displays data in name/value pairs, separated by commas. For example, this is an example of data in Excel, with the same data displayed in JSON:

 

As you can see, it’s completely self-describing syntax, making is simple to understand and parse in your apps.

Here is Excel2Json in action, with a complete data dump of the Northwind database converted to JSON. You can try yourself, upload your own Excel data, or start from scratch to create an Excel file and create JSON data in real time.

How To Get Started with Swagger UI in the Low-Code App Builder

Through the App Builder Swagger UI you can easily load a Swagger definition by either uploading a file or specifying a URL.Once your Swagger definition is loaded, the Configure Endpoints dialog will appear. When you pick an endpoint and set the required auth and params, you can proceed with picking a particular data field that will be later used to connect to a data consuming component.

Then, select Grid, Card, Combo Box or any other data bound component, scroll down the menu to locate and select the table from the Data Source that you want to connect to. Finally, connect the component section with the selected table field. Each control that supports data binding will have additional properties in the Property Editor that lets you customize how your data is presented. When your app component's data binding is ready, go ahead and check out the preview code or download the complete app. You can choose between developing Angular apps and Blazor app creation and code generation.

GitHub Integration, Using Pre-Built Layouts and More on YouTube

This Connecting to Real Data in App Builder Accelerator is one in a series of 30-minute Accelerators we are producing regularly so you can quickly learn the tips and tricks of working with App Builder to speed your app building. View recent Accelerators on our YouTube page and sign up for the next Accelerator on the Infragistics homepage.

[Last updated: 23.08.2022]