Sheet API HTML

Sheet API HTML is an easy way to integrate your Sheet API with an HTML.

If you do not know Sheet API yet access it through https://sheetapi.rest to learn more!

It uses templates and HTML attributes to easily integrate an API with a HTML. Its main use cases are:

• Displaying HTML data directly from a Sheet, with the possibility of updating it in real time
• Integrating forms, sending the submitted data directly into an Sheet

For the examples below we'll use the sheet that is contained in this links:

• Sheet API: https://api.sheetapi.rest/api/v1/sheet/g5e09XKtRZ4OaydVCSSeK
• Google Sheet: https://docs.google.com/spreadsheets/d/1wNR-5VUKN6G6voJC1jwHqbt2mkmzxyDUMnkzHIppMpg/edit#gid=0

Usage

Apply the snippet below to the pages you would like to connect with Sheet API

<script src="https://unpkg.com/@sheet-api/html"></script>

Displaying HTML from a Sheet

You should add the attribute data-sheet-api-url to the HTML tag that you would like to connect with a sheet.

For example:

<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody
      data-sheet-api-url="https://api.sheetapi.rest/api/v1/sheet/g5e09XKtRZ4OaydVCSSeK"
    >
      <tr>
        <td>{{ Name }}</td>
        <td>{{ Email }}</td>
      </tr>
    </tbody>
  </table>
</div>

This will automatically generate a table for you and fill it with the data from the sheet.

If you had for example the following data in your Sheet:

You would have the following HTML form:

If you wish to update your data each 60 seconds for example, you can also add the attribute: data-refresh-time="60" and your data will be refreshed each 60 seconds

Receiving Form data into the Sheet

To receive data from a form into your sheet:

• Add the attribute data-sheet-api-url to a <form> element
• Add the attributes name=<Column> to the <input> elements of your form

Sheet API will automatically keep track of them and send them to the designated columns when the form is submitted

You can also optionally:

• Add the attribute data-loading-msg=<loading message> to your form
  • This will automatically add a loading message to your submit button
• Add the attribute data-success-msg=<success message> to your form
• Add an element with the class class="sheet-api-success-container"
  • This will automatically set up a success message to your form
• Add the attribute data-error-msg=<error message> to your form
• Add an element with the class class="sheet-api-error-container"
  • This will automatically set up a error message to your form in case the submission failed

An example of a HTML form is the one below:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Form</h5>
    <form
      data-sheet-api-url="https://api.sheetapi.rest/api/v1/sheet/g5e09XKtRZ4OaydVCSSeK"
      data-loading-msg="Loading..."
      data-success-msg="Thank you! We have received your registration"
      data-error-msg="Your submission failed, please try again later"
    >
      <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" name="Name" placeholder="Enter your name" required />
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" name="Email" placeholder="Enter your email" required />
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
      <span class="sheet-api-success-container"></span>
      <span class="sheet-api-error-container"></span>
    </form>
  </div>
</div>

The form can be submitted like in the video below:

After some seconds, the user will appear in the Sheet like in the image below (the new user being highlighted in yellow)