Scripts on Dashboard

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.