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.

Technical highlights:

  • 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 panel is implemented using Javascript and JQuery as well as a number of smaller libraries such as jquery-ui-timepicker-addon, selectize.js, spin.js, bootstrap-notify.js, and jspdf. The panel is displayed in the following screenshot:

Options Panel

The Gantt chart utilizes Javascript/JQuery and a heavily customized version of the DXHTML library. The chart is displayed in the next screenshot (the top panel is collapsed):

Gantt Chart

The equipment occupancy chart also utilizes Javascript/JQuery and a heavily customized version of the DXHTML library. The chart is displayed in the next screenshot (the top panel is collapsed):

Equipment Occupancy Chart

The inventory chart utilizes Javascript/JQuery and a chart based on the Flot charting library. It includes a number of enhancements over the default chart (e.g. zoom bar, line visibility check boxes, overview map). The following screenshot depicts the inventory chart:

Inventory Chart

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:

Schedule Report