She's a Rainbow ~ She Comes in Colours EverywhereThis weekend I was listening to my
Rolling Stone discography and came upon this delightful song:
I suddenly realized that I had forgotten to explain how to customize
any aspect of QuickBase's
CSS including colors. With all the commotion last week over the
Branding & Application Bars and the new class definitions for
Vibrant and Success I rushed to put together this application that demonstrates a new way to customize
any aspect of QuickBase's look and feel using
Service Workers:
She's A Rainbowhttps://haversineconsulting.quickbase.com/db/bne59biqrHave a look around and you will note that the
Branding & Application Bars have the trendy new purple color scheme popularized by world famolus
Pantone Color Institute:
Color of the Year 2018 - Ultra Violet 18-3838https://www.pantone.com/color-of-the-year-2018Now let me show you how you can modify
any aspect of QuickBase's
CSS using a
Service Worker by making several
color and
structural modifications to the
Branding and Application Bars. Using an
evergreen version of
Chrome,
FireFox,
Opera, U
C Browser or the
Fall Creators Edition of
Edge click the button labeled "
reg.html" and dismiss the alert messages after it shows up:
If you now visit the various tables you will see that each table has a
different color scheme for the
Branding & Application Bar and the the fourth table has
hidden the
Branding Bar:
Home - #74489D Dark Lavender
Table #1 - #6495ED Cornflower Blue
Table #2 - #ED6495 Light Crimson
Table #3 - #95ED64 Inchworm
Table #4 - #74489D Dark Lavender - Branding Bar Begone!
Table #1 Screenshot
Table #4 Screenshot (Branding Bar BEGONE!)
We achieved these various effects
without modifying anything in the native QuickBase Branding configuration - rather we modified QuickBase's
nav.css file "
on-the-fly" during transport of the file from QuickBase's Server to your Browser's rendering engine using simple
Service Workers. For demo purposes explained in the notes below, we actually used
four slightly different
Service Workers - one for each table. Here is the full code for
sw1.js that controls
Table #1 and links to all four
Service Workers.
self.addEventListener("install", event => {
event.waitUntil(self.skipWaiting());
});
self.addEventListener("activate", event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", event => {
var navCSS = "https://assets.quickbasecdn.net/res/873e615-1340/css/themes/classic/nav.css";
var init = {
status: 200,
statusText: "OK",
headers: {"Content-Type": "text/css"}
};
if (event.request.url == navCSS) {
event.respondWith(
fetch(event.request.url + "?rand=" + new Date().getTime()).then(response => {
return response.text().then(resp => {
var respModified = resp.replace(/74489D/g, "6495ED");
return new Response(respModified, init);
});
})
)
}
});
Service Worker for Table #1https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw1.jsService Worker for Table #2https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw2.jsService Worker for Table #3https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw3.jsService Worker for Table #4https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw4.jsIn a nutshell. we
un-cached the CSS file
nav.css and substituted a
new color for the default color
#74489D in the original file and responded with the
modified CSS content. Yep that is all the code does - pretty simple.
What could be simpler and more obvious? - if you don't like the defaults just change them! In the case of the
Table #4 we left the color alone and simply changed the
Branding Bar to display: none.
Begone Branding Bar! I did not like your looks and you were only taking up valuable screen space.
Service Worker Registration Page
https://haversineconsulting.quickbase.com/db/bne59biqr?a=pageedit&pagename=reg.htmlNotes:(1) Obviously this technique could be used to modify
any aspect of QuickBase's
CSS - not just
colors. In fact,
Service Workers can be used to modify
any aspect of QuickBase
whatsoever and is why it is affectionately called
god mode for QuickBase.
(2) Note the changes made by the
Service Worker do
not result in any
jank (ie screen flicker) in the display. This is because the changes are made
BEFORE your browser even starts rendering the page!
(3) Admittedly the
Service Worker code is
fragile because it makes
assumptions about the structure of QuickBase's
nav.css as well even the fact that such a file is even used to construct the page. These concerns are
not even significant as the
Service Worker could easily be written in another fashion. I explicitly avoided addressing this issue as it would only make the
Service Worker longer and cloud understanding its utterly simple purpose (to modify QuickBase's native styling).
(4) MAJOR TAKEAWAYS:- Rolling Stones Good
- Service Workers is god Mode for QuuickBase
- Agile Bad