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

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

@JeffreyThompson2   you have any suggestions to why its not working.. See my example of trying to add Attachments... 

What would it look like having field Info and attributes AND the attachments in the template config

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

[kapalczynski]

OK so I changed it from LIST to PREVIEW and they started showing up... confused... then moved it back to LIST and it still worked... really weird... 

My LAST question is how to combine the popup to show attributes and the images... 

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

How to add the "attachmentsElement" to the below popup Template

                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"
                                }]
                        }],
                });

[kapalczynski]

DO I need a MEDIA tag or something... just cant figure out how to combine the attachmentsElement and the fieldInfos into one popup template