A creeping contagion is taking over the ESRI ecosystem. Every update it swallows a little more. Soon, it will devour everything leaving nothing in its wake. The name of this virus is Calcite and it is coming for your CSS. Once Calcite swallows something all your CSS hacks will break as the Shadow DOM and infinite wrappers surround and subsume your target. Calcite will infest everything. We are powerless to stop it. It is different and I am instinctually fearful of change. However, hope is not yet lost, we may not be able to stop Calcite, but we can adapt it.  (Actually, there are two creeping contagions taking over ESRI, but Components are a problem for next year.)  As I upgraded to Developer Edition 1.17, I found that the Map Layers Widget was the latest victim of Calcite and my custom font added in the Theme was no longer being respected. The Map Layers Widget occupies a very prominent space in my overall design, so the font change was very noticeable and distracting. And Calcite was blocking my typical CSS targeting attacks. So, I did something unthinkable. Something I hoped I would never have to do. I learned about Calcite and CSS variables. First, I will show you my solution. Then, I will explain why it works. In the style.scss of my Theme, I added this... :root { --calcite-font-family: Relish Pro Medium,"Avenir Next",Avenir,"Helvetica Neue",sans-serif; } The :root CSS selector is the default CSS settings of the page, so altering :root will change everything. Using -- is how you declare or alter a CSS variable. Calcite variables are written like --calcite-variableName, with font-family being the specific variable I am changing. After the colon is a list of fonts that the page will attempt to use in order. I've put my custom font, Relish Pro Medium, at the start of this list making it the default Calcite font for my application. For the rest of the list, I used my browser's Dev Tools to find and copy the Calcite defaults, so if Relish fails for some reason, it will follow the standard Calcite backups. That's all it took. Fight Calcite with Calcite and change the Calcite variables to better fit your needs. ... View more

You turned off updating and deleting in a Feature Layer. You put an Edit Widget in Experience Builder and what's that Delete Button doing there? And it works, too? Two important questions: Do you own the data layer? Are you an Admin on your ArcGIS Online/Enterprise Portal? If you answered yes, to either of these questions, that's a quirk of the ESRI ecosystem. It's not just limited to Experience Builder. If you own a data layer or you're an Admin, you can always do whatever you want to the data even if it's not allowed for other users. It's on one hand a very sensible and on the other very poor design choice by ESRI. Afterall, if you are an Admin, you may need to delete some bad data maybe even against the will of the data owner, but being an Admin doesn't make you immune from "Oops, wrong button syndrome". Try logging in as some other user and the Delete Button should be gone. If you're not an Admin or a data owner, contact ESRI Support. Something is very wrong. Edit: Here's an official quote about this issue from the JavaScript API documentation. Authenticated users that are layer owners, administrators or users with full editing privileges will have their elevated user privileges applied in regards to editing behavior and data access. This mimics the behavior available in Map Viewer. To opt out, set esriConfig.userPrivilegesApplied to false. Note that last line. If you are on Developer Edition, there is a way to opt out of your elevated powers. ... View more

The ability to use related tables in Experience Builder was just added, and it's a little tricky to set up. This post explains how. ... View more

Custom fonts are coming to ArcGIS Online at the end of this year. For Enterprise users, that means waiting for Spring or Summer 2026 to get this feature. Don't want to wait that long? Here's a Demo Widget for getting custom fonts, or any other CSS, into Enterprise 11.X today. How does it work? Well, any React component can carry it's own CSS, but CSS is not strictly confined to the component. So, just write some CSS in a Custom Widget that targets the whole page, or a specific component, and your CSS overwrites the default CSS. Just drop in a CSS Widget into some unused spot in your application, like an unopenable Sidebar, or add some CSS to a Custom Widget you are already using. Using this Demo Widget, I was able to successfully import three fonts from the Google Fonts Library,  two by cdn and one self-hosted, and it looks... Dreadful. Absolutely awful. These fonts, Ballet, Henny Penny and Audiowide, were selected for distinctiveness, not because I think they should ever actually be used for anything, ever, under any circumstances. This is a Demo Widget. Don't let me catch you actually using it without at least replacing the fonts. If you look in the upper left corner, you can see some Impact, one of the built-in fonts in Experience Builder. (Because the ability to make memes is a critical business need, I guess. Who chose these default fonts and why? Very little variety and the only one that isn't basic serif or sans-serif is Impact. The default default, Avenir Next, is the only one of the built-in fonts I can wholeheartedly recommend using. I am very fond of Avenir Next.) So it is possible to still use the built-in fonts and overwrite the custom CSS, although once you change a Text Widget to a different font there is no way back to your custom CSS in that Text Widget. (You will need to start over with a new Text Widget.) Getting a font from a cdn involves using an @import statement and a @font-face statement like this.   /*Imports a font from a cdn and creates a font face*/ @import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap'); @font-face { font-family: 'Henny Penny'; src: 'https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap'; }   Making a self-hosted font requires saving the font in the runtime/assets folder and using some JavaScript to register the font-face. Like this...   //For creating a font face from a self-hosted font const ballet = new FontFace('Ballet', `url(${props.context.folderUrl}dist/runtime/assets/fonts/Ballet-Regular-VariableFont_opsz.ttf)`) ballet.load().then(function (loadedFont) { document.fonts.add(loadedFont) }).catch(function (error) { console.error('Font loading error:', error) })   So yeah, get creative and bring in custom font and CSS into your ArcGIS Enterprise. ... View more

