Skip to main content

Lake Park School District

Dedicated To Excellence In Education

Google Sheets - Training Catalog Instructions

 

🎓 Training Catalog

Smart Sites Admin Setup & Management Guide

1. Overview

This web solution displays training opportunities from a Google Sheet on a Smart Sites webpage.

✔ Staff update the Google Sheet
✔ Website updates automatically
✔ No coding needed after initial setup

2. Google Sheet Setup (Content Owners)

Required Columns (in this exact order)

Column Description Example
date Training date 2026-05-10
icon Font Awesome icon class     fa-solid fa-graduation-cap
title Training name Classroom Management
instructor Presenter Jane Smith
time Time 3:30–4:30 PM
audience Target group Teachers
description Details Strategies for engagement
locationType     Format Virtual / In-Person / Hybrid

Important Rules

✅ Use text only in cells
❌ Do NOT paste images

Icon Examples (copy/paste into sheet)

fa-solid fa-graduation-cap
fa-solid fa-chalkboard-user
fa-solid fa-users
fa-solid fa-laptop
fa-solid fa-book-open-reader

Share Settings

  1. Click Share

  2. Set to:

    • “Anyone with the link can view”

  3. Do NOT restrict access (widget needs public read access)

3. Smart Sites Page Setup (Web Admin)

Step 1: Open Page Editor

  1. Go to your Smart Sites page

  2. Click Edit

Step 2: Add Code Block

  1. Add a Columns Component set to a single column.

  2. Open Source Code (HTML view)

  3. Paste the FULL solution source code

⚠️ Important:

  • Paste the FULL solution source code (File provided by ParentSquare SE)

  • Do not split into multiple blocks

Step 3: Save

  1. Save the component

  2. View Website to preview

4. What You Should See

After setup, the page will display:

  • Hero banner (Training Hub)

  • Training cards

  • Search box

  • Filters (Audience, Format)

  • Font Awesome icons

  • “View Details” pop-up

5. How Content Updates Work

Change Where to Edit
New training opportunity  Google Sheet
Edit training Google Sheet
Change icon Google Sheet
Change layout/design Smart Sites source code

6. Troubleshooting

❌ Icons not showing

Check:

  • Icon column contains text like:
    fa-solid fa-users

  • NOT pasted images

  • Font Awesome link still exists in page code

❌ Widget says “Loading…”

Check:

  • Sheet is shared publicly

  • Sheet ID is correct

  • Tab name is Sheet1

  • No typos in columns

❌ Page is blank

Check:

  • Code was pasted in Source Code view

  • Script was not stripped

  • No missing <div id="gsheet-component">

❌ Styles look broken

Check:

  • <style> block is still present

  • Page didn’t strip CSS

7. Permissions Best Practice

Recommended setup:

Role Responsibility
Training team  Updates Google Sheet 
Web admin Manages page/code
Site admin Controls permissions

Important

  • Limit page editing access

  • Only 1 person edits the code block at a time

  • Everyone else updates the Google sheet only

8. Testing Checklist (Before Publishing)

✔ Trainings load
✔ Icons display
✔ Filters work
✔ Modal opens
✔ Mobile view looks correct
✔ Search works

9. Optional Enhancements (Ask Admin/Dev)

If you want upgrades later:

  • Registration links (button per training)

  • Calendar export (.ics)

  • “Featured training” section

  • Auto-hide past events

  • Audience tabs instead of dropdown

  • Color-coded categories

10. Quick Summary

  • The Google Sheet = your database

  • The Smart Sites page = your display

  • Icons must be Font Awesome class names

  • Do NOT paste images into Sheets