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).
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
13 Trackbacks/Comments
QuickBase Tricks I know… « My Name Means Flintstone on October 3, 2008 at 5:15 pm
[...] QuickBase Tricks I know… So I’ve written a little blog entry about a cool feature of QuickBase and I thought I share on the QuickBase Blog [...]
Alastair on October 7, 2008 at 6:17 am
Hi, nice stuff – just to point out that the name you give the page should end with .html or you’ll only see your raw html code.
[Reply]
achakmakjian on October 10, 2008 at 9:59 pm
Just saw your comment Alastair, and yes you are correct, you need to end the the QuickBase page name with .html
Thanks for catching that…
[Reply]
This does not work on October 23, 2008 at 4:37 am
I tried this and I get’
Invalid Request
The QuickBase URL you specified was incorrectly formatted. If the link is correct, the problem may be a communication error between your web browser and QuickBase. Try accessing the URL again.
[Reply]
achakmakjian on October 23, 2008 at 9:54 pm
To David,
Tables generated by reports? Anything in a URL that points to a QuickBase that has a DBID and a QID should work.
To “This Does Not Work”
I’m pretty sure it does, and I got it to work on my PC using IE7, FF3, and Safari and Chrome. I also had it working on my Mac on both FF3 and Safari. In order to protect the privacy of your app, please drop me a line via our support link
Add in the text of your page that you created and mention that this one should go directly to Armen. We are always available to help. I’d like to help make this useful for you.
[Reply]
Jared on October 30, 2008 at 4:19 pm
Really cool Armen! Thanks!
This is what I use to create static dashboards (3 charts side by side in a section). Works really well.
[Reply]
Andrew P on November 14, 2008 at 11:14 am
I did something like this using the default report page and ran into a problem whereby people were able to still “customize the report” and save it as a personal report under the “Everyone on the Internet” user. To avoid this, I used the following Quickbase API call instead. Replacing “a=q” with “act=API_GenResultsTable” gives you just the report table itself and none of the other links:
[Reply]
achakmakjian on November 15, 2008 at 12:16 am
Andrew,
That’s an awesome hint! And if anyone wonders whether it works, I just did try it on my own internal dashboard and it looks great. I’d put my original example here, modified with Andrew’s change, but our blog engine is suppressing the html in the responses.
[Reply]
E. Peak on November 19, 2008 at 11:20 pm
Is it possible to incorporate a “pipe” or RSS feed into my Quickbase application?
[Reply]
achakmakjian on November 21, 2008 at 9:19 am
Hi E. Peak,
QuickBase has RSS capability. We just had a similar question on the LinkedIn Group: Intuit QuickBase Network, so if Jim Salem (our Architect) doesn’t mind me plagiarizing him, here’s a pointer to some info on QuickBase and RSS feeds:
https://www.quickbase.com/db/6mztyxu8?a=dr&r=jf
Let us know if this helps…
[Reply]
Tower Defense on March 16, 2009 at 3:02 am
If anyone wonders whether it works, I just did try it on my own internal dashboard and it looks great.
[Reply]
Buster on March 27, 2009 at 2:30 am
Hey Guys,
Nice trick but i seem to get the similar error as “This dose not work”
Invalid Request
The QuickBase URL you specified was incorrectly formatted. If the link is correct, the problem may be a communication error between your web browser and QuickBase. Try accessing the URL again.
Any ideas?
[Reply]
