topic Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29 in ArcGIS JavaScript Maps SDK Questions

Can't customize LayerList styles in JavaScript Maps SDK 4.29

AnastasiiaDzundza — Thu, 14 Mar 2024 10:17:24 GMT

With JavaScript Maps SDK 4.28 we customized a bit styling LayerList on our website to be consistent with our project's design. For example visibility icon was changed to checkbox. But since 4.29 our style overwriting doesn't apply anymore.

Reaching layerList elements isn't accessible any more since calcite elements are used to shape the widget and we can't reach with simple styling the elements inside it.

Does anyone know some approaches how to do it?

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

Sage_Wall — Thu, 14 Mar 2024 14:55:31 GMT

Hi @AnastasiiaDzundza ,

Thanks for reaching out. Since we refactored the layer list to use calcite components you will need to follow the colors and theming guide found there. To add your checkboxes back we added a new property at 4.29 called visibilityApearance that will allow you to switch between the visibility icons and a checkbox. Hope this helps.

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

AnastasiiaDzundza — Fri, 15 Mar 2024 17:47:48 GMT

Thank @Sage_Wall you a lot for the answer, any chance you can tell me if the is any java script api that alows to change the order of expand/collapse button and custom added actions?

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

Sage_Wall — Fri, 15 Mar 2024 20:32:39 GMT

There isn't any properties to control the placement of the expand/collapse button and the actions menu outside of the left-to-right and right-to-left settings (https://developers.arcgis.com/javascript/latest/localization/#support-for-right-to-left-rtl). Custom actions can be easily added using the listItemCreatedFunction and then adding items to the actionsSections . There is a sample located here: https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/

🙂

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

AnastasiiaDzundza — Mon, 18 Mar 2024 08:35:44 GMT

But is there any way to re define expand/collapse button in actions list? Under listItemCreatedFunction?

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

Sage_Wall — Mon, 18 Mar 2024 12:25:27 GMT

There is no current way in the LayerList API to modify the expand and collapse button to show/hide a layer's sublayers outside of the calcite colors and theming guide. https://developers.arcgis.com/calcite-design-system/foundations/colors/#:~:text=Calcite's%20default%20theme%20provides%20a,both%20light%20and%20dark%20modes.

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

AnastasiiaDzundza — Mon, 18 Mar 2024 12:27:35 GMT

Got it, appreciate your reply.

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

Sage_Wall — Mon, 18 Mar 2024 12:32:28 GMT

Happy to help, if you could change the expand buttons, how would you? Always looking for ideas on how to make things better. Maybe it's something we could consider in a future release.

Re: Can't customize LayerList styles in JavaScript Maps SDK 4.29

AnastasiiaDzundza — Mon, 18 Mar 2024 12:35:15 GMT

Well, last my question was triggered by the need to have a trash icon before expand/collapse button in one line. Checkboxes that handle layer visibility we keep in front of layer title.