Connecting Your Reports to a JSON Data Source

We are excited to announce that the Bold Reports Designer supports JSON data connectors as of the September 2020 Bold Reports release. The connector allows you to feed data to your report from the following sources: local storage, external link, or inline input area.

In this blog post, we will walk you through the steps to connect your JSON data to Bold Reports Designer. Using that data feed, we will generate a report to display a list of products in a restaurant. As a first step, launch the Bold Reports Enterprise server demo site, referring to the steps to create a report, and create a new report.

Choose JSON data connector

To create a new data source with a JSON data connection, open the Data Sources configuration panel by selecting the data source icon on the right.

In the DATA configuration panel, click NEW DATA. The DATA SOURCES panel lists the data connectors as shown in the following screenshot.

Choose the JSON connector. The JSON data connection panel will be displayed.

Connecting with JSON data

In the connection properties, provide a unique name for the data source. Select the source type of your JSON data. In Bold Reports Designer, we can connect to JSON data from the following sources: local storage, external link, and inline input area.

For example, let’s connect to JSON data using a file from the local storage. Select the File option from the Type drop-down. For more information, please refer to the documentation on connecting to JSON data from a .json file in the local storage.

Click the ellipsis button to open the file upload window.

Note: The .json file cannot exceed the maximum size of 20 MB.

You can download the sample data ProductList.json to proceed with the data source creation steps.

Find the JSON file in the upload window and click Open.

On successfully uploading the .json file, click Connect to create a data source.

You can refer to the load from external URL and inline data documentation to connect to your .json data from external URL and inline input sources.

Design query

After clicking Connect, the JSON file will be processed and you will be directed to the query designer on successful connection.

The JSON result available in the data source will be displayed in the left pane of the query designer.

Drag the table into the design pane. You can exclude columns in the data table and select only the columns that you require for your data set. Execute the query and click Finish.

Note: In the schema tree, the nested fields in the XML data will be shown as flat structures.

Design a report

Using the data set that we created, we will now design a report similar to a menu card to display a list of products in a restaurant.

Refer to the design a report using lists documentation and create a similar report design.

Preview report

You can preview the report at design time using the built-in Bold Reports Viewer to ensure the report design is as expected. Switch to the preview mode.

In preview, our report will display the list of products along with their respective details, like in the following screenshot.

Conclusion

I hope this blog provided a clear overview on how to connect to a .json data source in Bold Reports Designer and generate a report using the data feed. For additional information on connecting a JSON data source to Bold Reports, you can go through the documentation. I have also attached the generated .rdl file for further reference.

If you have any questions, please post them in the comments section. You can also contact us by submitting your questions through our contact page or, if you already have an account, you can log in to submit your support question.

Bold Reports now comes with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!

Stay tuned to our official Twitter, Facebook, LinkedIn, Pinterest, and Instagram pages for announcements about releases.