When Near Me came out last summer, I was pretty excited. At the time I was working on a public facing application where people could filter a list of parks by their amenities to figure out which one they should go to. And it would be so nice, if they could put in their address and get the list sorted by their location. But, I was very disappointed by the actual implementation of the Near Me Widget. I wrote up my complaints on the ideas board here, but to summarize I just don't like the user interface of Near Me, especially for a public facing application, and I don't want to give up more screen space to Near Me when I already have a well-designed List Widget. I ended my rant on the Ideas board with this: For my application, the ideal Near Me widget would just be a search bar with a current location button next to it. The user could enter an address or press the button and see the results in the list widget. Well, since the October 2023 ArcGIS Online update, it is now possible to build that (or something pretty close to it). Here's how... Step One: Triggering Near Me From Search For this recipe, we will need a Map Widget, a Search Widget, a Near Me Widget and a List Widget. Let's drag them all into our Experience now and we'll set them up as we go. Start with your Map Widget and select the webmap you want to use. Then, go the Search Widget and pick a locator source. You'll also want to open the Search Suggestion options and check the Use Current Location option. In the Action Tab, add a Record Selection Changes > Near Me > Set Location Action. (A Map > Zoom To Action is not necessary, but you'll probably want it, too.) Step Two: Set Up Near Me First, I select my Map Widget. At this point, Near Me will display this scary and confusing warning. This is normal. Near Me is asking you to click on the name of your map again to open up the Analysis settings menu. In the Analysis settings menu, pick Specify a location, set some sort of buffer distance (I went with 5 miles.) and the click the Add Analysis button.  In the next window, I picked Analysis Type > Proximity and Sort features > Distance. (I also turned off Highlight results on map.) I also opened the General Settings and set the Sketch Color to rgba(255,255,255,0). (Translation: transparent white.) In testing, I found that the default transparent option made a dark grey circle that was actually still very noticable, but by using transparent white there was just a faint dimming of the map and a barely visible edge of the circle. Step Three: Send Near Me Results To A List Widget In the List Widget, click Select Data > Outputs > Near Me > Whatever I Named My Near Me Output. (I'm also going to add a No data message to tell the user to use the Search Widget.)  And there we go, when I search in the search bar the data will be transferred to this List. Style up your List Widget as you see fit. (Here's a post about all the various List Widget options.) But, why? What was the point of all of this? A well designed List Widget just looks better and is easier to use than the Near Me Widget interface. Now that the data is in a List Widget, I can do all the stuff that the List Widget can do including, but not limited to, searching, sorting and filtering within the list, sending to a table, and exporting as CSV, JSON or geoJSON. Near Me can only do one of those things: download as a CSV. Step Four: Hiding Near Me (Hiding The Widget, Not Hiding Close To Me. That's Creepy. Don't Do That.) At this point, we have a Search Widget that automatically fills Near Me results into a List Widget. We don't need to look at the Near Me Widget anymore. So what can we do with it? Delete it? Send it to the Pending List? Stick it in a Section or Widget Controller? No, doing any of those things would break this build. We are going to do something far stupider. We are going to make it tiny. In the Style Tab of the Near Me settings, set the Width and Height to 0px. Experience Builder won't truly honor my 0 x 0px request. It seems that the true minimum widget size is 16 x 16px. See that tiny box I circled in red. That's my Near Me Widget. It will happily do its job even if the user can't read anything in it. Should I need to alter any of my Near Me options later, I can click my little box and the settings panel will appear. If I was on Developer Edition right now, I'd add this to my CSS to make that little box vanish completely.   .widget-near-me { display: none; } But we all know using Developer Edition is cheating, what can we do in ArcGIS Online? Well, we could be happy with our tiny box taking up some unimportant part of the screen, but if you really want it hidden. You can use a Sidebar Widget. I've put my tiny Near Me Widget in the collapsable side of a Sidebar Widget. Set its size to 0px, Default state to Collapsed and turned off the Collapse Button. Tiny Near Me will happily keep doing its job banished to an undefinably thin, unopenable Sidebar Widget and your users will never know exists (unless they inspect your page with their browser's Dev Tools). I have found hidden custom widgets to be very useful before, but this is my first time hiding a default widget. I've had a flood of ideas during the writing of this post (including that unopenable Sidebar trick) and I think there may be some sequels to this post coming soon. What could you do with a hidden Views Navigation or Timeline Widget?  I am making my demo app publicly available, so you can decide if a Near Me-free Near Me is right for you. The big downside is that I can't find a way to make my List Widget a list of all parks in absence of a Near Me search. (I attempted using the Filter Layers To Only Show Results option within Near Me, but did not get the results I wanted.) Another potential downside is reducing the end user's Near Me options. This demo still doesn't work well enough to have been used in my original park application, but in my opinion, it is a lot closer.   ... View more