What Is The UNOB Technique?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered

I see a lot of people writing some fantastically complicated formula URLs that attempt to (1) clumsily cascade a bunch of native actions together using the rdr parameter or (2) call inline JavaScript via the javascript: protocol. In both cases you are severely complicating your work. Luckily there is a simple technique which I affectionately call the UNOB Technique that will solve all your problems and is very easy to implement.

The UNOB Technique is short for a Unobtrusive JavaScript which is an historical approach to creating web pages emphasizing the separation of content (HTML), presentation (CSS) and behavior (JavaScript). You can read about it here:

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

As applied to QuickBase Unobtrusive JavaScript is bit of a joke because native QuickBase pages are wildly obtrusive as authored by QuickBase and the image onload technique (which is used in conjunction with the UNOB Technique) is also highly obtrusive. Nevertheless the UNOB Technique will solve a wide class of problems, avoid a lot of lengthy formula debug sessions and get you a raise from your manager.

So here is the UNOB Technique description (assuming you are familiar with the image onload technique):

Step (1)
Don't even attempt to write a complicated URL formula - just concatenate an anchor element to your standard image onload field (ie [-]) like this:

[iol] & "module.js" & [/iol]
&
"<a class='QBU_MyClass Vibrant Success'>Do Something Impressive</a>"

This formula will bootstrap the loading of module.js upon page load and essentially fill the real estate taken up by the [-] field with a nicely styled button. Note there is no href or event handler attributes on this anchor element. Attempting to add a href or event handler attribute through the formula language will only bring grief, sorrow and misery.

Step (2)
Within module.js simple place code that will detect and process click events on anchors with class QBU_MyClass like so:

$(".QBU_MyClass").on("click", function(event) {
alert("Do Something Impressive");
});

You will have to place this code within appropriate page decode logic as specified in the generic module.js of the image onload technique template. If you need access to the [Record ID#] or other fields to implement your Something Impressive don't waste your time trying to pass these values through the QuickBase formula URL field. Doing so will only complicate your formula and encourage errors and typos. Instead, simply make an AJAX call within module.js to grab the field values you need to do Something Impressive.

Step (3)
There is no third step - you are done. Enjoy:

https://www.youtube.com/watch?v=S73ypK3As8I

Pastie Databsase
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=371

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb

Posted 4 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
I created a simple example of using the UNOB Technique and implemented it on Display (?a=dr), Edit (?a=er), Report (?a=q), and Table Dashboard (?a=td) pages (but not Grid Edit or Application Dashboard pages):

UNOB Technique
https://haversineconsulting.quickbase.com/db/bjvs4e3yf?a=td

To facilitate grabbing the [Record ID#] I added a data-rid attribute to the anchor element using this modestly different formula:

[iol] & "module.js" & [/iol]
&
"<a class='QBU_MyClass Vibrant Success' data-rid=" & [Record ID#] & ">Do Something Impressive</a>

You may be tempted to think this whole scheme is complicated but note that the only thing you ever have to change across all implementations of the UNOB Technique in this formula is the anchor display text - all other changes are made within module.js. In other words you will never again have to debug malformed JavaScript within URL formulas or worry about properly escaping URLs with rdr parameters.

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=372

The time you save not debugging your formulas can be devoted to listening to videos:

What I am listening to now: The B-52's (1979) (FULL ALBUM)
https://www.youtube.com/watch?v=_T-CaRwU47M
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
And of course you can substantially shorten the script:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=373
Photo of eduardo

eduardo

  • 40 Points
Dan one of the impressive things I am trying to achieve without success is to read a summary report in qdb_data global variable (pastie 363)

Have tried a couple of things such as:

//TABLE DASHBOARD PAGE ========================================
    //alert("You are on the Table Dashboard Page");
    $(".QBU_MyClass").on("click", function(event) {
      var rid = $(event.target)[0].dataset.rid;
      alert("Do Something Impressive\n[Record ID#] = " +rid );
      var promise = $.getScript(dbid + "?a=API_DoQuery&qid=" + qid + "&jsa=1");

$.when(promise).then(function() {
console.log(qdb_data);
 // your raw data will be available in the variable qdb_data
});

My dbid apptoken qid etc are correct

Any insight for this?