Can't customize LayerList styles in JavaScript Maps SDK 4.29

[AnastasiiaDzundza]

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?

[Sage_Wall · Accepted solution]

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.

[AnastasiiaDzundza]

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? 

[Sage_Wall]

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/ 

🙂

[AnastasiiaDzundza]

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

[Sage_Wall]

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%....

[AnastasiiaDzundza]

Got it, appreciate your reply.

[Sage_Wall]

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.

[AnastasiiaDzundza]

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.