Save button on iframed Grid Edit report

  • 1
  • 2
  • Question
  • Updated 5 months ago
  • In Progress
I'm trying to build some buttons that will display grid edit reports in a pop-up window, allowing users to quickly dive unto selected records and update fields. 
Since the reports are displaying in a pop-up, I'm displaying them as iframes using "&ifv=1"...

The issue: When grid-edit reports are displayed as iframed reports, they do not display the Save, Save changes & Cancel buttons.

Is there a way to have these buttons display?

Photo of Carlos

Carlos

  • 644 Points 500 badge 2x thumb

Posted 5 months ago

  • 1
  • 2
Photo of QuickBasePros_IDS

QuickBasePros_IDS, Champion

  • 2,256 Points 2k badge 2x thumb
WIthout custom programming (launching javascript from a code Page) this probably is not possible.  Your next best native solution would be to launch the embedded report in a new window.  Alternatively; either use checkboxes to hide/show grid edit embedded reports which they can update OR use custom buttons to launch to new Forms which include the Grid Edit reports.  Note also that custom-save buttons will not save Grid Edit entries so users will have to either use Save & close or Save & keep working default buttons.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
Photo of Carlos

Carlos

  • 644 Points 500 badge 2x thumb
Brilliant Dan! Thanks!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
>WIthout custom programming (launching javascript from a code Page) this probably is not possible.


Actually you code do this naively if you created Rich Text formula field buttons that called the appropriate click handler:

<a href="#" class="Tall Vibrant Success" onclick="GeditDoSave(gReqDBID, true);">Save</a>

<a href="#" class="Tall Vibrant Primary Secondary" onclick="GeditDoSave(gReqDBID);">Apply Changes</a>

<a class="cancelBtn Tall Vibrant FS-Button" onclick="GeditDoCancel();">Cancel</a>

The only issue is that these buttons would be placed in their own column.
Photo of Jana

Jana

  • 324 Points 250 badge 2x thumb
This is SO great!  I have some follow up questions thought!  I successfully loaded all the iol stuff correctly the first try, so i am super proud of that! :)  

Dan, in your Pastie, you have two variables defined.  

  1.   var dbid = "bnq3c9658"; (<-- I am guessing this one is just the dbid before the ? of the table the data is coming from??)
  2.   var dbidRecords = "bnq3damiq";  (<--where does this one come from??)
  3. This is my first additional thing to add to the "module.js".  The code you have listed: https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=658, does that go in a Formula Field in a same Table as the variables above or do you just add a few carriage returns after the "Generic User Defined Page" stuff you so kindly provided us to get started and paste it there, meaning in "module.js"?  ̄\_(ツ)_/ ̄ 
Carlos, do you mind sharing your code for how you got your Grid Edit report into the iFrame? :-)

Thank you both in advance!!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
1 & 2:

The naming convention I have adopted it to create a JavaScript variable dbid and assign it the dbid of the application and to create additional JavaScript variables (one for each table) with a prefix of dbid followed by a human readable name for the table (eg dbidClient).

3

You have to set up the IOL technique to use this code: Directions here:

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=294
Photo of Carlos

Carlos

  • 644 Points 500 badge 2x thumb
Jana,
As Dan commented, the only thing needed is to add the IOL field in the table being displayed, and the buttons should show. 
Scriptwise, it's a copy/paste solution.

Photo of Jana

Jana

  • 324 Points 250 badge 2x thumb
Thanks Carlos & Dan!  Actually, I got the initial part of the IOL technique down, but missing the how to code the iframe of my grid edit report and where exactly to put this code:

(function(){

  var querystring=document.location.search;

  var dbid = "bnq3c9658";
  var dbidRecords = "bnq3damiq";
  var apptoken = "dbjtzhvncf9fjgbbpfmqxfwsv2wj";
  $.ajaxSetup({data: {apptoken: apptoken}});

  if (/dlta=mog/i.test(querystring) && /ifv/i.test(querystring)) {
    var markup =`
      <div class="RightColumn NoWrap PageNavBarActions" id="pageNavBarActions">
      <a id="saveAction" href="#" class="Tall Vibrant Success" onclick="GeditDoSave(gReqDBID, true);">Save</a>
      <a id="applyAction" href="#" class="Tall Vibrant Primary Secondary" onclick="GeditDoSave(gReqDBID);">Apply Changes</a>
      <a id="cancelAction" class="cancelBtn Tall Vibrant FS-Button" onclick="GeditDoCancel();">Cancel</a>
    </div>
    `;

    $(markup).insertBefore("#bodyTable");

  } 

  if (/a=td/i.test(querystring)) {
    $("#facetKeyword").hide();
    $('<input type="text" id="facetKeyword2" maxlength="255" class="FacetKeyword UserInput" placeholder="Search these records">').insertAfter("#facetKeyword")
    $("#facetKeyword2").on("keyup", function(e) {
      var keyCode = e.keyCode || e.which;
      if (keyCode == 13) {
        $("#facetKeyword").val($("#facetKeyword2").val()).trigger("keyup");
      }
    });
  } 

})();

Here are my follow up questions.

  1. Does the above code go into an independent module.js with a new name or actually IN the original module.js created with the instructions provided....OR does it go in a field?   
  2. My Grid Edit report is:  https://mycompany.quickbase.com/db/bnjxiqkg3?a=q&qid=8.  I know i have a Rich Text Formula to put the code in, but what do i wrap this with to make the iframe work?  Like i said, this is my first one, so with a little guidance, i'll be off to the races after this weee bit of hand holding. :)  
Thanks again fellas!
Photo of Carlos

Carlos

  • 644 Points 500 badge 2x thumb
create a button that opens the new report in an iframe...
"javascript:void(window.open('" & URLRoot() & "db/" & [_DBID_TABLENAME] & "?a=q" & [Token] &"&qid=15&query={%2239%22.IR.%22this+mon%22}&dlta=mog~&ifv=1','PopUp').focus());"