Customize LayerList (4.x) "Render" & "_renderItem" methods

Question

Hi,

I might want/need to add some functionality into the default LayerList Widget - the typescript (*.tsx file) is available here:

https://github.com/Esri/arcgis-js-api/blob/4master/widgets/LayerList.tsx

The thing is that the typings for LayerListViewModel, ListItem etc is not available (only *.js files)

TypeScript not my forte, so I throw questions out here:

* What would be the technical process of creating placeholders for this missing types? (If possible at all) Even if the typing checks can be disable.
* Is there any licence issues/limitations to do the above?

Is this a cul-de-sac - should I rather develop from scratch? ..last resort..

Much appreciated!

GertConradie · Answer

Just an update - I were able to to get this LayerList.tsx to compile as part of my project in Visual Studio. It was a bit painful with a couple of issues:

* The typing's available to download is not 100% compatible with what this widget expects (HandleRegistry etc), but I were able to get past that by creating my own typings for that/add changes to the version available for download.
* Had to create custom interfaces for the viewmodels, views etc (i.e. no custom implementation) and replacing that run-time with aliases in dojo.config that redirect  it to the online esri versions.

I also upgraded to a custom version of 4.4, but there is bugs like the grade out layers when out of scale stopped working.

GertConradie · Answer

Hi Thomas

The most pressing requirement was CSS styles based on indent level in the tree structure. (This I could get working with with CSS selectors now)

Then also to:

* Use checkbox/other icons instead of the 'eye' to control layer visibility. (See 'const toggleIconClasses' in LayerList.tsx) Other icons available here. This will required changes in the tsx file I suspect?
* Inject DOM element identifiers into the HTML so that it can be modified run-time - as you suggested. (I follow a similar approach with a custom version of the 3.x JS version in WAB applications, but need DOM selection identifiers that is similar to the layer indeitifiers assigned in AGOL Web Map layers - that allow one to configure the changes that need to be applied runtime. ) The 4.x version seems to be assign identifiers that is not related to any layer identifiers that one use when instantiate the layers add to the map/layer-list. This question is not related to a WAB application/WAB widget - but about direct use of teh ESRI JS API code base and LayerList widget.
* Add ability to display single 'abc' layer in the layerlist, that control n different 'abc' scale-dependent layers. (The user should be agnostic to what scale-dependent layer he currently see of 'abc')

I played with the typing's you referenced but it seems it is somewhat different than what is needed by the LayerList.tsx. I will continue to investigate...

ThomasSolow · Answer

You can get the typings from here: jsapi-resources/4.x/typescript at master · Esri/jsapi-resources · GitHub

I'm not sure the exact issue you're running into, or the best way to approach this in general.  My feeling is that there is almost certainly a way to use the .js files with those typings but I'd have to play around with it to figure it out I'm sure.

Also, what capability do you need to add to the layer list?  There may be an easier way to add it on top, at runtime, as opposed to modifying the source code.