topic Re: Popup with attachements outside map view in ArcGIS JavaScript Maps SDK Questions

Popup with attachements outside map view

kapalczynski — Mon, 03 Jun 2024 18:57:14 GMT

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

Re: Popup with attachements outside map view

JeffreyThompson2 — Mon, 03 Jun 2024 19:13:02 GMT

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.

Re: Popup with attachements outside map view

kapalczynski — Mon, 03 Jun 2024 19:18:56 GMT

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

Re: Popup with attachements outside map view

JeffreyThompson2 — Mon, 03 Jun 2024 19:33:05 GMT

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

Re: Popup with attachements outside map view

kapalczynski — Mon, 03 Jun 2024 22:59:32 GMT

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

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

Re: Popup with attachements outside map view

JeffreyThompson2 — Tue, 04 Jun 2024 12:45:24 GMT

You can alter the PopupTemplate to contain Attachments.

Re: Popup with attachements outside map view

kapalczynski — Tue, 04 Jun 2024 13:29:43 GMT

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?

Re: Popup with attachements outside map view

kapalczynski — Tue, 04 Jun 2024 15:10:23 GMT

@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

Re: Popup with attachements outside map view

kapalczynski — Tue, 04 Jun 2024 15:39:31 GMT

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

Re: Popup with attachements outside map view

kapalczynski — Tue, 04 Jun 2024 15:37:56 GMT

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

Re: Popup with attachements outside map view

JeffreyThompson2 — Tue, 04 Jun 2024 15:43:35 GMT

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

Re: Popup with attachements outside map view

kapalczynski — Tue, 04 Jun 2024 16:36:19 GMT

@JeffreyThompson2 thanks for your guidance... much appreciated.