Student Information Form

This PowerSchool plug-in adds a web report version of the Student Information Form to the system. Built with HandlebarsJS and Webpack.

To Access the Form

1. Make a selection of students
2. Group the Group Functions menu or the System Reports page, select Student Information Report.

Installing th repo

*Note: these are not the instructions for installing a plugin in PowerSchool. These are the instructions for installing the repo on your local machine for development purposes.

Clone this repo and npm install (note: unless you have admin rights, an EUS Technician from ITSS will have to install Node on your machine - get them to select the latest LTS version.)

npm i

Usage

Development server

npm start

You can view the development server at localhost:8080.

To view report cards in development, change the reference to your JSON file in 'index.js' to 'students_fake.json', and the same thing for 'courses.json'. This file contains fake data in the correct format, with no SQL queries or PSHTML tags that only work within PowerSchool.

Production build

npm run build

Reports must then be content of each project's 'dist' folder can be added to a named folder for that report card in the pei_reportcards plugin.

Features

• webpack

Dependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration
• cross-env - Cross platform configuration

Handlebars.js

• handlebars - Templating language used in v2 of report cards

Loaders

• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM
• handlebars-loader -

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• css-minimizer-webpack-plugin - Optimize and minimize CSS assets

Linters

• eslint - Enforce styleguide across application
• eslint-config-prettier - Implement prettier rules
  • • prettier - Dependency for prettier-webpack-plugin plugin
• eslint-import-resolver-webpack - Throw exceptions for import/export in webpack

Notes on diffs from original config:

• I adjusted the config files to handle multi-page projects instead of single pages. Each page (handlebars template) needs to be added to the pages array in webpack.common.js using the same name as the template file.
• I removed Sass and PostCSS because they were introducing vulnerabilities and neither was going to be in use.
• I removed Babel because all users are on managed evergreen versions of Chrome or Edge and can interpret ES6 code without transpiling.
• The linters are having a hard time with both Handlebars templates (mixed context) and PowerSchool DATs (tlist_sql especially), but I haven't had a chance to really investigate how we could possibly solve that