Skip to content

Datasources

A datasource connects a table to a page of your site. You declare it at the top of a view, layout or partial, in its front matter (YAML between two --- lines). When the page is rendered, Ekit loads the entries and makes them available in ekdata.<name>.

---
datasources:
  articles:          # name of the datasource → ekdata.articles
    from: articles   # slug of the table
    limit: 10
---
<ul>
  {{#each ekdata.articles}}
    <li>{{this.title}}</li>
  {{/each}}
</ul>

Everything happens on the server: the page is sent to the browser already filled with your content, which is good for performance and SEO.

You rarely need to write it by hand

  • In the editor, type {{#each ekdata. — IntelliSense lists your tables and declares the datasource for you.
  • In a table, Show on my site generates a complete page (list and, optionally, detail page).
  • The Integration window of a table (⋯ menu) gives a ready-to-paste view and datasource.

A list of entries

datasources:
  products:
    from: products
    limit: 20
    sort:
      field: price
      dir: asc
Key Meaning
from Slug of the table. Required.
limit Maximum number of entries (up to 200).
sort Sort order: field (field slug) and dir (asc or desc).
filter Keep only matching entries: field and value, for example a search term from the URL ('{{query.q}}').
when Load the datasource only when a value is present — for example only when a search term was typed.

Display the entries with {{#each}}; inside the loop, each field is available by its slug ({{this.title}}, {{this.price}}) and the entry id by {{this.uid}}.

Every entry also has its creation and last modification dates, dateCreation and dateModif, to format with the date helper:

<small>Updated {{date this.dateModif "DD/MM/YYYY"}}</small>

Sorting, filtering, pagination and the other options are detailed in Advanced datasource options.

A single entry (detail page)

To show one entry — an article, a product page — load it by slug (taken from the URL) or by id:

---
datasources:
  article:
    from: articles
    slug: "{{params.slug}}"
---
{{#single ekdata.article}}
  <h1>{{this.title}}</h1>
  {{{this.body}}}
{{/single}}

With this view saved as views/blog.hbs, the address /en/blog/my-first-article displays the entry whose slug is my-first-article, in English. One view serves every entry of the table — see Languages, URLs and parameters.

Use uid: "…" instead of slug to load an entry by its id.

Displaying values

Values are rendered according to the field type:

Field type In a template
Text, Long text, Number, Email, Link {{this.field}}
Rich text {{{this.field}}} — triple braces, so the HTML is rendered
Date, Date and time {{date this.field 'DD/MM/YYYY'}}
File (image) <img src="{{ekdbasset this.field}}" alt="">
Relation {{#each this.field}}{{this.name}}{{/each}} — the linked entries, with their fields
Category {{this.field}} — the label of the selected entry

All helpers are listed in Helpers & variables.

Several datasources, shared files

A page can declare as many datasources as it needs (latest articles, categories, team members…), each with its own name. The datasources of a layout, a view and its partials are shared: a menu declared in the layout is available in every page that uses it.

Content is loaded in the language of the URL: the same view shows English content at /en/… and French content at /fr/….

Beyond tables

  • Methods — a datasource can also call an external API on the server (type: method), with secrets that never reach the browser: see Methods.
  • JavaScript — add expose: true to make a datasource available to the page's scripts in ekit.data.<name>. It is off by default, so the browser only receives what the page displays.
  • Other applications — to read the same tables from Next.js, Nuxt, Astro or a mobile app, use the Public API.