Change title text on arcgis-layer-list component

[PeterK]

I'm trying to change the top level text on the arcgis-layer-list component from 'Layer List' to 'Anything else' and can't figure out how to do it. 

I don't see any properties other than 'label' which don't do it.  I've tried using Jquery to find the header tag elements and also tried searching for "heading" class and I can't seem to get to it.  I'm new to the calcite framework so I'm wondering what I'm missing.

[Sage_Wall · Accepted solution]

Hi @PeterK , this isn't currently possible, but I can see that it would be better if it were.  We'll take this under consideration and possibly add a property to set the header text in the future.

[PeterK]

Thanks for the clarification, being new to web components I wasn't sure if I was missing some way to access the text.

[PeterK]

I was able to change the title text on the Layer List using the following method.  I'm not sure if this is the way to interact with web components but it seems to work.

Markup:

<arcgis-map basemap="arcgis/topographic" center="-111, 33" zoom="13" >
<arcgis-layer-list position="top-right" show-collapse-button show-heading visibility-appearance="checkbox" icon="legend-plus"></arcgis-layer-list>
</arcgis-map>

In require block:

setTimeout(function () {
const theLayerListHeader = document.querySelectorAll("calcite-flow-item")[0].shadowRoot.querySelectorAll('calcite-panel')[0].shadowRoot.querySelector('h2');
theLayerListHeader.innerText = 'Legend'
theLayerListHeader.style.fontSize = '17px';
}, 1000)

I tried using the argisReady event and onComponentReady promise methods but the layer list was not fully loaded as far as I could tell, so I fell back to a setTimeout block.  Many of the arcgisReady and onComponent methods don't seem to have a fully ready component, bit I may be missing something.

[Sage_Wall]

`arcgisReady` and `componentOnReady()` should fire off when all the publicly documented stuff is ready but we're venturing into the undocumented here 🙂.   I'm glad you figured something out though.

Just thinking about this a little more another option would be to wrap your `arcgis-layer-list` in a `calcite-block` or `calcite-panel`.  Then if you turn off the header in the layer list you could add whatever you wanted as the heading in the calcite component.

https://codepen.io/sagewall/pen/zxxVdam

[PeterK]

That works too, thanks for the alternate solution!