Quick and Dirty Kiosk App Using QuickBase

So after my foray into quick and dirty dashboarding, I quickly discovered that even having the largest screen and using the act=API_GenResults table to squeeze down the wasted real estate, that some reports and charts really need to be shown large.   And also, having the screen update every 30 seconds with exactly the same data was kind of boring.

A project status kiosk in the middle of our development team area

I googled around to find a little bit of javascript that might help and I found some stuff that was close, but no cigar.

The thing I wanted to do was make it so people walking by could get a quick glimpse of all the projects going, which releases had open bugs, which releases had check-ins waiting for testing, where our risk analysis was pointing to et cetera.

Does anyone actually look at this, I dunno, but sometimes you have to create a widget in order for someone to start using it.

It took me a little bit of work to undo the original coders gif banner rotating kioskand make it a QuickBase report kiosk but here it is (just like the dashboard project you have to create a page that ends in HTML.   For ease just call the page kiosk.html)  :

<HEAD>

<TITLE>Rotating QuickBase Reports and Charts Kiosk</TITLE>

<SCRIPT LANGUAGE=”JavaScript”>

<!– Beginning of JavaScript -

newplace = new Array(8);

newplace[0] = “https://www.quickbase.com/db/xxxxxxxx?a=q&qid=AA”;

newplace[1] = “https://www.quickbase.com/db/xxxxxxxx?a=q&qid=BB”;

newplace[2] = “https://www.quickbase.com/db/xxxxxxxx?a=q&qid=CC”;

newplace[3] = “https://www.quickbase.com/db/xxxxxxxx?a=q&qid=DD”;

newplace[4] = “https://team.quickbase.com/db/xxxxxxxx?a=q&qid=EE”;

newplace[5] = “https://team.quickbase.com/db/xxxxxxxx?a=q&qid=FF”;

newplace[6] = “https://team.quickbase.com/db/xxxxxxxx?a=q&qid=GG”;

newplace[7] = “https://team.quickbase.com/db/xxxxxxxx?a=q&qid=HH”;

var timer = null

var     counter = 0

function kiosk() {

timer=setTimeout(“kiosk()”, 20000);

counter++;

if (counter  >=  8  )

counter = 0;

gothere();

}

function gothere() {

var obj= document.getElementById(“kioskexample”);

obj.innerHTML = “<iframe src=\”"+newplace[counter]+”\” width = 1200 height = 1000></iframe>”;

}

// – End of JavaScript – –>

</SCRIPT>

</HEAD>

<BODY BGCOLOR=”#FFFFFF” onload=”kiosk()”>

<DIV ID=”kioskexample”>

</DIV>

</BODY>

All you have to do is replace the URLs in the Newplace array with the URLs of your reports and voi la you have a kiosk.  In fact you can put any QuickBase url in there, so if you use DB pages, jpegs stored as file attachments or your main app dashboard or reports from several different quickbases, it really doesn’t matter.    One thing you might want to adjust is the assumption here that my iframe is 1200×1000.   It depends on your monitor/windows display settings what you put in there.  Oh and make sure that if you use only 5 reports or something that you also adjust the max value of counter to match the size of the newplace array.

One thing this will not solve is that after a few hours you’ll have to re-sign into quickbase  but if you are willing to maintain the kiosk, its something you just do when you walk by.  I’m sure the intrepid amongst you will also come up with all variations of this.  Love to hear them.

Anyway, hope this is something useful.

Armen

  • Pingback: Another cool little trick for QuickBase « My Name Means Flintstone

  • Mike Brady

    Hi, cool example. I would LOVE to see an example of using the Google Maps API to place push pins representing customer locations on a map. Not directions to a customer site, but all customers in a query represented on the map as push pins. Please tell me this can be done, and done easily. Please, please, please….. :-)

    [Reply]

  • Mike Brady

    Hi, cool example. I would LOVE to see an example of using the Google Maps API to place push pins representing customer locations on a map. Not directions to a customer site, but all customers in a query represented on the map as push pins. Please tell me this can be done, and done easily. Please, please, please….. :-)

    [Reply]

  • http://www.juicedtech.com/ Keith

    Mike,
    your Google Maps API comment can be achieved, check out this QB application:
    https://www.quickbase.com/db/bdtmpnmx5

    Click on a county link on the dashboard and a Google map will appear for all locations in that county. We control the pins being displayed as well based on a type field on the locations table. The data that appears in the pins is coming from QB as well. You can click the link in the pin and we take you back to that QB record.

    [Reply]

  • http://www.juicedtech.com Keith

    Mike,
    your Google Maps API comment can be achieved, check out this QB application:
    https://www.quickbase.com/db/bdtmpnmx5

    Click on a county link on the dashboard and a Google map will appear for all locations in that county. We control the pins being displayed as well based on a type field on the locations table. The data that appears in the pins is coming from QB as well. You can click the link in the pin and we take you back to that QB record.

    [Reply]

  • achakmakjian

    Now that is cool…

    [Reply]

  • achakmakjian

    Now that is cool…

    [Reply]

  • Mike Brady

    That is EXACTLY what I want. Next question: how do I get that feature?

    [Reply]

  • Mike Brady

    That is EXACTLY what I want. Next question: how do I get that feature?

    [Reply]

  • http://www.juicedtech.com/ Keith

    This is not an inherent feature within the QuickBase platform. We’ve developed this as a extension using the QB API as well as the Google Maps API. It is a hosted utility that we offer for a monthly fee. We have a few others as well, you can see them here…
    https://www.quickbase.com/db/bdtmqw2v8

    If you are interested in more info you can contact us directly, our contact info is within these demo apps.

    Keith

    [Reply]

  • http://www.juicedtech.com Keith

    This is not an inherent feature within the QuickBase platform. We’ve developed this as a extension using the QB API as well as the Google Maps API. It is a hosted utility that we offer for a monthly fee. We have a few others as well, you can see them here…
    https://www.quickbase.com/db/bdtmqw2v8

    If you are interested in more info you can contact us directly, our contact info is within these demo apps.

    Keith

    [Reply]

  • mike

    obj.innerHTML = “”;

    i can’t get this to work

    i get an error
    char 1
    invalid character
    line 52

    line 52 is the line listed above

    [Reply]

  • mike

    obj.innerHTML = “”;

    i can’t get this to work

    i get an error
    char 1
    invalid character
    line 52

    line 52 is the line listed above

    [Reply]

  • http://mynamemeansflintstone.wordpress.com/ armen

    I’m looking at what got pasted in my entry and what you pasted. Make sure that all double-quotes in your version are actually regular double-quotes and not the right quote left quote characters. If those characters end up in your html page, it’s likely that they will not get interpreted correctly when the browser attempts to execute it. For whatever reason, the blog editor we used tried to be smart about the quotes.

    I apologize if that is the problem…

    [Reply]

  • http://mynamemeansflintstone.wordpress.com armen

    I’m looking at what got pasted in my entry and what you pasted. Make sure that all double-quotes in your version are actually regular double-quotes and not the right quote left quote characters. If those characters end up in your html page, it’s likely that they will not get interpreted correctly when the browser attempts to execute it. For whatever reason, the blog editor we used tried to be smart about the quotes.

    I apologize if that is the problem…

    [Reply]

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

    We control the pins being displayed as well based on a type field on the locations table. The data that appears in the pins is coming from QB as well.

    [Reply]

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

    We control the pins being displayed as well based on a type field on the locations table. The data that appears in the pins is coming from QB as well.

    [Reply]