Pass Field Values to Javascript

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • Answered
I have a button which takes in a bunch of field values and uses them to print a label. My only solution right now to pass variables from that page to the script is to put them as part of the formula as seen below. Is there a better way to do this?

Formula:
"javascript: "
&"var dbid = '" & [_DBID_Example] & "';"
&"var recordID = '" & [Record ID#] & "';"
&"var appToken = '" & [AppToken] & "';"
&"var mfgDate = '" & [Date Created] & "';"
&"var serialNum = '" & [Serial Number] & "';"
&"var recordID = '" & [Record ID#] & "';"
&"var name = 'Example';"
& [script] & "PrintLabel.js" & [/script]
Photo of Allan Horn

Allan Horn

  • 84 Points 75 badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of Chris

Chris, Champion

  • 4,390 Points 4k badge 2x thumb

Allan,

I believe you have to use the FID_##_ field identifiers.

Photo of Chuck Grigsby

Chuck Grigsby

  • 1,978 Points 1k badge 2x thumb
You can just create those variables in your PrintLabel.js .
You just use the field ID like Chris is mentioned. If in edit mode you can open up console(F12) and type _fid_3.value and it should return the value for that field on the form. 3 usually is Record ID I think but you get the idea.

In console you can type gDBID from a table and get the DBID. You just need the formula text field to load the PrintLabel.js then just create another formula text thats an html button and wrap the print label function on the click like this
$("#qbu_yourBtn").on("click", printLabel())

Good luck!
-Chuck@Chuck.Support
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
You could pass just the [Record ID#] and within the script perform an AJAX call using API_DoQuery or API_GetRecordInfo using just one "passed" variable. 

A second technique is to augment the IOL variable [-] with some HTML element (typically <a>, <div>, <span>) that has data attributes. Here is a button that passes [Record ID#] and [Name] through a data attribute:

[iol] & "moduleTable5.js" & [/iol]
&
"<a class='QBU_Button Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
"  data-name='" & [Name] & "'" &
">Button</a>"
And then read off the data attributes within  the script using this.dataset:
(function(){
  var dbid = "bj5c9b9nb";
  var dbidTable1 = "bj5c9b9pr";
  var dbidTable2 = "bj5dnm78i";
  var dbidTable3 = "bj5dnnsgm";
  var dbidTable4 = "bj5dnpb46";
  var dbidTable5 = "bj5dwp4f5";
  var dbidTable6 = "bj5dwq9dx";
  var apptoken = "c7fsvsnb7x6327d7an2ncd2k7vq";
  $.ajaxSetup({data: {apptoken: apptoken}});
  $("a.QBU_Button").on("click", function(event) {
    console.log("moduleTable5.js");
    var rid = this.dataset.rid;
    var name = this.dataset.name;
    console.log("rid=", rid);
    console.log("name=", name);
    console.log("this", this);
  });
})();

Note that you can't use data attributes with fields that contain text that cannot be included in an attribute so use this technique for simple text, number date fields but not multi-line text fields.

A third technique it to pass absolutely no parameters but within the script scrape the rid out of the HTML or reference the global kRid and then perform an AJAX query for the rest of the fields as above.

The point of all of these approaches is to make your formulas as clean and readable as possible and avoid placing script into the QuickBase Formula. You will have endless problems debugging your formulas if you insist on placing JavaScript in them because you have to escape all sorts of characters. Get out of the formula language and into script as fast as possible.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
I should also add that your existing formula will create global variables that could conflict with QuickBase's global variables :
&"var dbid = '" & [_DBID_Example] & "';"
&"var recordID = '" & [Record ID#] & "';"
&"var appToken = '" & [AppToken] & "';"
&"var mfgDate = '" & [Date Created] & "';"
&"var serialNum = '" & [Serial Number] & "';"
&"var recordID = '" & [Record ID#] & "';"
&"var name = 'Example';"
You can reduce the chance of this but prefixing wtih QBU:
&"var QBU_dbid = '" & [_DBID_Example] & "';"
&"var QBU_recordID = '" & [Record ID#] & "';"
&"var QBU_appToken = '" & [AppToken] & "';"
&"var QBU_mfgDate = '" & [Date Created] & "';"
&"var QBU_serialNum = '" & [Serial Number] & "';"
&"var QBU_recordID = '" & [Record ID#] & "';"
&"var QBU_name = 'Example';"
I sent out a factitious memo years ago informing all earth based QuickBase staff to never use a variable, id or class name etc that starts with QBU to avoid namespace collisions. Maybe I should resend my memo as they hired a lot of new developers in the last decade.
(Edited)
Photo of Allan Horn

Allan Horn

  • 84 Points 75 badge 2x thumb
That's a great point. I haven't run into this problem yet but definitely can see it happening in the future.