The presented functionality is part of the SchedulePro WebViewer web application, a product created on behalf of Intelligen Inc. in order to monitor production schedule in process-based production plants. The application is currently used for running the operations in several well-known, multi-national pharmaceutical companies across the globe. The application was built gradually during the course of almost ten years, thereby encompassing a number of different technologies that were becoming popular as the application evolved.
Building the WebViewer took place in three distinct phases:
- Phase 1: A Web Forms application was created from scratch, providing most of its functionality via the ReportViewer control in the Microsoft.Reporting.WebForms namespace.
- Phase 2: The back-end was extended with Web API functionality and the front-end was developed using various libraries such as JQuery and Knockout.
- Phase 3: A React build pipeline was integrated into the solution (link to blog post) and new functionality was implemented in the form of React components (link to Web Forms/React integration).
This is functionality created as part of phase 2 of the WebViewer development.
Functionality at a glance:
- Four main pages including: a Gantt chart, an equipment occupancy chart, an inventory chart and a schedule report.
- All pages include a collapsible data selection/filtering panel at the top and a chart or tabular report at the bottom, displaying the selected data.
- Between the top panel and the data several display options are presented in the form of a menu bar.
- Charts can be saved as images and reports can be saved in .pdf or .csv format.
- The data selection/filtering panel employees date/time controls for absolute or relative date selection, combo boxes with synchronous or asynchronous search, tree views for multiple resource selection and modes of filtering criteria.
- All client-side application state is saved in local storage and restored after every page reload for seamless user navigation.
- Communication of the front-end with the back-end takes place via a Web API controller. Actions are async and cancellable through a framework-provided cancellation token.
- Database access is facilitated by Entity Framework. All queries are asynchronous and cancelable.
- Optional Windows Authentication is used.
The report and paging functionality follows the MVVM pattern and utilizes the Knockout.js library. The next screenshot contains the tabular report with paging and sorting options: