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

Custom pop-ups in AppStudio

ErinnHasselgren

I'm working on an app based on the MapViewer template. The app is based off of a web map where we created a custom pop-up to display attribute information. This does not appear to carry into the app. Instead, the whole row for the feature in the attribute appears in the pop-up. The custom pop-up in the web map contains photos, as well as hyperlinked URLs. Does anyone know if there's an easy way to copy this down to the app? Someone was able to help me find the place in the panelpage.qml file where the pop-up information can be edited, but I can't figure out how to customize the code appropriately.

appstudio‌ configurable pop-up #

Vind meer berichten getagd met

Accepted answers

EricDrummond2

After reading Erwin Soekianto‌ and Erinn Hasselgren above comments noting custom popups may be supported in future versions of AppStudio, I logged into‌ Esri's early adopter site hoping to find a new version. On 6/24/2020 I download ArcGIS AppStudio 4.3.1222(Windows 64bit) and I'm happy to report the Map Viewer (4.3) template now supports custom popups! The screengrab below shows a popup using arcade expressions to dynamically change the color of status and passing in .png graphics to show the allowed uses of a trail.

It's awesome to see Esri staff taking feedback from customers on geonet and then making fixes to the software. You are doing it right Erwin Soekianto‌ , Chris LeSueur‌ , and Tina Jin‌. Keep up the good work!

Looking forward to the public release of 4.3.x

Custom popup working as expected

All comments

ErwinSoekianto

Thank you for your kind words. We are expecting to have a public beta release for 4.3 for UC timeframe and final release after UC.

This new custom pop-ups feature in MapViewer was made possible, powered by ArcGIS Runtime SDK for Qt‌ technology that we use for MapViewer template.

EricDrummond2

Custom popup working as expected

MuhammadAli1

Hello,

PanelPage.qml Page with fix: ESRI/PanelPage.qml at master · upsilonsolutions/ESRI · GitHub

code location: PanelPage.qml on the `identifyFeatureView` component, on the bindModel() function.

Just change the following code:

// Muhammad Ali Sr. GIS Developer Master Code Change +923332771109 | 77.muhammadali@gmail.com...
// Popup-Template Code | display the feilds that is being configured visible at ArcGIS Online popup configuration template
for(var index=0; index<popupModel.count;index ++)
{
var key = popupModel.get(index)
if(attributeJson1.hasOwnProperty(key.fieldName))
{
attrListModel.append({
"label": key.label,
"fieldValue": attributeJson1[key.fieldName]!== null?attributeJson1[key.fieldName].toString():null
})
}

}
// END Popup-Template Code
// OLD Code
/* for(var key in attributeJson1)
{
if(attributeJson1.hasOwnProperty(key))
{
attrListModel.append({
"label": key,
"fieldValue": attributeJson1[key]!== null?attributeJson1[key].toString():null
})
}

}*/
// END OLD Code

InfoW

GaryBarden

Thanks Erwin,

Can that be coded to appear at the bottom of the popup?

ErwinSoekianto

Gary,

We have a sample in AppStudio Desktop, called "Email Composer", that will show you how to achieve similar to "mailto" functionality, but better, from AppStudio AppFramework.

Thank you,

Erwin.

GaryBarden

Erwin,

I'd like to be able to pass along some info to my developer about this. I don't necessary want to make a lot of changes to the popup, but we'd like to be able to able a mailto link at the bottom of the existing popup where someone can click and send an email. Is this possible? If so, in the simplest terms, could you give me an idea of how to accomplish this?

Thanks!

ErinnHasselgren

Thank you, Edwin! I have a few follow up questions:

- Is there any ESRI documentation that outlines how to edit pop-ups in AppStudio? Or similarly, is there any sample code that displays how to limit to some, but not all attributes? While I was able to identify the places in the qml to update, I'm having trouble figuring out how to structure the code to just display a few attributes.

- I actually opened a help ticket for this issue and the person I was working with mentioned that it's possible that support for custom attributes in MapViewer may be incorporated into the next AppStudio release. Do you know what the timing is surrounding this?

Thanks again for your help!

Best,

Erinn

ErwinSoekianto

Erinn Hasselgren‌

Yes, the current MapViewer template does not support custom attributes display popup.

If you were to make the changes in the code, you would start from PanelPage.qml on the `identifyFeatureView` component, especially on the bindModel() function.

The easiest way is to only grab which attributes that you want to show in the panel instead of all.

And then, on the IdentifyFeaturesView.qml, you need to make changes at the `delegate` of the `model` from PanelPage.qml, instead of showing the URL of the image, you can actually use the image object, and set the source property of the image to the image URL.

Image QML Type | Qt Quick 5.11

With that being said, I will raise this up to the team to see if we can add the support for custom attributes display popup in the MapViewer template.

Thank you,

Erwin.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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