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 3 of the WebViewer development. Please follow the links for more information on the migration rationale, the React integration details and the React component architecture.
Functionality at a glance:
- Three main pages include: an activities report, a key dates report and a profile saving report.
- All pages include a collapsible data selection/filtering panel at the top and a tabular report at the bottom. The panel has been redesigned from the ground up as a React component.
- Profile saving allows for saving the panel options to the database. The options can then be loaded directly into the panel of any of the application pages via an ajax search box.
- React state is saved in the local storage and restored after every page reload.
Technical highlights:
- A build pipeline was integrated into the application build process. Each page is implemented as a separate React application whose output Javascript code is included in the relevant .aspx page. For more information on the details please visit this (link to Web Form/React case study).
- The code is written in ES6 and transpiled using babel. Most polyfills are taken care of by babel using the core-js module. External polyfills are used for promises (@babel/polyfill), fetch (isomorphic-fetch), fetch aborting (abortcontroller-polyfill), etc., mostly for IE 11 support.
- The panel is implemented in pure React. JQuery based controls where replaced with React-compatible controls such as react-datetime, react-checkbox-tree, and react-select.
- As in phase 2, database access is facilitated by Entity Framework and the queries are asynchronous and cancelable.
- Windows Authentication is used for the content profiles page.
The panel is implemented following the render props technique, essentially providing a template that accepts and renders any component below the panel area. The panel is displayed in the following screenshot:
The activities view is implemented as an Activities component that is passed as a render prop to the options panel and shows the weekly tasks according to the selected criteria. It is displayed in the following screenshot:
The key dates view is implemented as a KeyDates component that is passed as a render prop to the options panel and shows the key events and their dates for each production batch, according to the selected criteria. It is displayed in the following screenshot:
The content profiles view is also implemented as a React component and passed via a Render Prop to the options panel. The component allows uploading a profile, searching for a profile, paging and deleting. It is displayed in the following screenshot:
