Stein Docs

Stein Docs

  • Docs
  • GitHub

›Stein Expedite

Getting Started

  • Introduction & Core Concepts
  • Create an API
  • Read Data from Sheet
  • Search for Data
  • Add Rows to Sheet
  • Update Rows
  • Delete Rows
  • Authentication
  • Using Client Libraries

Hosting

  • Introduction
  • Manual Installation & Setup

Stein Expedite

  • Introduction
  • Installation
  • Display Data from Sheet
  • Search for Data
  • Connect HTML Forms to Sheet

Display Data from Sheet

Now that you have installed Expedite on your website, you can display data from a spreadsheet in 3 quick steps:

  1. Create a containing <div> element
  2. Set your API URL as its data-stein-url attribute. You can access your API URL from the Stein Dashboard.
  3. Add handlebars {{ }} with the column name in any of the child elements.

Optional parameters

By default, Expedite ignores handling empty cells. If any row has a column with no value, the handlebars for that entry are left untouched.

For example, if a blog post in our example sheet (see below) had no author name defined, then the webpage would show By {{author}}. To hide showing the handlebars altogether in such cases, specify the data-stein-hide-empty attribute on the element. Here's an example doing this.

You can also limit and offset your response by setting the data-stein-limit and data-stein-offset attributes. More information about these paramters are available here.

Example

Let's display the first two blog post summaries from this Google Sheet.

The following HTML structure helps us with this.

<!--- Replace the data-stein-url value with your API URL --->
<div
  data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1"
  data-stein-limit="2"
>
  <div>
    <h1>{{title}}</h1>
    <h6>By {{author}}</h6>
    <p>
      {{content}}
    </p>
    <p>Read on <a href="{{link}}">Medium</a></p>
  </div>
</div>
Take special care if you are using Vue!

Vue.js also uses {{ }} (handlebars syntax) to play with data. To avoid conflict, use the v-pre attribute on elements that contain Stein related data.

The following Vue Example should help.

<!--- Replace the data-stein-url value with your API URL --->
<div
  id="vueapp"
  data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1"
  data-stein-limit="2"
>
  <div>
    <h1 v-pre>{{title}}</h1>
    <h6 v-pre>By {{author}}</h6>
    <p v-pre>
      {{content}}
    </p>
    <p>Read on <a href="{{link}}" v-pre>Medium</a></p>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/stein-expedite@0.0.1/dist/index.js"></script>  
<script>
  new Vue({
    el: '#vueapp',
    data: {
      name: 'Conflicted name',
      email: 'Conflicted email'
    }
  })
</script>

The v-pre attribute helps Vue ignore the corresponding element, allowing Stein Expedite to render properly.

Remember to append your sheet's name to access your API

You need to append the name of the specific sheet you want to access through the Stein API. If you want to access Sheet1 from your spreadsheet, your API URL will now be https://api.steinhq.com/v1/storages/[your-api-id]/Sheet1

Plug in some quick styling, and here's what you can easily end up with.

Blog Posts Screenshot

Pretty neat, eh? Here's the complete example. But that's just half the magic! Read on to learn to search your sheet data, and to connect your forms to sheets.

← InstallationSearch for Data →
  • Optional parameters
  • Example
Stein Logo
DocumentationOpen SourcePricingPartners

Privacy PolicyTerms of Service
© 2021 Stein