I'm building an app in Experience Builder for a client who wants to style out-of-the-box widgets as much as possible and avoid custom components for t

311
5
03-21-2024 11:51 AM
Labels (1)
AndrewAlbers
New Contributor II

I'm building an app in Experience Builder for a client who wants to style out-of-the-box widgets as much as possible and avoid custom components for the sake of maintainability. For example: here's an out-of-the-box filter (on the left) compared to the same filter with styling and style.scss provided by a custom theme:

slide_toggle_css.gif

The style.scss code for the filter relies on identifying descendants of the widget's data-widgetid:

div[data-widgetid="widget_116"] .filter-items-container,
div[data-widgetid="widget_116"] .filter-item,
div[data-widgetid="widget_116"] .filter-item-inline {
  border: none;
  overflow: visible;
}
div[data-widgetid="widget_116"] .filter-item-icon, div[data-widgetid="widget_116"] .filter-item-name {
  display: none;
}
div[data-widgetid="widget_116"] .overflow-auto {
  overflow: visible !important;
}
div[data-widgetid="widget_116"] .switch-slider {
  height: 20px;
  width: 50px;
  color: var(--light);
  background: var(--primary);
  border-radius: 10px;
  overflow: visible;
}
div[data-widgetid="widget_116"] .jimu-switch:not(.checked)::after {
  content: "2023";
  margin: auto;
  font-size: medium;
}
div[data-widgetid="widget_116"] .checked .jimu-switch::after {
  content: none;
  font-size: medium;
}
div[data-widgetid="widget_116"] span.jimu-switch.checked::before {
  position: absolute;
  width: 50px;
  content: "2019";
  padding-left: 10px;
  font-size: medium;
}
div[data-widgetid="widget_116"] span.switch-slider {
  text-align: center;
  font-size: medium;
}
div[data-widgetid="widget_116"] .switch-slider::before {
  content: "2019";
}
div[data-widgetid="widget_116"] .checked .switch-slider {
  background: var(--primary);
  color: var(--light);
}
div[data-widgetid="widget_116"] .checked .switch-slider::before {
  content: "2023";
}
div[data-widgetid="widget_116"] .jimu-switch {
  width: 100px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--light-200);
}
div[data-widgetid="widget_116"] .checked .switch-slider {
  margin-left: 50px;
}

I think I can match the client's desired mockup pretty closely with pure CSS this way, but I worry since these data-widgetid values are related to the order in which widgets are added to the experience. That means deleting and re-creating a widget is going to necessitate updating the CSS selectors in style.scss.

Is there any better way to select specific widgets with css than the way I'm doing it? Is there any other attribute that could be used as a css selector?  Ideally it'd be nice if widgets could be selected via css using the name given to them in the outline, but this doesn't seem to affect anything in the app DOM.

0 Kudos
5 Replies
AndrewAlbers
New Contributor II

Whoops, accidentally posted this before giving it a title. Is there no way to edit / delete posts?

0 Kudos
KatiePhillips_ODNR
New Contributor II

Click on "Post Options" for the original post. You should see the option to edit.

0 Kudos
AndrewAlbers
New Contributor II

Hmm, sadly I do not see an edit option in either options drop-down. Do I need to ask my admin for more privileges I wonder?

AndrewAlbers_0-1711049036613.png

Screenshot 2024-03-21 132337.png

 

0 Kudos
KatiePhillips_ODNR
New Contributor II

Hmm, I'm sorry maybe you do. 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

Powers on ESRI Community are granted by the ESRI Community Managers. Your GIS Administrator has no control over this site. To your actual question...

The way I see it you have three choices:

  1. Try to get hyper specific using css combinators to target your elements without needing to use the widget_id. https://www.w3schools.com/css/css_combinators.asp
  2. Get less specific with your css and accept that all the sliders in your application will have this styling.
  3. Make a custom widget, so you can name your own css classes.

Be aware that ESRI has been replacing more and more of their elements with the Calcite design system which makes it very difficult to target their components with css, so in terms of long-term maintenance, a custom widget may be the easiest option.

GIS Developer
City of Arlington, Texas
0 Kudos