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; } } }

Popup with attachements outside map view

kapalczynski

Looking for help on displaying my popup attributes and attachments in a DIV outside the map view. Anyone have any examples?

I am not looking for a dock solution rather a div below my map div that can display the results when the user clicks on the feature in the map.

Thanks in Advance

Encuentra más publicaciones etiquetadas con

Accepted answers

JeffreyThompson2

Content is an array so you can have multiple types of content in a single popup.

let template = new PopupTemplate({
                    title: "Testing",
                    outFields: ["*"],
                    content: [
                        {
                            type: "fields", // Autocasts as new FieldsContent()
                            // Autocasts as new FieldInfo[]
                            fieldInfos: [
                                {
                                    fieldName: "APPLICATIONNUMBER",
                                    label: "Application Number",
                                    format: {
                                        digitSeparator: false
                                    }
                                },
                                {
                                    fieldName: "DISTRICT"
                                }]
                        }, attachmentsElement],
                });

All comments

JeffreyThompson2

Take a look a the Feature or Features widgets. (Two slightly different widgets with very similar names.) They are built as popup replacements that can be placed outside the map.

kapalczynski

I can create the div like this BUT just dont know how to pass the popup info into this green div... Green just so I can see it for development

<div style="float: left; width: 70%; height: 600px;">
     <div id="applicationView" class="applicationMapStyle"></div>
     <div id="applicationView2" class="applicationMapStyle2"></div>
</div>

JeffreyThompson2

// Create a new instance of Features and set the view property
// to the View along with the container that holds the widget
// such as a Calcite Shell Panel.
const featuresWidget = new Features({
  view: view,
  container: "features-widget"
});

// Use reactiveUtils to watch for when the view has a click event
// then open the Features widget in its respective container.
reactiveUtils.on(()=> view, "click",
(event)=>{
  featuresWidget.open({
    location: event.mapPoint,
    fetchFeatures: true
  })
});

This is an example from the Features widget page. Make the value for container the id of the div you want the popup in.

kapalczynski

This seems to be working great... But is there anyway the new popup can show attachments? I am trying the Features Widget

Shows me 51 features and works great but why are their no attachments being displayed??? I really hope that ESRI didn't fall short again and not think a user would like to see the attachments like a typical popup...

.applicationMapStyle {
    width: 70%;
    height: 500px;
    background-color: darkgray;
}
.calcite-match-height {
    width: 70%;
    height: 500px;
    background-color: darkgray;
}

<div style="float: right; width: 70%; height: 1000px;">
     <div id="applicationView" class="applicationMapStyle"></div>
     <div id="features-widget" class="calcite-match-height"></div>
</div>

        // Create a new instance of the Features widget and set
        // it's container to a div residing in a shell panel.
        const featuresWidget = new Features({
          container: "features-widget",
          viewModel: {
            // Add a custom action to the widget that will open a
            // website when it's selected.
            actions: [
              {
                type: "button",
                title: "Visitation Highlights (2022)",
                id: "more-info",
                icon: "information-letter"
              }
            ],
            view: view
          }
        });

        // Open the Features widget with features fetched from
        // the view click event location.
        reactiveUtils.on(
          () => view,
          "click",
          (event) => {
            featuresWidget.open({
              location: event.mapPoint,
              fetchFeatures: true
            });
          }
        );

JeffreyThompson2

You can alter the PopupTemplate to contain Attachments.

kapalczynski

I am trying something like this and no attachments are coming forward in the popup..

I can get the popup to work like this:

                // Create the PopupTemplate
                let template = new PopupTemplate({
                    title: "Testing",
                    outFields: ["*"],
                    content: [
                        {
                            type: "fields", // Autocasts as new FieldsContent()
                            // Autocasts as new FieldInfo[]
                            fieldInfos: [
                                {
                                    fieldName: "APPLICATIONNUMBER",
                                    label: "Application Number",
                                    format: {
                                        digitSeparator: false
                                    }
                                },
                                {
                                    fieldName: "DISTRICT"
                                }]
                        }],

                });

                var layer = new FeatureLayer({
                    url: gisinputs.service,
                    popupEnabled: true,
                    outFields: ["*"],
                    popupTemplate: template
                });
                layer.title = "GIS SIGN INSPECTION";

BUT there are no Attachments... I tried this to get the attachments but again no attachments...

ANY THOUGHTS?

                let attachmentsElement = new AttachmentsContent({
                    displayType: "list" // this will show all attachments as a list of linked files
                });

                //// Create the PopupTemplate
                let template = new PopupTemplate({
                    title: "Testing",
                    outFields: ["*"],
                    content: [attachmentsElement]
                });

                var layer = new FeatureLayer({
                    url: gisinputs.service,
                    popupEnabled: true,
                    outFields: ["*"],
                    popupTemplate: template
                });

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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