The Ultimate Guide to Invisible Widgets
Here at Tips & Tricks Enterprises LLC. we love hiding Widgets. But, we've never done a dedicated post on the topic. So let's make a list of all the fun ways we've found to use invisible Widgets and all the different ways they can be hidden. Long time readers may be shocked that there is more than one way to hide a Widget because I have a strong preference for the Sidebar method, but it's not the only option nor the only one I actually use.
And before any Online/Enterprise users click away, there are ways and reasons to hide Widgets in every version of Experience Builder.
First of all, a list of all the hacks we have found that involve an invisible Widget. If you know anymore, shout them out in the comments and let's keep this list updated:
- Making your own URL parameters
- Hacking custom fonts and other CSS into ArcGIS Enterprise
- Building a custom Widget Controller
- Hide a Near Me Widget and send the results to a List or Feature Info Widget or...
- Hide two Near Me Widgets to make a Zone Lookup App
- Make Experience Builder restore the application state automatically
- Add a context menu with a bunch of features to the map
- Adding datasources or layers to the project
So, we have covered the why of hiding Widgets. Here comes the how.
Make It Tiny (Any Version)
In the Style Tab of the Settings Panel, set the Width and Height to 0px.
...You're still here? It's over. Go home! Go!
Actually, there is a little more to this hiding technique because it doesn't quite work. Experience Builder won't really listen to you if you set the size to 0px. The smallest size it actually allows is 16 by 16px. Which means you have a 16 by 16px version of The Sidebar Problem™, so you will need to shove it in some 16 by 16px area of non-interactable space. There's also some potential issue here with screen readers and other accessibility aids.
Send To Back (Any Version)
The Style Tab of the Settings Panel also has a Send To Back option. Can you use that? Maybe? It seems like in a lot of arrangements this button doesn't actually send it to the back. I also suspect this would be really bad for screen readers. Can't recommend this option.
Negative Pixels (Any Version)
One last option in that Style Tab is to click on that crosshair thing, set it to px and put in an absolute value big negative number, like -1000px, and watch as your Widget flies off the screen.
This is probably the best choice on the Style Tab, but maybe your Widget will re-appear on one of those huge curved monitors that are becoming increasingly popular. And again, I suspect this won't work great with a screen reader.
CSS (Developer and Enterprise Edition)
Give your Widget an id, let's call it "superAwesomeWidget". Now we can target it with CSS and make it vanish.
#superAwesomeWidget {
display: none;
}Hiding Widgets this way circumvents the 16px restriction in the Style Tab and it should also hide it from screen readers. Widgets can hide themselves, so that CSS Widget you uploaded to your Enterprise can include CSS targeting itself. Or you can target the Widget from another Widget, if you want to hide something ESRI made. Although it may be difficult to find the right class or id to target an ESRI Widget, especially without hitting other Widgets as well. All in all, if you are making a Custom Widget that you don't want anyone to see, I recommend this choice.
Column or Flow Row Widget (Developer and Enterprise Version)
Has the TV remote ever slipped between the couch cushions and practically disappeared from existence? That's what we are doing here.
This is only going to work on Custom Widgets with no inherent height, but if you have a Column or Flow Row Widget in your application set the Gap on the Column/Flow Row to 0px and slip your Widget in there. Then, set the Height (for a Column Widget) or Width (for a Flow Row Widget) to Auto. I don't think this trick will be a problem for screen readers either.
Sidebar Widget (Any Version)
Alright, we've done this one before...
Get a Sidebar Widget and put your hidden Widget in the Collapsible Side. Set the Size to 0px, turn off Resizable, set Default State to Collapsed and turn off the Collapse Button. Your Widget is now hidden in an unopenable Sidebar. If screen readers try to read this, we have a big problem.
There you go. The comprehensive guide to why and how to make Widgets vanish.
