Quick and Dirty HTML Dashboards in QuickBase
I’m Armen Chakmakjian and I’m a Manager of Product Development in the Platform as a Service Group (PaaSG) here at Intuit. For the last year I have managed development work for Intuit QuickBase and parts of the new Intuit Partner Platform (which is in beta…check it out it is really cool).
My office and my html dashboard
The thing I want to write about here seems kinda simple to some and probably will open new vistas of possibilities for others. Quickbase is such a cool tool to map a process to data as well as sharing information. And it is really flexible, which is how I got myself to the point of sharing my little widget with you.
What I’ve done here is create a quick and dirty dashboard using html iframes and tables and QuickBase reports. The reason I thought I’d share this is that it’s quite a simple feature and it allows me to create a live dashboard that I can share with others as they pass by my office.
In this particular case I’m sharing two charts with my colleagues. One chart shows the issues based on priority that are open or in progress now and the other the issues that have been checked in and are ready for quality assurance to test. The exciting part is that we can literally watch the columns go up and down as people are fixing things or finishing testing (and sometime finding new things).
Charts make a dramatic view, but you can use quickbase summary reports for the same effect. And though you can write some sophisticated front end GUI’s that talk to an app through QuickBase’s HTTP API, this is quick and dirty, pretty manageable by anyone who manages a QuickBase of their own or has privs to add pages to a QuickBase app.
Basically if you can see the customize link at the upper left when looking at your QuickBase app, click that and then click “application” then chose the “pages” tab. You’ll see a link to “create a new page”, click that and when it asks you what type, select “text page”. Then you see a list of pages and yours will be at the bottom. Click the edit link.
Now an editor appears. Now I’m going to show you the trick. In that box put the following code
<meta http-equiv=”refresh” content=”30″>
<html>
<Body>
<font size=24> My Awesome Team’s Stats (updated every 30 second)</font>
<table border=”1″>
<table>
<tr>
<td> <iframe src= “https://www.quickbase.com/db/XXXXXXXX?a=q&qid=YYY” width = 800 height = 800> </iframe>
<td> <iframe src= “https://www.quickbase.com/db/XXXXXXXX?a=q&qid=ZZZ” width = 800 height = 800></iframe>
</tr>
</table>
</body>
</html>
In this example you need to replace the URL after each “src=” with the URL of each of your chart report. The cute thing here is that you can add rows and columns in html relatively quickly to this if you want to experiment. For example you can have smaller summary reports displayed in 200×200 boxes all side by side if you want more data and less charts. The meta line at the beginning is the key to the whole thing because this brings the dashboard to life. Every 30 seconds the screen gets refreshed, meaning the data is fetched and updated all the time.
Oh, yeah, the way to display it: Once you’re done editing, click “save and done”. You’ll be back at the list of pages. To the right of the one you just created, there is a “more” button. Hit that and select “preview”. Voi la! a window pops up with your chart refreshing every 30 seconds (you can save the url from this window and put it on your app dashboard or bookmark it in your browser). Now you can do like I did: I turn my second monitor around and share team stats with everyone walking by, while continuing to work on my primary monitor.
Like I said, simple, quick and useful. Anyway try it and if you have a more interesting way to display every refreshing charts and tables (using javascript maybe), I’d love to hear about it here. Good Luck
