Discussions

Expand all | Collapse all

Scripts on Dashboard

  • 1.  Scripts on Dashboard

    Posted 01-23-2019 11:58
    A lot of users ask for functionality to be added to an application's dashboard through a Button and expect that there is an easy way to run a script on clicking the button. Unfortunately, Buttons added through the Button Bar Widget display a code page even if the code page is a JavaScript file and has the extension *.js. This post demonstrates an easy way to configure your dashboard so that all Buttons which reference a Code Page that has an extension *.js will execute the script (and not reload the dashboard page) rather than display the script. Additionally if the code page does not have a *.js extension the button will operate normally and display the associated code page when clicked.

    Here is a simple demo that has four buttons on a Button Bar Widget when when clicked execute a short JavaScript file saved as a code page:



    Scripts on Dashboard
    https://haversineconsulting.quickbase.com/db/bpb5bftky

    This customization is pulled off by including a Code Page named ScriptsButton.html onto the dashboard through a Web Page Widget:
    <script>
    if (window.parent.document.location.search.length == 0) {
      var $ = window.parent.$;
      $(window.frameElement, window.parent.document).closest("div.Row").hide();
      $("li.ButtonItem a div", window.parent.document).each(function() {
        if ($(this).text().endsWith(".js")) {
          var $link = $(this).parent();
          var url = $link.attr("href").replace("showpage", "dbpage");
          $link.removeAttr("href");
          $link.attr("onclick", '$.getScript("${url}")');
        }
      });
    }
    </script>
    <h1>ScriptButtons.html</h1>
    Code Page ScriptsButtons.html
    https://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=ScriptButtons.html

    What this Code Page does is look for Buttons which have Cover Text ending in *.js and remove the href attribute and add an onclick attribute which will load and execute the script file identified by the Button's Cover Text.

    Here are the code pages associated with the four Buttons:

    Code Page bonjour.js
    https://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=bonjour.js

    Code Page hallo.js
    https://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=hallo.js

    Code Page hello.js

    https://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=hello.js

    Code Page hola.js
    https://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=hola.js

    Pastie Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=721

    Notes:

    (1) You must use Cover Text for the Buttons ending in *.js as this is the criteria the script within ScriptsButtons.html uses to distinguish Buttons referencing script code pages from code pages that should be displayed.

    (2) The script within ScriptsButtons.html additionally hides itself from displaying on the dashboard and taking up space but does not hide the widget while editing the dashboard.

    (3) Since this technique is executing user supplied script within a QuickBase authored page all the code pages should be enclosed in an IIFE (Immediately Invoked Function Expression):
    (async () => {
      alert("Hello");
    })();
    (4) For the very technical users among us, the <script> in the page ScriptsButtons.html employs a couple of little know ways of manipulating and working with <iframe>s that may be useful in other contexts. First, the frameElement property give us access to the <iframe> DOM element in the parent window. Second, the parent property gives us access to the parent windows global variables including the jQuery object (nb there is no jQuery object in the <frame>). Using these script constructs it is possible to further manipulate the dashboard from short code whole within the <iframe> and to use the libraries and objects defined in the dashboard. So you can do things like resize the <iframe>'s height and width from code within the <iframe> itself thus removing vertical scrollbars for example.


  • 2.  RE: Scripts on Dashboard

    Posted 28 days ago

    Hi Dan,

    Hope all is well. Having a little trouble with getting this process to work. I was able to create the ScriptButtons HTML Code Page, and i created a new App Home Page, that i have referenced the URL to the HTML Code page in a Web Page Widget, but i am still seeing the ScriptButtons HTML H1 tag when i render the page. Any help with this would be greatly appreciated. 

    Thank you,
    Dave



    ------------------------------
    Dave Medeiros
    ------------------------------



  • 3.  RE: Scripts on Dashboard

    Posted 26 days ago
    Hi Dave,

    I just wanted to give you the heads up that Dan hasn't been around the forum in quite some time so you may not hear back from him on your question. I also wanted to let you know that the method Dan suggests here uses functionality that isn't supported by Quick Base and as we are working on future features it is possible for some of these methods to break or return invalid responses over time. I'm curious what are you trying to accomplish using this method? There may be some supported options we can recommend that would be able to get you to the sam result in a different method and aren't open to breaking. Thank you for your time today.

    ------------------------------
    Evan Martinez
    Community Marketing Manager
    Quick Base
    ------------------------------



  • 4.  RE: Scripts on Dashboard

    Posted 18 days ago

    Hi Evan,

    Thank you so much for this info and your response. What I am looking to accomplish with this method is to basically have a button on an Application Home Page that runs a simple Javascript script. I am learning Javascript at the moment and since we heavily use Quickbase here, i wanted to see how i could create a Javascript button on an Application page, that would basically run the script and return data specified on the script. 

    The other scenario I wanted to test was the ability to run Javascript using a button located in a Table Record. So for instance if i have three tables  (A, B and C) Table A is the parent and B and C are the child tables. I would like to create a script that based on Table A it would lookup related records in Table B and create records into Table C based on the related records. 

    I wasnt sure where the best place to start with how Quickbase works with Javascript. Any help or guidance with this would be greatly appreciated. 

    Thank you,

    Dave



    ------------------------------
    Dave Medeiros
    ------------------------------



  • 5.  RE: Scripts on Dashboard

    Posted 13 days ago
    Dan almost always has a link to his Quick Base account which has every IOL and JavaScript technique he has posted afaik. That is a great place to start.

    I don't know who runs the site but https://www.quickbase.dev/#introduction is a great website for this. They have a library for use with Quick Base that makes everything easier to do. https://github.com/tflanagan/node-quickbase They also have examples for both PHP and JavaScript.

    All you really need to do is set up a code page with some basicl HTML and load the external scripts you need and then authenticate via the library or with the same calls the library would make for you. Store your token or user id(user id has some security concerns when storing it, someone could impersonate you if they got ahold of it) and then use that to make the calls you want.