topic Custom Theming Variables List in ArcGIS Experience Builder Questions

Custom Theming Variables List

WUE_BARAL — Thu, 02 Mar 2023 13:05:04 GMT

Hello,
I am in the process of building an application in Experience Builder Developer Edition and would like to create a custom theme here.
This has worked so far and I was able to make my first adjustments in the variables.json.
But now I have the problem that I want to adjust the dropdown of the search in the list widget and I have also partially managed.

{ "darkTheme": true, "coloration": "default", "components": { "popper": { "bg": "green", "color": "green", "border": { "width": "1px", "color": "#d5d5d5" }, "hover": { "bg": "red" } } } }

some things were changed but the hover effect doesn't seem to change. Now I wonder if there is somewhere a list with the variables or maybe also a repo in which I have once completely everything. Or a docu which widget/component has which variables in the json.

My other question is about the popup. Which opens from the map widget. I would like to set here in the mobile view that the popup is directly expanded by default. Is there also a way to do this?

Re: Custom Theming Variables List

MichaelGaiggEsri — Fri, 03 Mar 2023 17:32:05 GMT

The documentation (https://developers.arcgis.com/experience-builder/guide/theme-development/) lists the theme variables, at least you get an idea of what's available I guess. Interested how you found out about popper and popper.hover.bg?

While not recommended, you can inspect the DOM, figure out the jimu components and override styles in style.scss

Regarding popup: I think that's by design so that the map and the popup are both visible on smaller screens. I wasn't able to find a config to set what you are asking for, neither in the webmap nor in ExB. Last resort is that you write your own custom widget that opens the feature info in a panel or modal.

Re: Custom Theming Variables List

WUE_BARAL — Mon, 06 Mar 2023 06:22:06 GMT

Thanks for the reply. I found out, that the search in the list widget uses the popper by the inspector.
But the hover state will not change to red. The other stuff worked here, so i guess i just have the wrong structure for the hover state. But i cant figure it out.

I also found al list with a lot of variables in this repo:
https://github.com/Esri/arcgis-experience-builder-sdk-resources/blob/master/themes/demo-theme/variables.json

I also tried it over the style.scss but the classes in the dom are not unique so this is also a bit tricky.

But there was not an example for the list widget.
Do you know where i can find something like that? (best case for the list widget)

Re: Custom Theming Variables List

MichaelGaiggEsri — Mon, 06 Mar 2023 17:17:32 GMT

What I'd do is to inspect the dom and then target the element you want to adjust, in your case I believe that's the .esri-menu__list-item ---- just add the below css into your style.scss and you should be good. Not sure if that's the ideal or best way, but it should work.