Fetch Data and Create Contents
Without Programming

What's this?

ToteBee let you create Data-Driven contents simply
without programming.


It runs on browsers, fetches CSV/JSON data,
and renders them on the page.

Motivation

When we create a web page with some data sets,
it is not always necessary to use server side technorogy or a database.
In some cases, it would be nice to complete in 5 minutes without programming.

Features

Setting Up

Download the JS file from Here.
And add a link to the JS file in your <head>
HTML
<head>
  ...
  <script type="text/javascript" src="/js/totebee.1.0.min.js"></script>
  ...
</head>

Demos

- List -

List is the most basic pattern of ToteBee.
It fetches the CSV/JSON data,
and render them with the template.
data-src='[path]'
HTML
<!-- totebee contents folder -->
<ul data-x="list" data-format="csv" data-src='data/inventors.csv'>
    <!-- totebee item template -->
    <li data-x="item"><a href="inventor.html?id={id}">
            <img data-src="{img}">
            <div>{name}</div>
            <div>{year}</div>
        </a>
    </li>
</ul>
CSV Data
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
(OR) JSON Data
[
  {
    "id": "101",
    "name": "Thomas Edison",
    "year": "1847-1931",
    "img": "/img/edison.png"
  },
  {
    "id": "102",
    "name": "Alexander Graham Bell",
    "year": "1847-1922",
    "img": "/img/bell.png"
  },
  {
    "id": "103",
    "name": "Nikola Tesla",
    "year": "1856-1943",
    "img": "/img/tesla.png"
  }
]

See the Pen ToteBee List by naota (@naota) on CodePen.

- Table -

The list pattern shown above can be apllied to
the <tr> tag iteration in a <table> block.

This pattern can be used to various cases
where iteration occurs with the data records.

ID Image Name Description Link to
Static Page
{id} {name} {description} inventor.html?id={id}
HTML
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Image</th>
            <th>Name</th>
            <th>Description</th>
            <th>Link to<br>Static Page</th>
        </tr>
    </thead>
    <!-- totebee contents folder -->
    <tbody data-x="list" data-format="json" data-src="/data/inventors.json">
        <!-- totebee item template -->
        <tr data-x="item">
            <td>{id}</td>
            <td><img data-src="{img}"></td>
            <td><a href="inventor.html?id={id}">{name}</a></td>
            <td>{description}</td>
            <td><a href="inventor.html?id={id}">inventor.html?id={id}</a></td>
        </tr>
    </tbody>
</table>
CSV Data
id,name,year,img,description
101,Thomas Edison,1847-1931,/img/edison.png,"Thomas Alva Edison was an American ..."
102,Graham Bell,1847-1869,/img/bell.png,"Alexander Graham Bell was a ..."
103,Nicola Tesla,1856-1943,/img/tesla.png,"Nikola Tesla was a Serbian-American ..."
(OR) JSON Data
[
  {
    "id": "101",
    "name": "Thomas Edison",
    "year": "1847-1931",
    "img": "/img/edison.png",
    "description" : "Thomas Alva Edison was an American ..."
  },
  {
    "id": "102",
    "name": "Alexander Graham Bell",
    "year": "1847-1922",
    "img": "/img/bell.png",
    "description" : "Alexander Graham Bell was a ..."
  },
  {
    "id": "103",
    "name": "Nikola Tesla",
    "year": "1856-1943",
    "img": "/img/tesla.png",
    "description" : "Nikola Tesla was a Serbian-American ..."
  }
]

- Record Filter -

Record filter is used to extract only those records
that fulfill a specified condition. In this demo, "id=102" is specified as a condition.
data-filter="id=102"
Other than "=", " < ",">"," <=",and ">=" are also supported.
"id<102"
HTML
<div data-x="list" data-format="csv" data-src="/data/inventors.csv"
  data-filter="id=102">
  <div data-x="item">
    <h4>ID:{id}</h4>
    <img data-src="{img}" width="150">
    <h2>{name}</h2>
    <h4>{year}</h4>
  </div>
