Working with Data Sources

Bring your Xsyte data to life in your pages and layouts

Data Sources are what make your Xsyte pages dynamic.
They let you pull real data — like teams, seasons, players, or products — directly into your Pages and Layouts.

Instead of manually updating text every week, your content can automatically refresh with the latest stats, rosters, or announcements.

---

⚙️ What is a Data Source?

A Data Source is a small configuration that tells your page what type of data to fetch and how to filter it.

Example:

[
  {
    "source": "teams",
    "filters": { "season_status": "active" }
  },
  {
    "source": "seasons",
    "filters": { "active": "active or upcoming" }
  }
]

Each source connects to part of your platform’s data:

Source	Description	Available Filters
clusters	Division Groups	(none — returns all)
divisions	Divisions you host	Cluster
seasons	Active or past seasons	Season Status, Divisions (multi-select)
teams	All teams in your organization	Clusters, Divisions, Seasons (multi-select), Season Status
players	Player profiles and stats	Cluster, Division, Season, Team, Player Status, Season Status
products	Items in your store	Category
sponsors	Advertisers and partner logos	Size (Large/Medium/Small)

---

🧩 Where to Use Data Sources

You can attach a Data Source to:

• A Page — to make it a “data-driven page”
• A Block — for layouts that need live info (like a standings block or sponsor carousel)

In both cases, the data becomes available inside your content via template tags.

---

🎨 Using the Data Source Editor

You no longer need to write JSON by hand! The page editor includes a built-in Data Source Editor with a visual interface.

1. Open any page in Admin → Customize → Pages
2. Scroll down to the Data Sources section
3. Click “+ Add Data Source”
4. Select your source type from the dropdown (Teams, Seasons, Players, etc.)
5. Set any filters using the form fields that appear — these change based on the source type
6. Save your page

The editor builds the JSON configuration for you behind the scenes. If you need more control, you can still edit the raw JSON directly.

---

🪄 Example: Active Teams List

If you want to show all current teams on a page:

Step 1: Add a Data Source

• Select the Teams datasource
• Set any filters such as “Only include teams from Division 1”

Step 2: In your Page’s Source Code (Tools → Source Code):

<h2>Active Teams</h2>
<ul>
  {%  for team in teams %}
    <li>{{ get_graphic(team.logo, 'tiny')}} {{ team.name }}</li>
  {% endfor %}
</ul>

That’s it. When a new team joins or an old one deactivates — the page updates automatically. 🧠

NOTE: Use {{ get_graphic(graphic_id, size) }} to display uploaded content such as team logos & player images. Possible sizes are: thumbnail, tiny, small, medium, large, extralarge.

---

🧱 Data Sources in Layout Blocks

When you drag a block into a layout, many block types already have built-in sources, such as:

• sponsors → Displays active sponsor logos
• news → Shows latest articles
• seasons → Lists active or past seasons
• calendar → Displays upcoming events
• standings → Live league standings table

You can override or add custom filters by editing the Settings JSON in the Block Inspector.

---

🧠 How Filters Work

Filters are flexible and depend on the source. Here are examples for each source type:

Seasons Filters

• Season Status: All, Active, Upcoming, Completed, Active or Upcoming
• Divisions: Multi-select from your divisions list

Teams Filters

• Clusters: Multi-select
• Divisions: Multi-select
• Seasons: Multi-select
• Season Status: All, Active, Inactive, Upcoming, Completed, Active or Upcoming

Players Filters

• Cluster, Division, Season, Team: Select from dropdowns
• Player Status: Multi-select (Active, Substitute, Inactive, Injured, etc.)
• Season Status: All, Active, Upcoming, Completed, Active or Upcoming

Products Filters

• Category: Select from your store categories

Sponsors Filters

• Size: All, Large, Medium, Small

You can also use limit and sort for any source to control how many records to fetch and in what order.

---

💡 Advanced: Combining Data Sources

You can include multiple sources at once — perfect for complex pages. Then reference all datasets in your HTML:

<h3>{{ seasons[0].name }}</h3>

<h4>Teams</h4>
{% for team in teams %}
  <p>{{ get_graphic(team.logo, 'small') }} {{ team.name }}</p>
{% endfor %}

<h4>Players</h4>
{% for p in players %}
  <p>{{ p.first_name }} {{ p.last_name }} — {{ p.team_name }}</p>
{% endfor %}

---

⚡ Performance Note

All Data Sources are cached automatically through your platform’s Redis and CloudFront layer. When data updates (like new game results), Xsyte automatically invalidates those cache segments — meaning your pages stay fresh without slowdowns.

---

🧩 Pro Tips

• Use small, focused sources instead of massive unfiltered ones.
• The visual Data Source Editor handles most use cases — only edit raw JSON for advanced scenarios.
• Always test your JSON using a validator like jsonlint.com.
• Try combining Data Sources with layout templates for reusable designs.
• Use Vibe Coding with AI tools like Claude or ChatGPT to write your Twig templates — just tell the AI what data fields are available and what you want to display!

---

✅ Next Steps

Continue to:

• ✨ Page Recipes
• 🎨 Building Layouts