Discussions

 View Only
Expand all | Collapse all

Button to Fire IOL Script

Tyler Parker

Tyler Parker07-03-2018 15:17

  • 1.  Button to Fire IOL Script

    Posted 06-28-2018 20:13
    What are the first steps to setting up a formula URL button to fire an IOL script if clicked?

    Thanks


  • 2.  RE: Button to Fire IOL Script

     
    Posted 06-28-2018 23:54


  • 3.  RE: Button to Fire IOL Script

    Posted 06-29-2018 10:12
    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


  • 4.  RE: Button to Fire IOL Script

    Posted 07-03-2018 15:17
    Makes much more sense now


  • 5.  RE: Button to Fire IOL Script

    Posted 06-30-2018 15:49
    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


  • 6.  RE: Button to Fire IOL Script

    Posted 06-30-2018 15:59
    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.


  • 7.  RE: Button to Fire IOL Script

    Posted 07-01-2018 02:19
    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>"


  • 8.  RE: Button to Fire IOL Script

    Posted 07-01-2018 04:09
    Display a table report and paste this code into the console:
    var dbidTable = "your table dbid";
    $("table[qbdbid=" + dbidTable  + "] tr:first").before("<tr><td><a href=# id=QBU_Button class='Vibrant Success'>Pinch Me</a></td></tr>");
    $("#QBU_Button").on("click", function(event) {
      alert("Ouch!");
    });
    It will splice a button atop the report and establish a listener for clicks on that button. When you click the button the callback will execute in this case alerting a message.

    To implement this you could set up the IOL technique and include the IOL field [-] in the report - typically as the last column of the report to not call attention to itself (it will be a skinny column). The formula for [-] will be just this:
    [iol] & "myScript.js" & [/iol]
    The code snippet you pasted is for setting up a button on each row of a report:
    [iol] & "myScript.js" & [/iol]
    &
    "<a class='QBU_Button Vibrant Success'>Button</a>"
    Although it would normally pass the [Record ID#] through a data attribute:
    [iol] & "myScript.js" & [/iol]
    &
    "<a class='QBU_Button Vibrant Success' " &
    "  data-rid='" & [Record ID#] & "'" &
    ">Button</a>"
    And obtain the record id in the script as follows:
      $("a.QBU_Button").on("click", function(event) {
        var rid = this.dataset.rid;
        var message = 'You clicked on record with rid=${rid}';
        alert(message);
      });

    BTW, I think it is best to always name your code page with the prefix "module" followed by the name of the table and perhaps the function of the script. Examples:
    moduleTable1.js
    moduleTable1Form1.js
    moduleTable1UpdateSomething.js


  • 9.  RE: Button to Fire IOL Script

    Posted 07-02-2018 03:49
    Hey Dan,

    I ran my code within the console and it does everything I needed. Displays a button above the table, fires off my script, and completes my task.

    However, this script does not execute when put into a code page with the IOL set up correctly.

    From my understanding, the script does not run until an individual record is open, so how can my script be executed, which puts the button above my dbid table, when we are not viewing a record? 

    Everything is working perfectly until this last step


  • 10.  RE: Button to Fire IOL Script

    Posted 07-02-2018 08:12
    >From my understanding, the script does not run until an individual record is open, so how can my script be executed, which puts the button above my dbid table, when we are not viewing a record? 

    This is not correct. Post your code to work towards a solution.


  • 11.  RE: Button to Fire IOL Script

    Posted 07-02-2018 15:13
    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?


  • 12.  RE: Button to Fire IOL Script

    Posted 07-02-2018 16:00
    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,


  • 13.  RE: Button to Fire IOL Script

    Posted 07-02-2018 16:05
    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.


  • 14.  RE: Button to Fire IOL Script

    Posted 07-02-2018 16:19
    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.


  • 15.  RE: Button to Fire IOL Script

    Posted 07-02-2018 16:22
    No, it was not included in the report. That was definitely the problem. My teammate and I got it working. Thanks Dan!


  • 16.  RE: Button to Fire IOL Script

    Posted 07-03-2018 14:03
    Good content Dan, thanks for the explanation and examples


  • 17.  RE: Button to Fire IOL Script

    Posted 07-03-2018 14:12
    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).


  • 18.  RE: Button to Fire IOL Script

    Posted 07-03-2018 15:16
    Thanks man appreciate everything


  • 19.  RE: Button to Fire IOL Script

    Posted 04-28-2019 07:14
    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?


  • 20.  RE: Button to Fire IOL Script

    Posted 09-06-2019 13:37
    Hi Oana,

    I am having the same issue. Were you able to resolve it?


  • 21.  RE: Button to Fire IOL Script

    Posted 09-10-2019 14:11
    Could you share a snippet of your code, of where you place the button?

    I know when you add dynamic filters, the dynamic filters are added after the search bar... which might be over writing your button. Need code to verify.

    ------------------------------
    Ryan Stanford
    ------------------------------