0

I want to display a hyperlink on the bottom of the popup template in arcgis esri map. I've added the code I've tried, but hyperlink is not displaying in the popup template. Only the fields table is displaying. Could you please have look into this code and let me know if I've missed something.

.ts file

const popUpTemplate = new PopupTemplate({
  title: "{name}",
  content: [
      {
          type: "fields",
          fieldInfos: [
              {
                  fieldName: "PhysicianName",
                  label: "Physician Name"
              },
              {
                  fieldName: "Practice",
                  label: "Primary Practise",

              },
          ]
      },
    new CustomContent({
      outFields: ["*"],
      creator: (graphic) => {
          const a = document.createElement("a");
          a.href = "https://www.youtube.com/";
          a.target = "_blank";
          a.innerText = graphic.attributes.PhysicianName;
          return a;
      }
  })
  ],
  outFields: ["*"]
});
   
    const myLayer = new FeatureLayer({
    source: physicianData.map((d,i)=>(
      {
          geometry: new Point({
            longitude: d.Longitude,
            latitude: d.Latitude
          }),
          attributes: {
            ObjectID: i,
            name : d.PhysicianName,
            PhysicianName : d.PhysicianName,
            Practice : d.Practice,
            ...d
          }
      }
    )),
    fields: [{
      name: "ObjectID",
      alias: "ObjectID",
      type: "oid"
    }, 
    {
      name: "name",
      alias: "Physician : ",
      type: "string"
    },
    {
      name: "PhysicianName",
      alias: "Physician Name",
      type: "string"
    },
    {
      name: "Practice",
      alias: "Practice",
      type: "string"
    },
   ],
  objectIdField: 'ObjectID',
  geometryType: "point",
  popupTemplate : popUpTemplate,
});

.html file

    <div #mapViewNode></div>
Kalana Tebel
  • 135
  • 4
  • 17
  • 1
    Please create a stackblitz demo so that we can debug, this issue might be because of CSS also. See: [How to create a Minimal, Reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Vimal Patel Dec 11 '21 at 06:04
  • Hi @VimalPatel. I found the issue and it's with **graphic.attributes** is null. Can anyone help with why that value is not coming in graphic object? – Kalana Tebel Dec 13 '21 at 06:09
  • without debugging its difficult to answer. requesting you to please create a stackblitz demo to troubleshoot. – Vimal Patel Dec 13 '21 at 07:19

1 Answers1

0

I think your issue is that you need to define the fields of the layer.

If you are working with client side graphics and FeatureLayer, you need to set:

  • source, the collection of graphics (geometry + attributes)
  • objectIdField, the field that is going to identify the graphics, type oid (*)
  • fields, the name, alias, and type of each field of the graphics attributes

In your case, just by deducing the possible attributes, it should be something like this

const dataFeedLayer = new FeatureLayer({
    source: locationData.map((d,i)=>(
        {
            geometry: new Point({
                longitude: d.longitude,
                latitude: d.latitude
            }),
            attributes: {
                ObjectID: i,
                ...d
            }
        }
    )),
    objectIdField: 'ObjectID',
    popupTemplate : popUpTemplate,
    fields: [
        {
            name: "ObjectID",
            alias: "ID",
            type: "oid"
        },
        {
            name: "PhysicianName",
            alias: "Physician Name",
            type: "string"
        },
        {
            name: "PrimarySpecialty",
            alias: "Primary Specialty",
            type: "string"
        },
        {
            name: "url",
            alias: "Url",
            type: "string"
        }
    ]
});

When creating a FeatureLayer from client-side features, this property should be set in the constructor along with the source property. The objectId field also must be set either in this array or in the objectIdField property.

From ArcGIS JS API - FeatureLayer fields

cabesuon
  • 4,860
  • 2
  • 15
  • 24
  • Hi @cabesuon. I tried with your suggestion and I'm not getting any value to **graphic.attributes.PhysicianName**. Do you have any thoughts on this? – Kalana Tebel Dec 13 '21 at 13:06
  • Can you print the parameter `graphic` of `CustomContent.creator` method and also the `attributes` property of the parameters? – cabesuon Dec 13 '21 at 20:46
  • Could you please refer to these console logs I've mentioned in my previous question. That's how it's printing graphics and attributes here as well. https://stackoverflow.com/questions/70330541/arcgis-esri-popup-template-custom-content-not-showing-graphic-attributes-ang – Kalana Tebel Dec 14 '21 at 03:11
  • Hi @KalanaTebel, sorry the delay .. Check [this answer](https://stackoverflow.com/questions/70101230/issue-when-displaying-a-popup-window-in-the-esri-map/70103078#70103078) that I made a couple of weeks ago – cabesuon Dec 15 '21 at 07:56
  • In [this related question](https://stackoverflow.com/questions/70330541/arcgis-esri-popup-template-custom-content-not-showing-graphic-attributes-ang/70397925#70397925) I post the full angular example – cabesuon Dec 17 '21 at 19:17