# Digital Print Request System A web-based print request system for University of Westminster Harrow Digital Print services. --- ## Architecture ```   DIGITAL PRINT REQUEST FLOW    POST JSON       index.html   Google Apps Script       (GitHub  Reference Number  (Web App Endpoint)   Pages)           Redirect with  Append Row  ?ref=PR-XXXXXX  + Send Email          MS Forms   Google Sheet       (File   (Order Database   Upload)   + Status Tracking)      Custom Menu  Actions     Email to Student     (Confirmation /   Ready Notification)  ``` --- ## Setup Instructions ### 1. Create the Google Sheet 1. Go to [Google Sheets](https://sheets.google.com) and sign in with your institutional Google account 2. Click **Blank** to create a new spreadsheet 3. Name it something descriptive like `Digital Print Requests 2024-25` 4. The headers will be created automatically when the first submission is received, but you can run the setup manually (see Step 2) ### 2. Set Up Google Apps Script 1. In your Google Sheet, go to **Extensions Apps Script** 2. Delete any existing code in the editor 3. Copy the entire contents of `google-apps-script.js` and paste it into the editor 4. Click the **Save** icon (or press `Ctrl/Cmd + S`) 5. Name your project (e.g., "Print Request Handler") #### Configure the Script Before deploying, update the `CONFIG` object near the top of the script: ```javascript const CONFIG = { senderName: 'Harrow Digital Print', universityName: 'University of Westminster', departmentEmail: 'your.email@westminster.ac.uk', // Update this sheetName: 'Sheet1', // Change if your sheet has a different name // ... }; ``` #### Deploy as Web App 1. Click **Deploy New deployment** 2. Click the gear icon  next to "Select type" and choose **Web app** 3. Configure the settings: - **Description**: `Print Request API v1` - **Execute as**: `Me` - **Who has access**: `Anyone` 4. Click **Deploy** 5. Click **Authorise access** when prompted 6. Select your Google account and grant the required permissions 7. **Copy the Web App URL**  you'll need this for the HTML form >  **Important**: If you make changes to the script later, you must create a **new deployment** for those changes to take effect. #### Create Headers Manually (Optional) If you want to set up the headers before receiving any submissions: 1. In Apps Script, click on the function dropdown (shows `myFunction` by default) 2. Select `manuallyCreateHeaders` 3. Click **Run** ### 3. Create the MS Forms for File Upload 1. Go to [Microsoft Forms](https://forms.office.com) 2. Sign in with your university Microsoft account 3. Click **New Form** 4. Name it "Digital Print File Upload" #### Add Fields 1. **Reference Number** (required) - Click **Add new Text** - Question: "Reference Number" - Subtitle: "Enter your reference number (e.g., PR-123456)" - Toggle **Required** on 2. **File Upload** (required) - Click **Add new File upload** - Question: "Upload your print file(s)" - Subtitle: "Accepted formats: TIFF, PSD, PDF, JPEG (300 DPI minimum)" - Set file number limit (e.g., up to 10 files) - Set file size limit (e.g., 1GB total) - Toggle **Required** on 3. **Additional Comments** (optional) - Click **Add new Text** - Question: "Any additional comments?" - Toggle **Long answer** on #### Get the Form URL 1. Click **Collect responses** (or **Share**) 2. Copy the form URL 3. You'll use this URL in the HTML configuration ### 4. Configure the HTML Form 1. Open `index.html` in a text editor 2. Scroll to the bottom and find the `CONFIG` object: ```javascript const CONFIG = { googleScriptUrl: 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec', msFormsUrl: 'https://forms.office.com/Pages/ResponsePage.aspx?id=YOUR_FORM_ID' }; ``` 3. Replace `YOUR_SCRIPT_ID` with your actual Google Apps Script Web App URL 4. Replace `YOUR_FORM_ID` with your actual Microsoft Forms URL 5. Save the file ### 5. Deploy to GitHub Pages 1. Create a new repository on GitHub 2. Upload all three files: - `index.html` - `google-apps-script.js` - `README.md` 3. Enable GitHub Pages: - Go to **Settings Pages** - Under "Source", select **Deploy from a branch** - Choose **main** branch and **/ (root)** folder - Click **Save** 4. Your form will be live at: `https://yourusername.github.io/repository-name/` --- ## How It Works ### For Students 1. **Visit the form**  Access the print request form via the GitHub Pages URL 2. **Configure your print**  Select size, paper type, and quantity; see the live price calculation 3. **Complete pre-flight checks**  Confirm your image meets the technical requirements 4. **Enter your details**  Provide name, email, student ID, and course 5. **Submit the form**  Receive a unique reference number (PR-XXXXXX) 6. **Upload your files**  Click the link to upload files via Microsoft Forms, including your reference number 7. **Wait for email**  Receive a confirmation email immediately, then a "ready for collection" email when prints are done 8. **Collect and pay**  Pick up your prints from the Digital Print room with your reference number and payment ### For Technicians #### Viewing Requests - Open the Google Sheet to see all print requests - Each row contains all the order details, contact information, and pre-flight check confirmations - Status column shows: `New` `Processing` `Ready for Collection` `Collected` #### Using the Custom Menu When you open the Google Sheet, a **Print Requests** menu appears with these options: | Menu Item | Action | |-----------|--------| | Send Ready Email for Selected Row | Sends "prints ready" email to the student and updates status | | Update Status to Processing | Marks the order as being worked on | | Update Status to Ready | Marks as ready (also sets Ready Date) | | Update Status to Collected | Marks as collected by student | | Refresh Headers | Reformats the header row if needed | #### Workflow 1. Review new submissions in the sheet 2. Check the uploaded files in Microsoft Forms responses 3. Set status to **Processing** when starting the print job 4. Once complete, use **Send Ready Email for Selected Row** to notify the student 5. When the student collects, set status to **Collected** --- ## Customisation ### Changing Prices In `index.html`, find the `PRICES` object in the JavaScript section: ```javascript const PRICES = { B0: { plain: 10, standard: 80, fibre: 112 }, A0: { plain: 5, standard: 40, fibre: 56 }, A1: { plain: 2.50, standard: 20, fibre: 28 }, A2: { plain: 1.25, standard: 10, fibre: 14 }, A3: { plain: null, standard: 5, fibre: 7 }, A4: { plain: null, standard: 2.50, fibre: null } }; ``` - `plain` = Plain paper price - `standard` = Standard paper price - `fibre` = Fibre-based paper price - `null` = Not available for this size ### Adding/Removing Paper Types In `index.html`, find the paper type `` element: ```html ``` ### Changing Branding Colours In `index.html`, modify the CSS custom properties at the top of the `