A web application that uses the data-table
HTML 5 web component that can be used to create admin tools for BaasBox documents. The web application can be hosted, or executed locally (unhosted) by simply opening the public/index.html
file. This project is based off the Web App Skeleton project (see that project for more details on the technologies used).
- Add, edit, delete documents on a BaasBox server
- Paging and searching for documents
- Upload images to documents
- Upload GPS co-ordinates using Open Street Map markers
- Can be run locally, wrapped into an app, or hosted as a static site
- From your BaasBox backend, add a collection called
Organization
, to try out the sample code. - Run
bower install
in thepublic
directory to install the required dependencies. - Edit the
public/js/config.js
with the correct details for your BaasBox server. - Open the
public/index.html
in your browser - Login, then play with the tool to see how it works
The code for the Organizations tool is in public/activities/organizations/organizations.html
The core of the functionality is provided by the data-table web component. This can be used independently in other projects. It depends on Polymer for the web components shim as well as data binding, and Bootstrap for UI layout.
The input-location web component provides a rudimentary GPS co-ordinates input field by integrating with Open Street Map.
Sample usage:
<!-- HTML 5 import of data-table web component (in HEAD section) -->
<link rel="import" href="/elements/data-table/data-table.html"/>
<!-- Create admin tool for the "Organization" collection, and sort by it's "name" field -->
<data-table model="Organization" orderBy="name">
</data-table>
The BaasBox server credentials are read from a global config.baasbox
variable, which can be initialized as follows:
window.config = {
'baasbox': {
'url': 'http://localhost:9000',
'appcode': '1234567890'
}
}
The above allows listing and deleting the items. In order to be able to add or edit an item, you need to provide an edit form in a template
tag as the first child of the data-table
element, e.g.
<data-table model="Organization" orderBy="name">
<template>
<form>
<input type="text" id="name" placeholder="Organization name" value="[[m.name]]"/>
<button onClick="[[cancel]]">Cancel</button>
<button onClick="[[submit]]">Submit</button>
</form>
</template>
</data-table>
Note the use of the double-square-bracket syntax [[m.name]]
, which prevents collision with the templating engine's (Nunjucks) own Mustache-like syntax.
Sometimes, you will want to provide additional actions to perform on an item. For that, you can supply the onAction
attribute as well as the actions
attribute:
<data-table model="Organization" orderBy="name" actions="Action1 Action2" onAction="onAction">
</data-table>
<script>
function onAction(operation, model) {
if (operation === "Action1") {
// do something with model
} else if (operation === "Action2") {
// do something else with model
}
}
</script>
For a more detailed example, see the Organizations example
Attributes that the data-table
element accepts:
model
: name of the collection on the BaasBox servercols
: space-separated list of columns (fields) to display in the list. Default is "name".where
: a where clause for the BaasBox query, e.g.where="name like 'Apple'"
orderBy
: the orderBy clause for the BaasBox query, e.g.orderBy="name desc"
actions
: space-separated list of actions for each item, e.g.actions="Action1 Action2"
. These appear as buttons on each row.onAction
: a javascript function to call when an action button is clicked. The function is passed the action name (string) and the model object as parameters.modelInit
: a javascript function to call when a model is created or edited. The model is passed as the first parameter. This allows you to initialize the model correctly.
In order to create more admin pages for the documents in your BaasBox server:
- Add a new activity in the
public/activities/
directory (copy & paste the organizations one) - Add links to the activity in
public/templates/navbar_main
- Tested in Firefox only!