Of course... I added some filtering (which is from Dan's IOL example located at
https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol ) to capture if the page is currently a form, or not... as my use case is to add coloring to section headers, which I found also colored in Dynamic Filters if viewing a default report of a table, before looking at a record...
I'll comment for code explanation as well.
moduleBOL.js:
---------------------------------------------------------------------------------------
var querystring=document.location.search;
//Complex If statement.. the || is OR operator to allow for multiple conditions...
if(/a=er/i.test(querystring) || /a=GenNewRecord/i.test(querystring) || /a=nwr/i.test(querystring) || /a=dr/i.test(querystring) || /a=FinishEditRecord/i.test(querystring)){
//This grabs html elements with sectionTitle as a class
var divs = document.getElementsByClassName('sectionTitle');
//This is where I reset the default Branding Settings that we have at the realm level. primarily the font color...
var header = document.getElementById("customBrandBar").tBodies[0]; //get the tbody element
header.style.color = "#FFFFFF";
for(i=0; i< divs.length; i++){
divs
.style.color = '#FFFFFF';
divs.parentElement.style.backgroundColor= '#00b1eb';
}
}
------------------------------------------------------------------------------------------------------
end of JS page.
for the BOL enabling code(https://community.quickbase.com/quickbase/topics/how-to-install-bol-branding-on-load), which I modified to not overwrite what we already had:
--------------------------------------------------------------------------------------
//BOL Enable Code load via console in Branding Settings
(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("uiCustomTopLeft","https://<realm>.quickbase.com/up/<dbid>/g/ri/eg/va/<image>.png");
formData.append("uiCustomTopRight","<customText for right part of the UI header>");
formData.append("uiCustomTopColor","#004679"); //this is part of our default coloring
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"
});
})();
-----------------------------------------------------------------------------------------------------------
That's it... I add that JS page to any app, then run this BOL Enable code in the branding settings of said app...
I can then add other styling I want into this moduleBOL.js page to further customize if I wish... or have individual IOL if a specific form/table needs some customization that I don't want to be app wide.
