How to install BOL (Branding On Load)?

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.