How to install BOL (Branding On Load)?

  • 1
  • 2
  • Question
  • Updated 1 year ago
  • Doesn't Need an Answer
  • (Edited)
We previously posted the BOL (Branding On Load) instruction as a file attachment but in the conversion to the new forum attachments were dropped. Here is an updated method of installing BOL:

Step 1
Create a code page named moduleBOL.js and place some simple content in it such as this one line of code:

console.log("moduleBOL.js loaded");

Step 2
Visit your Branding Page

https://<YOUR SUBDOMAIN>.quickbase.com/db/<YOUR APP DBID>?a=AppPropertiesBrandGuide

Step 3
To turn BOL ON, press F12 and paste this code into the console tab:

//turn on BOL
(function(){
  var page = "moduleBOL.js";
  var formData = new FormData();
  formData.append("PageToken", $("input[name=PageToken]").val());
  formData.append("customHeader", "on");
  formData.append("uiCustomHeaderOptions", "iBasic");
  formData.append("uiCustomTextColor", `white !important\n}</style><img src='' style='display:none' 
  onerror=$.getScript(gReqAppDBID+'?a=dbpage&pagename=${page}');><style>foo {\nbar: baz`);
  fetch("?a=SaveAppSettingsBrandGuide", {
    method: "POST",
    body: formData,
    credentials: "include"
  });
})();

Step 4
To turn BOL OFF, return to the branding page, press F12 and paste this code into the console tab:

//turn off BOL:
(function(){
  var formData = new FormData();
  formData.append("PageToken", $("input[name=PageToken]").val());
  formData.append("uiCustomHeaderOptions", "iDefault");
  formData.append("uiCustomTextColor", "white"); 
  fetch("?a=SaveAppSettingsBrandGuide", {
    method: "POST",
    body: formData,
    credentials: "include"
  });
})();
Notes:

1) This code uses the Fetch API, the FormData API and ES6 backticks. You can google these terms or ask a question here if you need a better understanding. 

2) Some people have inquired about the credentials: include property and value used in the code. This is not your QuickBase login/password credentials and is perfectly safe to use. By default the Fetch API does not send cookies so including credentials: include merely sends your cookies to QuickBase which includes your ticket. Sending your cookies to QuickBase is the normal operation.

3) Setting up BOL will include moduleBOL.js on every page in your application including administrative pages. In contrast the IOL technique injected code only into {new, view, edit, report, grid edit} pages. Also, moduleBOL.js will load relatively early in the process of loading your page. You will have to supply your own decoding logic to determine what page you are on and what actions you want to take.

4) Part of the reason we are introducing this version of BOL is to acquaint you with the Fetch API, the FormData API and ES6 features (not just backtick). These are powerful features to use with QuickBase in their own right as you can do some amazing things in a short amount of code.

5) But the real reason is to slowly introduce you to Service Workers which will blow away all these other methods of introducing JavaScript into your QuickBase pages and provide amazing new features you never though possible in a browser (like offline QuickBase - nope I am not joking). In the next few days (maybe tomorrow - it depends on if I get my grass cut today) we will launch the Service Worker Travel Log which will feature a new aspect of using Service Workers with QuickBase. So clear you head, pack your bags and bring lots of cash as we embark on a 30 day adventure of using Service Workers with QuickBase.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,522 Points 20k badge 2x thumb

Posted 1 year ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,522 Points 20k badge 2x thumb

Note that the line in the BOL install script starting with this text is one long line that the forum is wrapping:

formData.append("uiCustomTextColor", ...

You might want to clip the code from the Pastie Database instead of the forum:

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