A few weeks ago, I began finishing up a project called DARSI - the Disability Accommodation Request Submission Information application. DARSI began as replacement for third party software our Access and Disability Services (ADS) department was using to grant accommodations based on the validation of a student's disabilities. After a successful project transferring the ADS student note exchange (an accommodation) from a physical copy and pick up process to electronic, ADS entrusted us with effectively retooling the entire project. And by "us," I mean Enterprise Systems within the Information Technology Services area of the college.
There are two parts to DARSI - the submission form that the student fills out, and the administrative DARSI which allows users to look at the data. The submission form was my first Angular project which read a JSON file that contained the questions the student was to respond to. The JSON file was structured in a hierarchical format in which child questions would be displayed based on the parent questions response. The JSON file contained properties that defined how the particular question would appear on the page and it also defined where the data was stored. The Angular app takes advantage of the fact that a component can recursively call itself. This lets us drill down multiple levels.
The first version of DARSI was built in AngularJS because at the time I was new to Angular and wasn't ready to build something frontend heavy for our users in a new environment. DARSI v2 is now in Angular using Material which is a great environment. Fairly easy to use and navigate from a coding perspective and has the tools that users need in their applications. One of the features that was asked for by ADS was the ability to get specific data points. The student submission form, if the student filled out every checkbox and answered every question, contains around 400 data points. Basically ADS wanted to be able to see data by data point instead of by student. This proved an interesting challenge.
The question became how can the user intuitively navigate so many data points. My solution was to leverage the JSON file that controls the submission form. Just after a few minutes of programming, I realized the JSON file wasn't going to practical because even though it had all the questions / data points, it also contained a lot of the formatting the form reader needed to render a decent form. The solution was to make a copy of the JSON file and the modify it as needed. This does introduce an additional level of maintenance because the files will need to be manually synced when questions are added or removed, or select options are modified. But it's a small trade for what the user is getting and the fact that this reporting system would reduce the number of times ADS would need IT support to get data.
The next step was to decide how to present the data points from the report definition. I thought I could use categorization with dropdowns and lists, but with a recursive set of data, that didn't seem very tenable. In looking at the Material components, I discovered a node tree. After about an two or three hours, I was able to connect the initial JSON file to the tree and be able to navigate through the nodes. So I had my core set of data which was the student population who made submissions and access to the data points. Next up was to build out the criteria options and such and then have the user be able to return the student population that match the criteria. Long story short, it worked like a charm. ADS was / is happy.
So then I thought: What if I could take that core query that the DARSI Advance Reporting relied on and abstract it into the JSON file - or - allow the system to read the SQL from somewhere else. So that's what we are going to build: A Report Builder that can be used across multiple applications. The application will have an Angular frontend, Coldfusion CFScript in the middle, and Oracle for a database. But I suspect you could do this in PHP or any other language and database.
Let's get started....
C:\development>ng new report-builder