Button to Fire IOL Script

  • 1
  • 1
  • Question
  • Updated 10 months ago
  • Answered
What are the first steps to setting up a formula URL button to fire an IOL script if clicked?

Thanks
Photo of Tyler Parker

Tyler Parker

  • 860 Points 500 badge 2x thumb

Posted 10 months ago

  • 1
  • 1
Photo of Rob White IV

Rob White IV

  • 1,070 Points 1k badge 2x thumb
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,024 Points 20k badge 2x thumb
The title of you post "Button to Fire IOL Script" suggests you may be misunderstanding what the IOL Technique does. The purpose of the IOL Technique is to inject user supplied JavaScript (saved in a code page) into a {new, view, edit, report or grid edit} page for the purpose of enhancing the behavior of the page. The injection is done when the page first loads and the code that is injected immediately executes without any user interaction. When using the IOL Technique there may or may not be buttons involved - it depends completely on what the purpose of the script is.

Now if you want a button the most convenient way to introduce it is by tacking it on to the image onload field as follows:

[iol] & "moduleTable1.js" & [/iol]
&
"<a class='QBU_Button Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
"  data-name='" & [Name] & "'" &
"  data-payment='" & [Payment] & "'" &
">Button</a>"

This will result in the following HTML being spliced into the page:

<td>

<img qbu="module" src="/i/clear2x2.gif" onload="if(typeof QBU=='undefined'){QBU={};$.getScript(gReqAppDBID+'?a=dbpage&amp;pagename=moduleTable1.js&amp;rand='+new Date().getTime())};">

<a class="QBU_Button Vibrant Success" data-rid="1" data-name="Dan" data-payment="100">Button</a>

</td>


The first part of this HTML is the standard IOL Technique script injection. The second part of this HTML is a button with Vibrant Success class and three data attributes with values reflecting the values of three fields, [Record ID#], [Name] and [Payment]. In the code page moduleTable1.js we listen for a click on the button with class QBU_Button and when it occurs extract the three data attributes and store them in variables rid, name and payment,

  $("a.QBU_Button").on("click", function(event) {
    var rid = this.dataset.rid;
    var name = this.dataset.name;
    var payment = this.dataset.payment;
    var message = `rid=${rid}\nname=${name}\npayment=${payment}`;
    alert(message);
  });

So the Button does not "FIre the IOL Script." Rather the script listens for the button being clicked.

Here is a demo:



IOL With Button ~ Table 1 Dashboard
https://haversineconsulting.quickbase.com/db/bntfq3y4z?a=td

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=671
(Edited)
Photo of Tyler Parker

Tyler Parker

  • 860 Points 500 badge 2x thumb
Makes much more sense now
Photo of John Barulich

John Barulich

  • 654 Points 500 badge 2x thumb
Hey Dan,

What part of the steps specifies where the button should go? With the way the IOL is set up, the button ends up being on the page of the individual record. 

How would I go about adding a button at the top of the table instead of within each record?

Thanks
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,024 Points 20k badge 2x thumb
See this example and focus on the position of the button:

Process Selected Records
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=462

In the code you will find this statement that inserts the button atop the report:
  $("table[qbdbid=" + dbidTable  + "] tr:first").before("<tr><td><a href=# id=QBU_Button class='Vibrant Success'>Process Selected Records</a></td></tr>");
My suggestion is to first paste your code into the console to rapidly see the result.
Photo of John Barulich

John Barulich

  • 654 Points 500 badge 2x thumb
Thanks Dan,

  $("table[qbdbid=" + dbidTable  + "] tr:first").before("<tr><td><a href=# id=QBU_Button class='Vibrant Success'>Process Selected Records</a></td></tr>");

In your code snippet previously stated, it doesn't look like we are specifying any context for the selection. How would we specify context for this selection? How would this statement, which specifies position, be executed within the script if it will not fire until the button is pushed?

I can't seem to get a simple button onto the top with 

[iol] & "myScript.js" & [/iol]
&
"<a class='QBU_Button Vibrant Success'>Button</a>"
(Edited)
Photo of John Barulich

John Barulich

  • 654 Points 500 badge 2x thumb
function main(){
    var dbidTable = "blahblah";
$("table[qbdbid=" + dbidTable + "] tr:first").before("<tr><td><a href=# id=QBU_Button class='Vibrant Success'>Calculate Time Between Stops</a></td></tr>");
$("#QBU_Button").on("click", function(event) {
getDiff();
alert("Button was clicked");
});
}
main();

This is a snippet from my script. When running it in the console from the table dbid page, the button is correctly created above the table and executes my getDiff function. I must not understand the real details behind the IOL if my original understanding is not correct, because from my own testing, the code is NEVER ran unless we are viewing, editing, or adding a record.

How can my code, which puts a button above the table, be executed if we are never accessing an individual record?

My IOL is set up for this table, iol variables are there, the form is setup. Everything is in place. What could be the problem?
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,944 Points 20k badge 2x thumb
You are probably not including the iol field on the report. It is normally named [-] and placed as the last column in the report to not call attention to itself. You can debug this and other scenarios by placing console.log() statements in your script,
Photo of John Barulich

John Barulich

  • 654 Points 500 badge 2x thumb
Are you referring to the Fields under Settings of the table? I have the iol set up there:

[iol] & "myScript.js" & [/iol]

All appropriate values unchecked. I have the IOL set up for many tables and haven't had this issue until this project, I'm not sure what I could be doing wrong.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,944 Points 20k badge 2x thumb
Yes that is the iol field typically named [-]. Is [-] included in the report? If so it will display as a skinny column with the heading "-" and nothing displayed in any of the rows.
Photo of John Barulich

John Barulich

  • 654 Points 500 badge 2x thumb
No, it was not included in the report. That was definitely the problem. My teammate and I got it working. Thanks Dan!
(Edited)
Photo of Tyler Parker

Tyler Parker

  • 860 Points 500 badge 2x thumb
Good content Dan, thanks for the explanation and examples
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,964 Points 20k badge 2x thumb
Two additional points:

(1) You should probably not use a function named main() as it could easily collided with a QuickBase function named main. All you injected JavaScript code should be included in a IIFE (Immediately Invoked Function Expression):
(function () {
  /* your code here */
})();
)

(2) It is best to name all of you injected code pages with a prefix "module" followed by the name of your table and perhaps an additional word reflecting the function of the script. This will help you recognize the purpose the code page on sight and would help automation scripts to detect and potentially update your code pages automatically (coming).
Photo of Tyler Parker

Tyler Parker

  • 860 Points 500 badge 2x thumb
Thanks man appreciate everything