HTML Templating

Introduction

The templating library provided by UseSQL gives the ability to interact with integrating into the front end of your choice without needing to know JavaScript. You simply indicate where you want your data to appear, and include our script to integrate.

Getting Started

1. Include UseSQL Templating SDK

Before you can the UseSQL Templating SDK you need to include the snippet below before the </body> tag.

<script src="https://load.usesql.com"></script>

2. Add Basic UseSQL Attributes To HTML

After including the UseSQL library we now can identify where we want to include our UseSQL query results, and append some attributes to our HTML. There are two required attributes to include. These attributes are useql which is for the value we provide the query we want to retrieve results for or the URL for the saved query, and usesql-key which is the key you will be using to permission the query.

Optionally you can change the delimiters of your query which may be required if you use something like Flask which includes Jinja templates with the same delimiters. The attributes to do this would be usesql-delimiter-start and usesql-delimiter-end.

Below is an example of embedding a table in a webpage.

<html>
<body>
    <h2>Use Cases</h2>
    <div 
        usesql='SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"' 
        usesql-key="YOUR_KEY_GOES_HERE">
    </div>
    <script src="https://load.usesql.com"></script>
</body>
</html>

3. Insert Data Using Template Delimiters

The next step is to embed your data. For this step, you just need to include your data. The query in this example has the following data: image, title, description, and link. Your data by default can be included with the starting delimiter {{ and the ending delimiter }} so for example if you want to include the title data you would include it enclosed as done here: {{title}}.

As long as your UseSQL attributes are a parent element or above your data will be included, and the enclosed HTML will be repeated for each row of data you have.

<html>
<body>
    <h2>Use Cases</h2>
    <div 
        usesql='SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"' 
        usesql-key="YOUR_KEY_GOES_HERE">
        <div>
            <a href="{{link}}">
                <div>
                    <ul>
                        <li class="half-width">
                            <img src="{{image}}">
                        </li>
                        <li>
                            <span>{{title}} &rarr;</span>
                            <p>{{description}}</p>
                        </li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
    <script src="https://load.usesql.com"></script>
</body>
</html>

At this point, you should be able to see your data on your page when loaded into the browser of your choice. For any additional questions please contact support@usesql.com or take a look at our FAQ that will continue to grow as we get more incoming questions about this library.

FAQ

I use another templating system that uses {{ and }}. Can I avoid this conflict?

Yes, with the UseSQL Templating SDK you can change those starting and ending delimiters to whatever you want. Below is an example of how to do this. In this example they are changed to ~

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-7 text-center">
            <h2 class="title">Use Cases</h2>
        </div>
    </div>
    <div class="row" usesql='SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"'
         usesql-delimiter-start="~"
         usesql-delimiter-end="~"
         usesql-key="YOUR_KEY_GOES_HERE">
        <div class="col-lg-6 pb-3">
            <a href="~link~">
                <div class="card card-shadow">
                    <ul class="img-inline">
                        <li class="half-width">
                            <img src="~image~" class="img-responsive rounded-left">
                        </li>
                        <li class="p-3 half-width">
                            <span class="h5">~title~ &rarr;</span>
                            <p>~description~</p>
                        </li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
    <div id="usesql-container" class="row"></div>
</div>
<script src="https://load.usesql.com"></script>

The key is to include the statements defining the new start and end delimiters as shown above with the following commands usesql-delimiter-start="~" and usesql-delimiter-start="~". These commands change both {{ and }} to ~ for the starting and ending delimiter.

How would I provide a saved query to the templates?

You would just provide the URL directly instead of a query. Below is an example of this:

<html>
<body>
    <h2>Use Cases</h2>
    <div usesql='https://usesql.com/query/9g1jI3/usecases'>
        <div>
            <a href="{{link}}">
                <div>
                    <ul>
                        <li class="half-width">
                            <img src="{{image}}">
                        </li>
                        <li>
                            <span>{{title}} &rarr;</span>
                            <p>{{description}}</p>
                        </li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
    <script src="https://load.usesql.com"></script>
</body>
</html>

PreviousSaved Queries NextJavaScript Web Client

Last updated 2 years ago