I am sure I have done something wrong,
[Content] is a narrative description of a technique
>I am sure I have done something wrong, 

This can be confusing if you don't understand all the technical details. The provided code does not go into a formula - rather it goes into a user defined page (typically named module.js) and a special formula is used to cause that page module.js to automatically load as if it was part of the source of the original form page. This technique is affectionately called the image onload technique because it employs writing a special formula that inserts an invisible image into the page and uses the onload attribute of that image to load the user defined page module.js. Despite the technical details, the procedure I describe below will allow anyone to setup the image onload technique. What follows is the "second" version of the image onload technique which improves on the first version but is functionally equivalent. Also note that this is a workaround to allow you to enhance forms and pages with additional features and capabilities while we lobby for QuickBase to come up with a supported method of allowing an administrator (not a mere user) to specify that a user supplied JavaScript file should be attached to a form/page for unrestricted purposes. 

Step 1

Insert two user defined variables into your application named iol and /iol with the following definitions:


<img qbu='module' src='/i/clear2x2.gif' onload="javascript:if(typeof QBU=='undefined'){QBU={};$.getScript(gReqAppDBID+'?a=dbpage&pagename=


&rand='+new Date().getTime())};">

These two variables are named so that when they are used in formulas they are reminiscent of HTML markup (see Step 3).

Step 2

Create a user defined page named module.js (or similar) and initially place in it the following single statement:

alert("module.js is now loaded - I now own your page");

We will replace this page's contents with some (1) boiler plate code and (2) custom code to implement various additional features. We are on training wheels for the time being.

Step 3
In any table where you want to use an image onload field (typically named [-]) create a text formula field with some HTML allowed using this formula:

[iol] & "module.js" & [/iol]

This formula uses the two user defined variables [iol] and [/iol] to simplify the formula and allow you to easily remember the formula if you choose to use it in other tables. Once the user defined variables [iol] and [/iol] are set up you can create additional image onload fields in other tables and forms with similar definitions:
[iol] & "moduleJumpTheShark.js" & [/iol]
You will of course have to create a new user defined page named moduleJumpTheShark.js for this additional instance.

Step 4
In the field properties page for the image onload field [-] configure the following properties:

Allow some HTML tags to be inserted in the field (Already set in Step 3)
Include this field when searching/filtering this table
Reportable    Add this field to all new reports
The field may be used in reports
Step 5
Place the image onload field [-] on the form you want to enhance. It does not matter where you put the field because we will make all efforts to insure the the field's inclusion on the form is not visible. Set the field to have Alternate Label text but leave the Alternate Label text empty (so it will not be visible). What we are doing here is merely including an invisible image on the form for the sole purpose on forcing our user defined page module.js to load as if it was originally part of the QuickBase page.

You can additionally control which pages the image onload field is included on by setting the field property Display when this form is used for to one of the following selectable values:




edit or add

edit or view

add or view

edit, add or view

This control including the image onload field on a {add, view, edit} form is a secondary mechanism to control when the image onload field is called into action to enhance the form's behavior. You can also include logic in the user defined page module.js to control the enhance form's behavior. As it stands now the user defined page merely includes an alert() statement to get you familiar with how the image onload technique works.
Step 6

Now visit a form that has been configured to include the image onload field. What you should observe that the form loads in its normal fashion but automatically an alert displays. You now have control of your page and can customize and enhance it. This is where the creative juices will flow so it is time for a celebratory song:

Step 7

Now that you have the image onload technique setup in your application you can modify the code in module.js to detect what type of page you are on and supply additional custom logic. The following is a generic template for module.js which can be used to detect which type of page is being displayed:

Pastie Database

Note that the logic in this generic template is only evaluated if you have configured the image onload field to be included on the form in in Step 5.
Step 8

When I answer questions in the forum where I make reference to using the image onload technique all of the steps above are assumed to be undertaken and I typically only post the essential code that would be needed within any one branch of the generic template. This approach allows me to quickly develop "state of the art" customization techniques as questions come up without getting bogged down in endlessly repeating predicate information. Also you may well have to do some additional work or hire a developer if you want a production solution that meets your exact needs.

Step 9

The setup of the image onload technique can be automated. For details see this entry:

Is there a new "image onload technique" in town?


The use of user defined variables in formulas eliminates some tricky escaping you would otherwise have to do in writing formulas.
The customary names used for the user defined page module.js and the image onload field [-] are not significant.
The attribute qbu='module' added to the image onload field is actually not needed and is more of a historical artifact used during development. I retain it mostly to avoid coming up with new versions of the technique.
The testing for the existence of QBU is only needed to prevent repeated triggers of module.js when the [-] field is included on reports and grid edits.  I retain it mostly to avoid coming up with new versions of the technique.
The inclusion of the &rand parameter is currently not needed and was included as a cache busting technique. QuickBase never explicitly states their caching policy so I thought it wise to include it.  I retain it mostly to avoid coming up with new versions of the technique.
The generic template uses an  Immediately Invoked Function Expression (IIFE) - Google it if you want the details. In practical terms what this means is the variables you use within the IFFE will not interfere with QuickBase's global variables. However, you are free to dip into QuickBase's global name space and user their global variables (with great caution). I sometimes use the QuickBase global variable kRid which holds the decimal value of the [Record ID#] on View or Edit pages. Use this approach carefully as there is no guarantee that QuickBase will continue to use any global variables.
If you inject anything in a QuickBase authored page you have to insure you do not conflict with QuickBase global variables. This includes element IDs, CSS classes, as well as JavaScript variables. The safest approach is to always prefix such constructs with the prefix QBU.
Other stuff as I think of it ... Enjoy
Copy [Content] to Clipboard
Usage Notes
The code in this page is copyright by Dan Diebolt and may not be used without including my phone number (773-312-8131) and email address ( in the footer of where you may want to use it. This snippet of code is not a complete solution and only represents the essential code to address the question. You may have to modify the code to suit your specific needs. There is a good chance that this code uses the image onlaod techique which you can read about here: Image Onload Technique The old image onload technique is document here: Old Image Onload Technique
Other & Flags
Diebolt, Dan
Created on June 18, 2014 at  7:00 AM (CST). Last updated by Diebolt, Dan on Nov.  5, 2018 at 10:14 AM (CST). Owned by Diebolt, Dan.
Dan Diebolt
Dan Diebolt
Show fields from Show fields from Show fields from a related table
Report Name *
Reports and Charts Panel
Each table has a panel listing its reports and charts, organized in groups.
Please wait while your new report is saved...
Field label
Column heading override
What does auto mean?
Fields in:

Fields to Extract:

Name for the new table:
Items in the new table are called:

When you bring additional fields into a conversion, Quickbase often finds inconsistencies. For example, say you're converting your Companies column into its own table. One company, Acme Corporation, has offices in New York, Dallas and Portland. So, when you add the City column to the conversion, Quickbase finds three different locations for Acme. A single value in the column you're converting can only match one value in any additional field. Quickbase needs you to clean up the extra cities before it can create your new table. To do so, you have one of two choices:

  • If you want to create three separate Acme records (Acme-New York, Acme-Dallas and Acme-Portland) click the Conform link at the top of the column.
  • If the dissimilar entries are mistakes (say Acme only has one office in New York and the other locations are data-entry errors) go back into your table and correct the inconsistencies—in this case, changing all locations to New York. Then try the conversion again.

Read more about converting a column into a table.

We're glad you're interested in doing more with Quickbase!

Now we need to make you official before you share apps or manage your account.

Verifying your email lets you share Quickbase with others in your company.

Your work email
Your company