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

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