</div>
CSV Data
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
(OR) JSON Data
[
  {
    "id": "101",
    "name": "Thomas Edison",
    "year": "1847-1931",
    "img": "/img/edison.png"
  },
  {
    "id": "102",
    "name": "Alexander Graham Bell",
    "year": "1847-1922",
    "img": "/img/bell.png"
  },
  {
    "id": "103",
    "name": "Nikola Tesla",
    "year": "1856-1943",
    "img": "/img/tesla.png"
  }
]

- Passing URL Parameters on Static Site -

Parameters can be passed through the URL
without using server side technology.

inventor.html?id=101
inventor.html?id=102
inventor.html?id=103

How it works

  1. Pass the url parameter from the list page to the detail page.
  2. At the detail page, ToteBee receives the parameter "id=103".
  3. ToteBee fetches the data file.
  4. ToteBee extract the recode which id is 103.
HTML
<a href="inventor.html?id=101">inventor.html?id=101</a>
<a href="inventor.html?id=102">inventor.html?id=102</a>
<a href="inventor.html?id=103">inventor.html?id=103</a>

- If Statement -

An If-Statement is used to show a specific HTML block
when a record fulfill a specified condition. In this demo, two <div> blocks
are specified with the conditions.
data-condition="[condition]"
HTML
<!-- totebee contents folder -->
<ul data-x="list" data-format="csv" data-src="/data/inventors.csv">
  <!-- totebee item template -->
  <li data-x="item">
    <a href="inventor.html?id={id}">
      <img data-src="{img}">
      <div>{id}</div>
      <div>{name}</div>
      <div>{year}</div>
      <div class="fixed-height-30">
        <div data-x="if" data-condition="id=101">
          <span class="highlight">Foo</span>
        </div>
        <div data-x="if" data-condition="id=102">
          <span class="highlight">Bar</span>
        </div>
      </div>
    </a>
  </li>
</ul>
CSV Data
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
(OR) JSON Data
[
  {
    "id": "101",
    "name": "Thomas Edison",
    "year": "1847-1931",
    "img": "/img/edison.png"
  },
  {
    "id": "102",
    "name": "Alexander Graham Bell",
    "year": "1847-1922",
    "img": "/img/bell.png"
  },
  {
    "id": "103",
    "name": "Nikola Tesla",
    "year": "1856-1943",
    "img": "/img/tesla.png"
  }
]

- Pagenation -



Pagination is automatically added by assigning the pagesize.
data-pagesize="3"
HTML
<ul data-x="list" data-format="csv" 
    data-pagesize='3' data-src="/data/inventors3.csv">
  <!-- totebee item template -->
  <li data-x="item">
    <a href="inventor.html?id={id}">
      <img data-src="{img}">
      <div>{id}</div>
      <div>{name}</div>
      <div>{year}</div>
    </a>
  </li>
</ul>
CSV Data
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1922,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
104,Samuel Morse,1791-1872,/img/morse.png
105,Guglielmo Marconi,1874-1937,/img/marconi.png
106,Rudolf Diesel,1858-1913,/img/diesel.png
107,Marie Curie,1867-1934,/img/curie.png
108,Michael Faraday,1791-1867,/img/faraday.png
109,James Watt,1736-1819,/img/watt.png
110,Alfred Nobel,1833-1896,/img/norbel.png
111,Charles Babbage,1791-1871,/img/babbage.png
112,John Neumann,1863-1947,/img/neumann.png
(OR) JSON Data
[{
  "id": "101",
  "name": "Thomas Edison",
  "year": "1847-1931",
  "img": "/img/edison.png"
 },
 {
  "id": "102",
  "name": "Alexander Graham Bell",
  "year": "1847-1922",
  "img": "/img/bell.png"
 },
 {
  "id": "103",
  "name": "Nikola Tesla",
  "year": "1856-1943",
  "img": "/img/tesla.png"
 },
 {
  "id": "104",
  "name": "Samuel Morse",
  "year": "1856-1943",
  "img": "/img/morse.png"
 },
 {
  "id": "105",
  "name": "Guglielmo Marconi",
  "year": "1856-1943",
  "img": "/img/marconi.png"
 },
 {
  "id": "106",
  "name": "Rudolf Diesel",
  "year": "1856-1943",
  "img": "/img/diesel.png"
 },
 {
  "id": "107",
  "name": "Marie Curie",
  "year": "1867-1934",
  "img": "/img/curie.png"
 },
 {
  "id": "108",
  "name": "Michael Faraday",
  "year": "1791-1867",
  "img": "/img/faraday.png"
 },
 {
  "id": "109",
  "name": "James Watt",
  "year": "1736-1819",
  "img": "/img/watt.png"
 },
 {
  "id": "110",
  "name": "Alfred Nobel",
  "year": "1833-1896",
  "img": "/img/norbel.png"
 },
 {
  "id": "111",
  "name": "Charles Babbage",
  "year": "1791-1871",
  "img": "/img/babbage.png"
 },
 {
  "id": "112",
  "name": "John Neumann",
  "year": "1863-1947",
  "img": "/img/neumann.png"
  }
]

