nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Access the title of Feature Widget

Bart

Hello,

I'm working with a Feature widget in a TypeScript project and encountering an issue when trying to access the title property of the widget. Despite the widget being initialized and seemingly working fine, attempting to access/log the title property results in an empty string.

Here's a simplified version of my code:

import Feature from '@arcgis/core/widgets/Feature';

function initializeFeatureWidget(view: MapView, unFeature: Graphic) {
    // Assuming 'view' and 'unFeature' are already defined and valid
    const container = document.createElement('div');
    container.setAttribute('id', 'feature-widget');
    document.body.appendChild(container); // Simplified for this example

    const featureWidget = new Feature({
        graphic: unFeature,
        container: 'feature-widget',
        map: view.map,
        spatialReference: view.spatialReference
    });

    console.log(featureWidget); // Logs the instance with set "title" property inside
    console.log(featureWidget.title); // Logs an empty string
}

I am building my own version of the popup and I need that Feature widget for the feature's info. I expected to access the title of the feature widget and display it in the header of that custom popup, but it doesn't seem to work as anticipated. The rest of the widget functionality seems to be unaffected.

I followed up the docs Feature | API Reference | ArcGIS Maps SDK for JavaScript 4.30 | Esri Developer and to my understating it should work just fine.

Has anyone encountered this issue before, or does anyone have insights on what might be going wrong? Any advice on how to properly access the title property of a Feature widget would be greatly appreciated.

Thank you in advance for your help!

Bartosz

Vind meer berichten getagd met

Accepted answers

Sage_Wall

Thanks for the clarification 😀.

It looks like you may need wait for the featureWidget.title property, it appears to be asynchronous. I'm not sure if this is expected or not, but I can look into it and see if its a bug or if we need to better document the property. I can definitely replicate the behavior your seeing in this codepen:

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

If I wait for the title prop to populate with reactiveUtils.once (line 94) it logs out, hopefully this may be an option in your app.

All comments

Sage_Wall

Hi @Bart,

The title on the Feature widget is derived from the feature widgets graphic's popup tempate. I don't think `title` will have a value until after you do a hit test or otherwise provide a graphic to the widget. In this codepen I've set up a watch on the title property and log it out as it's changing as the hit test are performed. Is your 'unFeature` defined at the time your trying to log out the value. Hard to tell from a code snippet. Another possibility is that the popupTempate on the graphic passed into the feature widget doesn't have a `title` property. If you can provide a working repro sample would be happy to look into it further, but I hope this helps 😀

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

Bart

Thanks for the feedback! 🙂

`unFeature` is actually a type of Graphic coming from a Feature Service. I read it from the `view.popup.features` array. For that feature (graphic) `unFeature.popupTemplate` is null while for `unFeature.layer.popupTemplate` I get actually the template with `title` like "Electric network: {ASSETGROUP}". And I want to spare myself writing the logic for finding the value behind that ASSETGROUP or whatever value will be included in `unFeature.layer.popupTemplate.title` . That's why I thought `featureWidget.title` will work for my case.

So I do provide the Graphic to the widget. I can also log that Feature widget instance and see that `title` property is actually a resolved value like "Electric network: Low Voltage Conductor".

import Feature from '@arcgis/core/widgets/Feature';

// reading a feature from popup
        const watchFeatures = reactiveUtils.watch(
          () => view.popup.features,
          features => {
            // do smth with features so that they coud be passed to `initializeFeatureWidget()`
        );

// initializing the Feature widget based on the Graphic value from `view.popup.features`
function initializeFeatureWidget(view: MapView, unFeature: Graphic) {
    // Assuming 'view' and 'unFeature' are already defined and valid
    const container = document.createElement('div');
    container.setAttribute('id', 'feature-widget');
    document.body.appendChild(container); // Simplified for this example

    const featureWidget = new Feature({
        graphic: unFeature, // this is a Graphic
        container: 'feature-widget',
        map: view.map,
        spatialReference: view.spatialReference
    });
    
    // Logs:
    // {
    //   ...
    //   title: "Electric network: Lov Voltage Conductor"
    // };
    console.log(featureWidget);

    // Logs:
    // ""
    console.log(featureWidget.title);
}

And if I can log `featureWidget` and see a `title` property inside it with a string value, but I cannot log `featureWidget.title` (it returns empty string), then I can only assume that the Feature instance is some kind of a Proxy object where `title` cannot be accessed event though the docs says it can.

Sage_Wall

Thanks for the clarification 😀.

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

If I wait for the title prop to populate with reactiveUtils.once (line 94) it logs out, hopefully this may be an option in your app.

Bart

Oh, it seems the simplest solutions are the best ones! This one worked! Here's the complete solution for web app written in React if anyone needs it:

export const useRenderFeatureWidget = (
  featureWidgetContainerRef: RefObject<HTMLDivElement>,
  feature: Graphic
) => {
  const view = useMapViewSelector();
  const [title, setTitle] = useState<string>('');

  useEffect(() => {
    if (!featureWidgetContainerRef.current || !view) return;

    const { current } = featureWidgetContainerRef;

    const container = document.createElement('div');
    container.setAttribute('id', 'feature-widget');
    current.appendChild(container);

    const featureWidget = new Feature({
      graphic: feature,
      container: 'feature-widget',
      map: view.map,
      spatialReference: view.spatialReference,
      visibleElements: { title: false }
    });

    void (async () => {
      await reactiveUtils.once(() => featureWidget.title);
      setTitle(featureWidget.title);
    })();

    return () => {
      setTitle('');
      featureWidget.destroy();
      current?.querySelector('#feature-widget')?.remove();
    };
  }, [view, featureWidgetContainerRef, feature]);

  return { title };
};

And yes, the docs could at least mention that that value will be available at some point in the future. Anyways, really thanks for your help @Sage_Wall !

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.