Two years ago, we built a first version of our widgets framework. It had two issues:
- Custom HTML syntax
- Slow loading (because of our large meta-data cache)
Today, many customers need working widgets, and time has come for Florian to finally develop a brand-new implementation. First, we will use standard HTML 5 syntax using the
data- attribute. Second, we will provide three styles of widgets:
- iFrame with plain HTML generated server-side by CircularJS
- Grid perspective
- Tiles perspective
One of our customers needs to display the workflow state of records within their own user interface, and let end-users change this state directly from the user interface. In order to support this, we’ve decided to implement the Field widget, which was on a slightly longer-term roadmap. This widget will let you show a field of an object for a particular record, either in read-only mode, or in read/write mode. When used in read/write mode, it will display an optional Save button. And it will work for any field of any datatype, not just Workflow. We should have a first prototype ready by tomorrow.
All our widgets are working now…
Up until now, I had to manually update this page every time we would add a new library to our arsenal (at least twice a week). And I would update this copy as well. Over the past few months, I must have wasted a couple of hours doing just that.
Now, take a look at this page.
To get the list of libraries, all I did was to type this:
So simple, yet so powerful…
Now, something really, really cool. As indicated in our week #34 achievements, we’ve deployed our first widget on the stoic.com website. This widget is the map that you can see on our roadshow page. When loading it, give it a few seconds for all the pins to appear. And make sure to click on markers to get details about individual events.
To do this, we started by creating a new Roadshow application, with a single object called Meetup:
Then, we added a single HTML5 element on our roadshow page:
This gave us this:
How cool is that?
PS: If you’ve been paying attention, you must have noticed that all the dates on the map and in the user interface are off by a month, and our first six meetups scheduled for 2013 have a date showing as NaN/NaN/NaN. That’s because our very own Pascal forgot that
PPS: I have Pascal to thank for making the whole widget work in the first place…
PPPS: He still has to fix that bug though…
Since we’re planning to use our widgets to power the stoic.com website, we’ve decided to upgrade them from Suggested to Started. Pascal is pretty much done with Object Grid, Object List, Record, and Field. All these will be part of the Maximum Unviable Product. More advanced widgets like Chart, Object Calendar, and View Summary might be added to the MUP if time permits.
And now something really cool: meet our upcoming sheet widget. This widget automatically turns a Google Spreadsheet into a dynamic HTML component. The way it works is pretty simple: you build a Google Spreadsheet with data, formulas, and formatting, then click on a menu item to generate one line of HTML. Then, you stick that one liner onto any web page, and an interactive copy of your spreadsheet is automatically added.
For example, here is what the original spreadsheet looks like:
And here is the resulting HTML page:
For a live example, go to our prize calculator at poetry.io.
The benefit of this approach compared to just publishing an entire sheet is that only certain cells are editable (in the example above, the Top Prize Amount), and the resulting HTML can be styled any way you want (here we’re using Twitter Bootstrap).
The way it’s implemented is pretty straightforward: when you want to turn your sheet into a widget, a bit of Google Apps Script code parses the sheet, looking for editable cells and for formula cells. Then, it generates a chunk of AngularJS code that is stored on a publicly-available file in Google Drive. It also generates one line of HTML that will fetch the content of this file whenever the page where it’s included is loaded by a client.
This feature is still being developed at STOIC Labs, which is a secret laboratory staffed by François and myself. We’ll upgrade it to a real feature if we get the green light from the guys upstairs. Otherwise, we’ll put it up for bidding on Kickstarter after we ship our 1.0 release.