A Journey Adding Stylesheets to Esri’s Web AppBuilder

Esri’s Web AppBuilder product has been a great way to create simple or complex web map apps for both developers and non-developers. It seemed to be the impetus for many organizations to move away from flash-based flex viewers to JavaScript-powered apps.

I have built apps using both the ArcGIS Online (cloud) and Developer (local) editions of the product. Over the past few years, my approach to loading custom CSS rules has kept changing. And I think I’ve finally reached a good solution that will make porting the style rules during upgrades easier.

TLDR

  • I originally loaded the stylesheet in the <head>; there were way too many !important declarations
  • The next iteration was updating the rules within each widget’s stylesheet; no more !important declarations, but upgrades will be a nightmare
  • Now, I load a stylesheet as the first element within the <body> tag; no more !important declarations, and upgrades will be easy

The Process

There were many tweaks I’ve needed to make to Web AppBuilder apps. These have included hiding elements (a hack for disabling functionality), branding for buttons, and adjusting layouts.

My first iteration was loading my stylesheet with custom rules as the last stylesheet within <head> element. But the issue is that a ton of stylesheets are loaded dynamically. So their rules will win out. My solution was to use a ton of !important declarations so my rules would win out. I knew this wasn’t a great practice, but having all of my rules in a single stylesheet would make porting changes during upgrades of Web AppBuilder smoother.

screen shot of dev tools in a web browser
Loading my stylesheet within the index.html file
screen shot of dev tools in a web browser
Those are a lot of stylesheets being loaded after mine.

After a couple years, I decided it was time to take a different approach. My next two approaches occurred within months of each other. The second approach was bad, and I moved on from it fast.

This second approach was to update the rules within each widget’s stylesheet. Much time was spent in Dev tools finding the right file and line number. While this eliminated almost all of the !important declarations, it would be a pain whenever it came time to upgrade one of these apps.

screen shot of a code editing program
There are many folders and files that make up a Web AppBuilder project

Shortly after using this bad approach, I circled back to the idea of having a single stylesheet to hold all my custom rules. The biggest benefit of this approach is I can easily port this file whenever I upgrade the version of Web AppBuilder. But I needed to figure out how to load this stylesheet after all the dynamically generated stylesheets.

I’m not sure how the idea came to me, but I decided to look into loading my custom stylesheet within the <body> element. I’ve never done this, but it would ensure my rules load last. When I checked the MDN documentation, I learned that “the stylesheet link type is body-ok, and therefore is permitted in the body.” While this isn’t the recommended approach, I decided it was better than littering my stylesheet with !important declarations.

screen shot of a code editing program
Loading a stylesheet within the <body> element
screen shot of dev tools in a web browser
Winning the battle to load the last stylesheet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s