Skip to main content

Lake Park School District

Dedicated To Excellence In Education

Google Sheets - Roster Instructions

📄 Roster Solution – Smart Sites Implementation Guide

This document explains how to install, manage, and update the roster component powered by Google Sheets.

1. Overview

This web solution pulls data from a Google Sheet and displays it on your website as:

  • Player cards

  • Optional table view

  • Search + filter

  • Modal popups

  • Pagination

All content is controlled from Google Sheets—no coding needed after setup.

2. Google Sheet Setup (Content Owners)

Required Columns (in this exact order)

Column Description Example
Number.     Jersey Number     67
Name First and Last     John Montoya
Year Year in school Sr.
Position   QB
Height  
6’1”
Weight   210
Image URL of photo https://files.smartsites.parentsquare.com/11285/M4_1776861540.png

Important Rules

✅ Use text only in cells
❌ Do NOT paste images

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 (File provided by ParentSquare SE)

⚠️ Important:

  • Paste everything together (script + style + div)

  • 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 team member  Google Sheet
Edit member info Google Sheet
Change image Google Sheet
Change layout/design      Smart Sites source code

6. Troubleshooting

❌ Images not showing

Check:

  • Image column contains text like:
    https://files.smartsites.parentsquare.com/11285/M4_1776861540.png

  • 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)

✔ Roster loads
✔ Images display
✔ Filters work
✔ Modal opens
✔ Mobile view looks correct
✔ Search works

Search Behavior

  • Type in the search field

  • Press Enter OR click Search

  • Click ✕ to clear results

Search checks:

  • Number

  • Name

  • Year

  • Position

  • Height

  • Weight

9. Optional Enhancements (Ask Admin/Dev)

If you want to upgrade further, you can add:

  • clickable cards

  • animations

  • highlighted search matches

  • player profiles pages

  • lazy loading images

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