Button to Fire IOL Script

Have you read this article?

https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

~Rob

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

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

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.

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>"

Good content Dan, thanks for the explanation and examples

Dan,

I am trying to implement this incredibly helpful technique to create a button at the top of a report. I was able to get the button created and placed at the top of my report table, and it behaves as expected at first. However, my report has dynamic filters, and when I filter the report, the button disappears. Sorting the report does not make the button disappear. Any suggestions?