Forum Discussion

_anomDiebolt_'s avatar
_anomDiebolt_
Qrew Elite
7 years ago

Introducing the Three Quotes and a Script Technique (3Q&S)

Introducing the Three Quotes and a Script Technique (3Q&S)

I though I would provide some usage notes on the newly named technique Three Quotes and a Script (3Q&S). In a nutshell this is just a variant on the IOL and EOH techniques where you don't reference a code page. Rather all the relevant script is embedded into an onclick or onerror handler using some clever use of three different quote characters that don't make the embedded script unreadable with various HTML escaping mechanisms.

Here is a prototype button using the 3Q&S technique:
"<a href='#' class='Vibrant Success' onclick='
// your script here
// write you JavaScript without using single or double quotes
// instead use backtick quotes (with or without string interpolation)
'>Button</a>"
Pass simple field values using data attributes and within your JavaScript read these values as text using this.dataset.*. Simple fields values mean text fields or numbers. The text fields you pass as data attributes should not contain single or double quotes so it is best to only pass text fields that are names or identifiers such as "SKU1002". Passing numeric fields is okay but withing the script they will be read as text values. Passing other fields such as email, dates and phone numbers is probably okay but addresses and multi-line text fields could  be problematic. In these cases is might be simpler to pass the [Record ID#] alone and gain access to all the field values within the script by calling API_GetRecordInfo.
"<a " &

"data-rid='" & [Record ID#] & "' " &
"data-name='" & [Name] & "' " &
"data-number='" & [Number] & "' " &

"href='#' class='Vibrant Success' onclick='
// your  script here
// access field values using the this.dataset.* construct
// this.dataset.rid
// this.dataset.name
// this.dataset.number
'>Button</a>"
If you need your script to run immediately upon page load you can
use the same 3Q&S technique along with the OEH technique:
"<img src onerror='

// your script here

// write you JavaScript without using single or double quotes
// instead use backtick quotes (with or without string interpolation)

'>"
Again, if you need to pass fields values to your script use data attributes:
"<img "
"data-rid='" & [Record ID#] & "' " &
"data-name='" & [Name] & "' " &
"data-number='" & [Number] & "' " &
"src onerror='
// your  script here

// write you JavaScript without using single or double quotes
// instead use backtick quotes (with or without string interpolation)

// access field values using the this.dataset.* construct
// this.dataset.rid
// this.dataset.name
// this.dataset.number
'>"
In the case of the OEH technique there are two general use cases:

(1) run some type of script that modifies the page's appearance or behavior

(2) produce displayable content in the <td> cell where the <img> field is located. In this case within the script you explicit assign the outerHTML property of the <img>:
this.outerHTML= <content to be displayed>;
This content can include arbitrary HTML without restrictions.

One final note is that despite how wonky this method may appear it has some attractiveness as a workaround since the formulas are self contained. A more formal method of introducing script using the IOL or OEH techniques requires you to create (1) a formula named [-], (2) two user variables named [iol] and [/iol] and (3) a code page named module.js. Some users find it conceptually simpler to just add a single formula no matter how strange it may look. Using the three different quotes with the 3Q&S technique keeps the formula readable (at least on data entry - QuickBase munges the formula after saving it). 
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    7 years ago
    I thought I would add a dead simple and extremely useful example to contrast the IOL technique with the new 3Q&S technique. This example actually arose out of a client's request to add geoLocation to the form their field technicians create.

    First just visit each of these URLs and you will be prompted to share your current location (don't save the record unless you want to share your latitude and longitude):

    Locations 1 ~ Add New Record ~ Using IOL Technique
    https://haversineconsulting.quickbase.com/db/bn77i2rxe?a=nwr

    Locations 2 ~ Add New Record ~ Using 3Q&S Technique
    https://haversineconsulting.quickbase.com/db/bn78s62hp?a=nwr

    Each of the screens look like this and your Latitude and Longitude will be filled in automatically (after your give your permission):





    The traditional IOL technique requires a little setup for the (1) formula, (2) user defined variables, and (3) code page. Here is the formula and code page used in this table:
    [-] field definition:
    [iol] & "module.js" & [/iol]

    module.js code page:
    $("#_fid_7").attr("readonly", true);
    $("#_fid_8").attr("readonly", true);
    navigator.geolocation.getCurrentPosition(pos => {
      _fid_7.value = pos.coords.latitude;
      _fid_8.value = pos.coords.longitude;
    });
    The purpose of the setting the "readonly" attribute is prevent a human from modifying the latitude and longitude directly as these fields will automatically have their values set by script. Note that the script uses double quotes. Additionally, note that if you were to copy an application that used the IOL technique you would normally have to modify some hard-coded dbid's (but not in this particular case) and perhaps some other parameters in the script. In general applications that use the IOL technique have to have a little maintenance on the module.js code page if they are to be copied.

    Now lets look at second table where the 3Q&S technique is used.

    Here is the field definition for for the Rich Text Formula field [-]:
    [-] field definition:
    "<img src onerror='

    $('#_fid_7').attr('readonly', true);
    $('#_fid_8').attr('readonly', true);

    navigator.geolocation.getCurrentPosition(pos => {
      _fid_7.value=pos.coords.latitude;
      _fid_8.value=pos.coords.longitude;
    });

    '>"
    Note we are now using backticks quotes instead of double quotes and the JavaScript code is otherwise identical and still readable. As a bonus this implementation of the geoLocation feature is portable.

    I hope that helps understand the difference between the IOL and 3Q&S.