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 Dashboardhttps://haversineconsulting.quickbase.com/db/bpb5bftkyThis 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.htmlhttps://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=ScriptButtons.htmlWhat 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.jshttps://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=bonjour.jsCode Page hallo.jshttps://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=hallo.js
Code Page hello.jshttps://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=hello.jsCode Page hola.jshttps://haversineconsulting.quickbase.com/db/bpb5bftky?a=dbpage&pagename=hola.jsPastie Databasehttps://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=721Notes:(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.