SheetDream
Search…
HTML
SheetDream provides an advanced HTML code generation tool that utilizes technologies like Twitter Bootstrap, and Handlebars.js to format and display your data live on your website.
Bootstrap is a Twitter supported library powering a significant amount of the modern web, and it's used on millions of websites with the support of (potentially?) millions of developers. You can rest assured that if you need help on your HTML code that utilizes Bootstrap, there's a developer nearby that can probably assist with little to no trouble.
Handlebars.js is another very well known and supported library for templating in HTML. It allows you to take an arbitrary JSON structure:
1
{
2
"FirstName": "Steve",
3
"LastName": "Jobs"
4
}
Copied!
And merge it into your HTML in a very simple manner:
1
<script type="x-sheetdream-handlebars">
2
Hello {{FirstName}} {{LastName}}! Welcome to my website.
3
</script>
Copied!
Which results in:
1
Hello Steve Jobs! Welcome to my website.
Copied!
SheetDream bridges the gap by providing a script you include into your HTML file, which will call out to your API and allow you to merge the retrieved data into your HTML using Handlebars.js. It makes for building and prototyping apps very quickly with just a little HTML/CSS (and potentially JavaScript) knowledge, giving makers of all skill levels the ability to be productive in a very short amount of time.
When you first navigate to the Embedding & Code tab, you will be presented with a screen that looks like the following:
You can select the type of template you want to create in the Select Template field (where you can currently choose between HTML, JavaScript and TypeScript), and from there the other options you can tweak will change dynamically. In the above screenshot, we've selected the HTML template because we want to generate some HTML code. We can tweak the following parameters:
Parameter
Description
Table
The table in question that we want to display on our website or app
Action
Whether or not we want to view / update the data on our website or app, or we want a form for creating a new record
Layout
Function
Advanced functionality allowing you to either Display the data (default), or Import the data. Can be used for building very advanced queries, the general recommendation is to keep this as Display until you have a reason that you need to be linking multiple tables together.
Group By Key
Allows for grouping your API's returned JSON result by a specific key, which can allow for some pretty advanced categorization and other display mechanisms.
As you progress further down the page, you see more record-specific parameters that can be adjusted:
Parameter
Description
Select User
This is the user that the script will be calling the API on behalf of. For most standard use cases, you would want to leave this as system.
Query
Limit
The maximum number of records that you want to display at once.
Sort Field
Specify a field (if any) you would like to sort by
Sort Type
Ascending or descending
Make Editable
Adds HTML input tags for modifying existing records, as well as an Update button with the necessary JavaScript attached to it for sending the change to the server. Note that this requires your selected user in Select User to have write or admin access.
Make Deletable
Adds an HTML delete button with the necessary JavaScript attached to it for deleting a record from the server. Note that this requires your selected user in Select User to have write or admin access.
​
Last modified 10mo ago
Copy link