What is the Reframing Technique?

  • 0
  • 2
  • Question
  • Updated 3 years ago
  • Answered

I am so excited - each day brings us one day closer to the Mas Que Nada QuickBase User Group Conference in Brazil. And to help you prepare for this spectacle I was asked to explain the Reframing Technique several of the presenters will assume attendees will be familiar with.

The Reframing Technique is actually short for Let Me Reframe That For You Technique - sort of a take off on the Let Me Google That For You meme. Before I spill the beans on this devilishly clever technique let me just show you an example of it. Here is a simple demo that has a Clients table and a Log table - have a visit and click on a variety of random links:

Let Me Reframe That For You
https://haversineconsulting.quickbase.com/db/bj3miyw94

You will  notice that the URL in the address never changes and the URL of every hyperlink you click on gets logged into the Log table. How the heck did you do that you might ask?

Well there are two user defined pages (outer.html and inner.html) used in the demo:

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

The inner.html page is actually inserted into the application dashbaord as a "web page widget" and its entire purpose is to force an immediate redirect to the user defined page outer.html. So when a user enters an application through the dashboard they will immediately get redirected to the user defined page outer.html. Now you would think that if you redirect to outer.html you would see a URL like one of these in the address bar:

https://haversineconsulting.quickbase.com/db/bj3miyw94?a=dbpage&pageID=8

https://haversineconsulting.quickbase.com/db/bj3miyw94?a=dbpage&pagename=outer.html

Well that is what initially happens but as soon as the page loads a history.pushState() command is run that changes the relative portion of URL to "bj3miyw94". This may seem strange that you can even do this but basically we are displaying the contents of the user define page outer.html but apparently showing the application dashboard URL in the address bar.

But what is in outer.html? Well content-wise outer.html has an <iframe> whose src attribute initially points to the application URL so you see all the normal page content of the application dashboard. Once you click on a hyperlink in the application dashboard you are actually navigating within the <iframe> so the address bar does not change but the displayed content of the <iframe> does change. But the real power of this technique is that there is JavaScript in outer.html that can monitor and affect anything that happens within the <iframe> - and I mean anything.

You may have to ponder that last statement a bit because there are no limitations on what the script in outer.html can do. In the case of the demo I am simply monitoring whenever the <iframe> loads a new URL. When this happens I grab the URL of the <iframe> and post a shortened version of it to the Log table.

Any script you place in outer.html can observe and modify any page that loads into the <iframe>. This is a far greater capability that what can be achieved with the image onload technique because IOL can only modify a page where you can get the magic field [-] to display. So administrative pages can be monitored and modified, as well as {new, view, edit, report, grid} pages without having to drop a [-] field on the page.

It may take time to appreciate what the Reframing Technique accomplishes but it is without a doubt the most powerful technique we have come up with to date and the applications of it are nothing short of jaw dropping.

UPDATE

WORKS PERFECTLY IN LATEST CHROME (v43), FIREFOX (v40) AND IE (v11)

Pastie might be slightly out of date with respect to the code in the application as enhancements are made.

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb

Posted 4 years ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
One of the Mas Que Nada presenters asked me post an an example of using the Reframing Technique to show you how to modify an administrative page. Apparently he intends to demonstrate a very elaborate modification to QuickBase's report builder interface. So here we go. Visit this page and then navigate to creating a new Client table report.


Reframe With Router
https://haversineconsulting.quickbase.com/db/bj3pggjdg

When the report builder is displayed you will see that the Name and Description have been automatically filled in using text generated from the Bacon Ipsum service and the option "Show description on report page" has been checked. See screenshot attached. Basically we have complete control of the displayed page and can make it do anything you want.

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

UPDATE

WORKS PERFECTLY IN LATEST CHROME (v43), FIREFOX (v40) AND IE (v11)

Pastie might be slightly out of date with respect to the code in the application as enhancements are made.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
I added a quick and dirty router / dispatcher to this demo that makes observing or modifying any QuickBase page ridiculously simple. These four lines are all it takes to recognize that pages with the path matching "bj3pggjd6?a=q&qid=14" should be modified by the anonymous function passed as the second argument to QBRouter.addRoute:

QBRouter.addRoute("bj3pggjd6?a=q&qid=14",  function(props) {
  $("#myIframe").contents().find("#VR_" + props.dbid + "_" + props.qid + " thead tr td:first").fadeOut(3000);
  $("#myIframe").contents().find("#VR_" + props.dbid + "_" + props.qid + " tbody tr td.icr").fadeOut(3000);
});

In this case the callback removes the first row of the report (with qid=14). The callback passes all the URL parameters as a props object as the argument to the anonymous callback function.
You can add as many routes as you want - even multiple routes matching the same path.

The pastie has been updated:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=406
Photo of Joe Acunzo

Joe Acunzo, Champion

  • 280 Points 250 badge 2x thumb
Dan, I've previously played around with framing to inject code into all QuickBase pages, but there is one major drawback -- browser navigation no longer works as expected.  That is, the browser Back/Forward buttons do not work since they operate on the outer frame, not the inner frame as would be required.

Now I suppose one could keep a history of navigation (i.e. links clicked), then trap these Back/Forward events (is that possible?) and change the contents of the iframe, but seems clunky.

Have you ever given this problem any thought and/or have an elegant solution?  Thanks in advance.