Discussions

Expand all | Collapse all

How to install BOL (Branding On Load)?

  • 1.  How to install BOL (Branding On Load)?

    Top
    Contributor
    Posted 05-29-2017 21:25
    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.


  • 2.  RE: How to install BOL (Branding On Load)?

    Top
    Contributor
    Posted 05-30-2017 15:14

    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



  • 3.  RE: How to install BOL (Branding On Load)?

    Bronze
    Contributor
    Posted 03-27-2019 16:46
    Is there anyway to add to the code page that my branding logo should also show as it would the native way on the left top of the page?

    Thanks


  • 4.  RE: How to install BOL (Branding On Load)?

    Bronze
    Contributor
    Posted 03-29-2019 03:40
    I figured it out. Thanks


  • 5.  RE: How to install BOL (Branding On Load)?

    Bronze
    Contributor
    Posted 03-29-2019 17:54
    The way to do it is add to the code page a few lines:

    var header = document.getElementById("customBrandBar").tBodies[0]; //get the tbody element

    //this line is optional if you want to change the background color.header.style.backgroundColor = "red"; 

    var tr = header.childNodes[0];

    var td = tr.childNodes[1];

    var img=document.createElement('img');

    img.src="the logo url";

    //this line is optional if you want to resize the image
    img.style.height = '7%';

    td.appendChild(img);



  • 6.  RE: How to install BOL (Branding On Load)?

    Bronze
    Contributor
    Posted 17 days ago
    Did anyone try to implement BOL lately? I tried to turn it on and I get this error:

    Uncaught SyntaxError: missing ) after argument list

    ------------------------------
    EOM Develepors
    ------------------------------



  • 7.  RE: How to install BOL (Branding On Load)?

    Bronze
    Contributor
    Posted 16 days ago
    I've noticed this as well... I'm currently troubleshooting the fact that my IOL code doesn't execute on Mobile anymore either.

    ------------------------------
    Ryan Stanford
    ------------------------------



  • 8.  RE: How to install BOL (Branding On Load)?

    Bronze
    Contributor
    Posted 16 days ago
    I figured out the issue. Looks like the new community page is the issue. When I go to the original pastie and copy it form there it seems to work. Maybe the same issue is with you IOL.

    Here is a link to the pastie:  https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=582

    ------------------------------
    EOM Develepors
    ------------------------------