Embedded reporting mainly states a method of integrating business intelligence reporting tools like dashboards and charts into a software application. BI is a process of collecting and displaying data in a way that is easy to analyze and digest. The reports cover various aspects of an organization which ranges from sales to marketing and other operations.
BI handles areas of data and analytics, but reporting would focus on presenting the data most easily for better understanding. Embedded reporting would allow multiple users to view those dashboards and data streams that are relevant to use instead of shifting to different dashboards.
How to use Embedded reporting?
One of the common uses of this beautiful reporting tool is in CRM (customer relationship management) suites. The applications are used to increase popular ways of centralizing and optimizing sales and marketing operations. Using BI reports, companies can reduce the time it takes to derive actionable BI insights.
Here in this blog, we’ll learn how to embed beautiful reporting into ASP Net core web applications.
HTML5 Report Viewer
The viewer displays report documents on a webpage. They use a custom JQuery based widget, which comes with rich-feature and stateful plugins. The viewer stores the layout in the HTML template, which supports mobile and desktop browsers with full customized methods. HTML viewer includes built-in search functions, hyperlink interaction, and multi-page zoom view support.
Check a few of the HTML5 viewer features
The interactive view allows drill-down and drill-through
Ability to scale the pages for the best viewing experience
Report Parameter intuitive UI for user input
Customized layout based on a pure HTML5 template
Support mobile as well as desktop browsers
Color themes using Kendo UI theming mechanism
Scale the pages for best experience including full-page or custom scale factor
What are the system requirements for the HTML5 report viewer?
Required Service: The viewer would need a running instance of the Telerik Reporting rest service to display reports.
Required JavaScript Libraries and Files:
JQuery minimum required version 1.9.1
Kendo UI Professional Q3 2015
HTML5 Report Viewer JavaScript
Required HTML5 compliant browser
Use HTML5 report viewer with Reporting REST Service
It’s one of the quickest ways to add an HTML5 report viewer to a web project. Here, the viewer won’t be able to process and render work by itself, so it uses the Reporting Rest service. The beautiful reporting services wrap the report engine and expose its functionality over HTTPso the viewer can access it easily. There’s a common scenario used with viewer-service interaction that is described with a high level of abstraction explained below
Image Courtesy: https://www.telerik.com/
The viewer requests a report document. It provides report definition with a unique identifier
The service search for the requested report definition and guide the report engine to process and render in the HTML5 report document
Later the service will return the produced result to the viewer
Finally, the viewer will display the report document to the user
Host Reporting REST service in your ASP.Net core web Application
No viewer can function without the service. Let’s assume that the project display report is a service project then uses a separate project with the solution as explained in the below blog. If you don’t have ASP net core web applications, then you can hire an ASP.Net core developer or an ASP.Net development company. Or else follow the below steps to create one:
Open Visual Studio 2019
Now, Open File>New>Project
Choose ASP.Net Core Web Application and Press Next
Enter your Project name and click to create one
Choose .Net Core and ASP.Net Core 3.1 framework.
Choose web app template and click on create
Now you can host a reporting rest service by adding NuGet Package. Add own dependencies to project using service packages like Microsoft.AspNet.Core.MVC.NewtonsoftJson.
We can activate NewtonsoftJson services by using the below code: services.AddRazorPages().AddNewtonsoftJson();
Now add, minimal Reporting Rest services like:
Image Courtesy: https://www.telerik.com/
The storage section in the above service specifies internal state objects and temp files. ReportSourceResolver specifies for report definition inside the Reports application folder.
There is no report folder yet, as we need to add a report, let’s create a folder in the project root named under Reports and copy your report definition file into it. Configure the API controller inside ConfigureServices method services.AddControllers();
Now, Map the controller endpoints by adding the code below:
Now the next step is to create an actual Reportscontroller class At the root of the project add new controllers’ folder Select Add>Controller
Choose an API controller with an empty template and click to Add it Name new controller ReportsController.cs and click on Add
Know how to change the content of the new controller
Request a Report Document and Display Report Document in HTML5 Report Viewer In this section, we’ll get to know how to request a report document and display it into the HTML5 report viewer.
Add custom section like the head element of the Layout page
So now, inside pages/Index.cshtml add div element to hold the viewer. The element inside it comes with unique id. Set it with CSS file, inline style dimension
Later, add a link to section head to the desired Kendo UI theme in custom head and finally to the viewer widget’s JavaScript file by calling the Telerik_ReportViewer method.
Understand below Scripts section which helps to insert viewer script after JQuery
Check the final Index. cshtml file
Now press F5 in visual studio and check HTML5 Report Viewer. The service instructs Report Engine to render the report definition in HTML5 form and return it to the viewer as a report document.
Check final output
Image Courtesy: https://www.telerik.com/
If you want to check the errors, then press F12 in the browser and log the network traffic. If you want to hire ASP.NET Core Developer or looking for ASP.NET Development Company connect with us to discuss your requirements.
Tejas Patel is a Co-Founder of Concetto Labs and he have 18+ years of technical experience in building high quality and scalable Web & Mobile Applications.
Summary: .NET MAUI multi-platform App User is a most attractive feature in developing cross-platform applications. This blog will briefly discuss the potential to streamline app development processes across iOS, Android, and Windows. Have you ever wondered about Mobile App Development and desktop application development using XAML and .NET C# from a single base? So now, […]
Summary: Discover necessary .NET Core best practices for developing robust applications. Also, learn about the benefits, basics, and reasons behind using ASP. NET Core. Developing robust and efficient applications is essential in developing a website or any web-based application. Microsoft’s .NET Core framework provides developers with a powerful platform to create cross-platform apps that are […]
Why Our Client Love Us?
Fast kick-off
Agile Ready
98% Client Retention
360-Degree solutions
Our integrity and process focuses largely on providing every customer the best recommendations for their respective business. Our clients become recurring customers because we always go beyond their expectations to deliver the best solutions.
Concetto Labs have provided us with a tremendous amount of help. Their competence in various IT fields led to a positive outcome while facing different challenges. A lot of value was given by their helpful professional staff. To describe this company in three words: effectiveness, collaboration, trust. I would also like to personally thank Mr. Tejas Patel for his positive, friendly, and highly competent approach. The all-around support provided by him made every task at hand a no-brainer.
Customer for over 4 yearsMiss. Caroline JackSouth Africa
It has been an absolute pleasure working with the Concetto Labs team! We have worked together on a few projects now, all of which have been successful. You can rely on good communication and response times from these guys. And they go above and beyond to ensure that the result is achieved. Because of their great service, they have become an integral part of our business and we will continue to use them going forward.
Customer for over 3 yearsMr. Richard BartlettUnited States
Concetto Labs is a group of incredibly talented individuals. They are very responsive and communicate with you each and every step of the process. I worked with Manish Patel throughout the entire process and must say that I have never conducted business with a more honest and professional individual. Together with his team, Manish created www.travcentiverewards.com exactly how we envisioned it to be. Thanks for all of your hard work.
Customer for over 2 yearsMr. Conrad AbrahamUnited States
Concetto Labs team is my go-to for any simple or complex development projects. They have risen to the challenge. Great project management, communication, and super quick turnaround. I've done multiple projects with them and don't plan on changing that.
Customer for over 4 yearsMr. Edward ChinCanada
Concetto Labs was able to bring my complex idea to life. Throughout the project, Concetto Labs maintained constant communications and was always professional - considering I had no experience in what I wanted to create their welcoming attitude, patience, and knowledge in the field created the perfect environment to work in. I was so impressed with their work that I've kept them on board as my go-to experts. Thanks for the worthwhile experience and the breathtaking product.
Karuna Govind CTO & Co Founder (Coupay)London, UK
We started working with Concetto Labs due to the influx of work on mobile (Flutter) and frontend (React.js). It's been fantastic working with them. Good, consistent communication and good quality of work means they may be our first choice for many projects to come.
We are a healthcare IT company and wanted to build a Mobile Application for both Android and IOS using Flutter. The Concetto Lab team has been very patient with our project requirements and made sure all our queries are answered. It was a great show of professionalism and customer relationship. Even during the project, the team was very accommodating of all the changes we requested. The project was delivered successfully and we deployed the app in the Android Play Store. Overall, the entire process has been very transparent and the team was able to deliver exactly what we had envisioned the project outcome to look like.
Want to create something similar?
Trusted By
USA
2355 Prospect LN, Broomfield CO-80023
Canada
1557 Clearbrook Dr, Oshawa, ON L1K 2P6
UK
6 Hastings Avenue, Ilford, IG6 1DZ, UK
Norway
Lille Hunstad 4A, 8019 Bodø
India
303-309, City Center, Science City Road, Ahmedabad - 380060
Australia
14/83 Windsor Grove, Klemzig, Adelaide SA 5087
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.