digital-print-request

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

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 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:

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
  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:
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'
};
  1. Replace YOUR_SCRIPT_ID with your actual Google Apps Script Web App URL
  2. Replace YOUR_FORM_ID with your actual Microsoft Forms URL
  3. 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:

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 <select> element and modify the options:

<optgroup label="Standard Papers">
    <option value="New Paper Name" data-category="standard">New Paper Name</option>
    <!-- Add data-max-size="A3" to restrict to smaller sizes -->
</optgroup>

The data-category attribute must be one of: standard, fibre, or plain

Adding Courses

In index.html, find the course <select> element:

<optgroup label="Undergraduate (UG)">
    <option value="BA New Course">BA New Course</option>
</optgroup>
<optgroup label="Postgraduate (PG)">
    <option value="MA New Course">MA New Course</option>
</optgroup>

Changing Branding Colours

In index.html, modify the CSS custom properties at the top of the <style> section:

:root {
    --primary: #1e3a5f;        /* Main brand colour */
    --primary-light: #2d5a8a;  /* Lighter variant */
    --primary-dark: #152a45;   /* Darker variant */
    --accent: #4a90d9;         /* Accent/focus colour */
    --success: #28a745;        /* Success messages */
    --error: #dc3545;          /* Error messages */
    /* ... */
}

Changing Email Templates

In google-apps-script.js, find the sendConfirmationEmail() and sendReadyEmail() functions to modify the HTML email templates.

File List

File Description
index.html The main web form with styling, validation, and submission logic
google-apps-script.js Google Apps Script backend for handling submissions, managing the spreadsheet, and sending emails
README.md This documentation file

Troubleshooting

Form submissions aren't appearing in the sheet

  • Check the Web App URL: Ensure you copied the correct URL from the deployment
  • Check permissions: The Web App must be set to "Anyone" can access
  • Check the Apps Script logs: In Apps Script, go to Executions to see any errors
  • CORS issues: The form uses mode: 'no-cors'  ensure this is in the fetch request

Emails aren't being sent

  • Check Gmail permissions: The script needs permission to send emails via Gmail
  • Check quota: Google has daily email sending limits
  • Check spam folders: Confirmation emails may be filtered

Custom menu doesn't appear

  • Refresh the sheet: Close and reopen the Google Sheet
  • Check authorisation: You may need to run onOpen manually once to grant permissions

Price shows "N/A"

  • This means the selected size/paper combination isn't available
  • Check the PRICES object to see which combinations are valid

File upload link doesn't work

  • Check the MS Forms URL: Ensure it's correct in the CONFIG object
  • Check form permissions: The form must be accessible to your target audience

Reference number not passing to MS Forms

  • Microsoft Forms may not support URL parameters for all field types
  • Students should manually enter their reference number in the form

Support

For technical issues with this system, contact:

[Your Name / Department] =� [your.email@westminster.ac.uk] =� Harrow Campus, Digital Print Room

License

This project was created for University of Westminster Harrow Digital Print services.

Last updated: December 2024

本页内容由上游仓库自动镜像，如有疑问请访问原始仓库。