Accessing 'url' property in 'LayerList' widget

[LakshanRasingolla]

Version :- "@arcgis/core": "4.30.9"

I am implementing a LayerList widget with actions. One of these actions is 'Description' which redirects the user to the map server directory. For this purpose, I need to get the URL of the selected layer. You can find the solutions tried below.

 

First implementation: 

    const layerList = new LayerList({
      view: view,
      listItemCreatedFunction: layerItemActions,
    });

    layerList.on('trigger-action', async (event) => {
      // Capture the action id.
      const id = event.action.id;

      if (id == 'description') {
        const layerUrl = (await event.item.layer.url) as string;
        window.open(layerUrl);
      }
    });

Even though above solution works it gives the following error,

'Property 'url' does not exist on type 'Layer'.'

Second implementation: 

    const layerList = new LayerList({
      view: view,
      listItemCreatedFunction: layerItemActions,
    });

    layerList.on('trigger-action', async (event) => {
      // Capture the action id.
      const id = event.action.id;

    if (id == 'description') {
        const layerUrl = (await event.item.layer.get('url')) as string;
        window.open(layerUrl);
      }
    });

The above solution also works, But with the following deprecated message, 

[esri.layers.FeatureLayer] 🛑 DEPRECATED - Function: `Accessor.get` is deprecated in favor of using optional chaining()

As far as I understand, the first approach might be the correct one. But I need to find a way to avoid this error message. How do we fix this issue?

[Sage_Wall · Accepted solution]

Hi @LakshanRasingolla ,

The first typescript error is because the base Layer class doesn't have a url property.  You'll need to cast the layer as a specific layer type that does have a url property such as FeatureLayer.  It's probably best to do some sort of test for the layer type first. There are a couple ways to do this but I usually just test the `type` property on the layer.  There isn't any need to use await, the url property doesn't return a promise. Sometimes you may need to wait for then layer itself to be ready and this can be done with the load() or when() methods.

import type FeatureLayer from "@arcgis/core/layers/FeatureLayer"

layerList.on('trigger-action',(event) => {
  const { action, item } = event;

  if (action.id == 'description') {
    if (item.layer.type === 'feature') {
      const layer = item.layer as FeatureLayer;
      const layerUrl = layer.url;
      window.open(layer.url);
    }
  }
}

The sample code would need to be modified like so to make typescript happy.

      ...
      } else if (id === "information") {
        // If the information action is triggered, then
        // open the item details page of the service layer
        if (visibleLayer.type === "map-image") {
          const mapImageLayer = visibleLayer as MapImageLayer;
          window.open(mapImageLayer.url);
        }
      } else if (id === "increase-opacity") {
      ...

[LakshanRasingolla]

This solution worked. Thankz..!!! @Sage_Wall