- Sort -

Sort Key : ID Name Birth Year
HTML
Sort Key :
<span data-x="x-sort" data-targetid="mylist" data-sortkey="id" class='active'>ID</span>
<span data-x="x-sort" data-targetid="mylist" data-sortkey="name">Name</span>
<span data-x="x-sort" data-targetid="mylist" data-sortkey="year">Birth Year</span>
<!-- totebee contents folder -->
<ul id="mylist" data-x="list" data-format="csv" 
  data-Srtkey/span>="name" data-src='/data/inventors2.csv'>
  <!-- totebee item template -->
  <li data-x="x-item">
      <a href="inventor.html?id={id}">
        <img data-src="{img}">
        <div>{id}</div>
        <div>{name}</div>
        <div>{year}</div>
      </a>
  </li>
</ul>
CSV Data
id,name,year,img,description
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png,
103,Nicola Tesla,1856-1943,/img/tesla.png
104,Samuel Morse,1791-1872,/img/morse.png
105,Guglielmo Marconi,1874-1937,/img/marconi.png
106,Rudolf Diesel,1858-1913,/img/diesel.png
(OR) JSON Data
[
  {
    "id": "101",
    "name": "Thomas Edison",
    "year": "1847-1931",
    "img": "/img/edison.png"
  },
  {
    "id": "102",
    "name": "Alexander Graham Bell",
    "year": "1847-1922",
    "img": "/img/bell.png"
  },
  {
    "id": "103",
    "name": "Nikola Tesla",
    "year": "1856-1943",
    "img": "/img/tesla.png"
  },
  {
    "id": "104",
    "name": "Samuel Morse",
    "year": "1856-1943",
    "img": "/img/morse.png"
  },
  {
    "id": "105",
    "name": "Guglielmo Marconi",
    "year": "1856-1943",
    "img": "/img/marconi.png"
  },
  {
    "id": "106",
    "name": "Rudolf Diesel",
    "year": "1856-1943",
    "img": "/img/diesel.png"
  }
]

- Scheduled Publishing -

You can schedule a content block
to go public at a specific date and time.


This block goes public on 2019.
This block goes public on 2020.
This block goes public on 2021.

HTML
<div data-x="schedule" data-start="2019-01-01 00:00" data-end="2019-12-31 23:59">
    This block goes public on 2019.
</div>
<div data-x="schedule" data-start="2020-01-01 00:00" data-end="2020-12-31 23:59">
    This block goes public on 2020.
</div>
<div data-x="schedule" data-start="2021-01-01 00:00" data-end="2021-12-31 23:59">
    This block goes public on 2021.
</div>

- Runs with other Frameworks -

ToteBee is written in pure JavaScript.
That means it has no dependencies with other libraries,
and has compatibility with any framework.
An example with Bootstrap

Documents

here

Browser Support

Supporting Chrome, Safari, Firefox, Edge, and IE11.

Download

Download Zip
The photographs and texts are cited from “List of Inventors”
2020 Wikipedia, Wikimedia Foundation,
https://en.wikipedia.org/