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

  • Pingback: QuickBase Tricks I know… « My Name Means Flintstone

  • http://www.emoderation.com/ Alastair

    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]

  • http://www.emoderation.com/ Alastair

    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

    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]

  • achakmakjian

    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]

  • http://ivyinsiders.com/ David

    Can the same be done for tables generated by reports?

    [Reply]

  • http://ivyinsiders.com David

    Can the same be done for tables generated by reports?

    [Reply]

  • This does not work

    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]

  • This does not work

    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

    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]

  • achakmakjian

    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

    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]

  • Jared

    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

    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]

  • Andrew P

    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]

    Phil Reply:

    @Andrew P,

    Is there an API call for Chart reports so that the QBase nav bar doesn’t show?

    [Reply]

    Phil Reply:

    @Phil,

    Never mind – I found a cheat that works beautifully.

    On an existing dashboard page I had a chart that i liked. Using FireFox, I right clicked on the chart. Selected View Page Info. Then copied the URL in the Address field.

    This provide a “clean” nav, border, and link free view of the charts.

    [Reply]

  • achakmakjian

    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]

  • achakmakjian

    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

    Is it possible to incorporate a “pipe” or RSS feed into my Quickbase application?

    [Reply]

  • E. Peak

    Is it possible to incorporate a “pipe” or RSS feed into my Quickbase application?

    [Reply]

  • achakmakjian

    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]

  • achakmakjian

    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]

  • http://www.tower-defense-game.com/ Tower Defense

    If anyone wonders whether it works, I just did try it on my own internal dashboard and it looks great.

    [Reply]

  • http://www.tower-defense-game.com/ Tower Defense

    If anyone wonders whether it works, I just did try it on my own internal dashboard and it looks great.

    [Reply]

  • Buster

    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]

    Sam Reply:

    I did the same thing, then realized that I copied the code from the website, creating the wrong kind of quotation marks. Change the marks to “regular” ones in a text editor and it works like a charm.

    [Reply]

  • Buster

    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]

    Sam Reply:

    I did the same thing, then realized that I copied the code from the website, creating the wrong kind of quotation marks. Change the marks to “regular” ones in a text editor and it works like a charm.

    [Reply]

  • nopyopisina

    Hello to All the Guests and Members,
    Can you help me to find most popular dating sites.
    Like a: http://www.yahoo.com/ please.
    Thx,
    nopyopisina

    [Reply]

  • nopyopisina

    Hello to All the Guests and Members,
    Can you help me to find most popular dating sites.
    Like a: http://www.yahoo.com/ please.
    Thx,
    nopyopisina

    [Reply]

  • apacit

    I have done this with some success, but every month or two all of my chart “qid” values seem to change. I have to rerun them and update the links. I have created copies of the charts and put them where no other users can modify them, but it still happens. Any idea how to prevent this?

    [Reply]

  • Steven Laurel

    This is great. 

    Question – How do I make my actual charts smaller?  If I reduce the size of the iframes, the charts are chopped off.

    [Reply]

  • DP

    How do you actually show just the chart/report? It’s working for me but I see the whole page with all the QB settings etc, I just want to see the report, any ideas?

    [Reply]

    aforbes Reply:

    Yes you can do that. To do so, first create and save the chart view you want to embed.

    Then, edit the Dashboard page’s Text section in HTML mode (Don’t know how to edit a text section? Please read:https://www.quickbase.com/help/customizing_dashboard_page.html#text).

    Insert the following code snippet where you want the chart to appear:

    Within this code, you must replace the following elements with your own information:

    W (which appears twice) – Enter chart width in pixels. This can be any number you want. Replace both instances of the capital W with the same number.
    H (which appears twice) – Enter the height in pixels. Again, this can be any measurement. Replace both instances of the capital H with the same number.
    DBID – Enter the database ID number for the chart view’s table. (Read how to find this at: https://www.quickbase.com/db/6mztyxu8?a=dr&r=w&rl=ftn). Replace only the one instance of the DBID text where it appears in capital letters.
    ID – Enter the Query ID – which is the ID of your chart view. To find this, display the chart view and see what number appears in your browser’s address bar after the text “qid=”

    NOTE: If your application lives within a QuickBase Realm, you’ll need to indicate that in this code as well. To do so, locate the element that begins “realmhost=www.quickbase.com.” Replace http://www.quickbase.com with your realm. For example: realmhost=mycompany.quickbase.com.

    FAQ: Part of my chart is cut off. What’s wrong?
    If you can’t see your whole chart, you’ve set the second instances of Width and Height smaller than the first. To correct this, make both sets of dimensions the same.

    FAQ: If want to display two charts side by side you’ll need to use the TD and TR html commands to create a table with columns:

    Best,
    The QuickBase Team

    [Reply]

    MZK Reply:

    DP – use this instead to get rid of the QB settings on your charts and adjust height, width, etc:

    [Reply]

    David Packles Reply:

    Thanks! still needs some work, but helpful.

    [Reply]