How to Build a .NET Report from JSON Data Sources

In ComponentOne, we introduced the C1JsonDataConnector. It enables quick connections to JSON data using ADO.NET or Entity Framework Core. The ComponentOne 22v1 release enhances it further by adding integration of C1JsonDataConnector with FlexReportDesigner. To make it user-friendly, the FlexReportDesigner now supports a direct connection with JSON data sources through the data connection wizard.

In this blog, we will see how we can connect to a JSON data source in FlexReportDesigner and create a C1FlexReport with a JSON Data Source. Let’s open the FlexReportDesigner and create a new empty FlexReport and then follow the sections defined below.

FlexReportDesigner

Creating Connection with the JSON Data Source

The first step is to create a connection to the JSON data source as follows:

  • Go to the “Data” tab
  • Right Click on the “Main” data source and choose “Edit” from the context menu
  • The “Data Sources” dialog will open
  • Open the “Data provider” dropdown and choose “C1.AdoNet.Json”
  • Click on the ellipsis button ( “…” ) in front of the Connection String Field
  • “Data Link Properties” dialog will open
  • Set the connection properties like URI, Document Model, JsonPath, etc. Since we will be using a JSON file, we only need to set the Uri, Document Model, and the JsonPath properties. For more information on JsonDataConnection properties, you can refer to the C1JsonDataConnector Documentation
  • Choose the Table from the DataSource tab
  • Click OK. If the connection is successful, you will see all the Fields under the Main Data Source

Please refer to the gif below for the above steps.

Creating Connection with the JSON Data Source

And just like that, by performing a few steps, we have connected to our JSON Data Source; for this example, we have used the Customers data from northwind.netcore.io.

Creating and Previewing the FlexReport

Now that we have connected to our JSON data source, we can create the layout of our FlexReport as we want. The final report will look similar to the following screenshot showing the data from our JSON data source.

Customers Final FlexReport

Download the ComponentOne 2022v1 release today and try it yourself.

 

comments powered by Disqus