Select to view content in your preferred language

featureActions in Expereince Builder

1230
8
Jump to solution
10-19-2023 04:41 AM
ŁukaszWiszniewski
Emerging Contributor

Hello,
It came time to switch from WebAppBuilder to Experience Builder and I have a question regarding it. In Wab, it is possible to implement featureActions defined in manifest.json as an array of objects(name, URI) and those actions are visible in the pop-up's menu (...) of each, single, clicked element in the map. 

ukaszWiszniewski_0-1697715437874.png

How can I implement the same type of actions in Experience Builder?

I tried to use Experience Builder's dataActions defined in manifest.json as well, but these custom actions are only visible in "Table" widget. I would like to avoid using Table as an extra widget.

0 Kudos
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor
jimuMapView.view.map.allLayers.map(layer => {
   if (layer.type === 'feature') {
     layer.popupTemplate.actions.push(myAction)
   }
})

The codepen link does not work, but something like this should loop through all of the layers in the map, check if it is a feature layer then add myAction to the popup actions. It is possible that altering the popupTemplate will break the default popupTemplate and you will need to define the title and content, which is where things could really get tricky.

GIS Developer
City of Arlington, Texas

View solution in original post

0 Kudos
8 Replies
JeffreyThompson2
MVP Regular Contributor

Currently, you will need to use Developer Edition and alter the actions of the popupTemplate.

https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#actions

In the next version of Experience Builder (1.13), coming to ArcGIS Online by the end of the month, a limited number of actions will be options in the builder mode.

GIS Developer
City of Arlington, Texas
ŁukaszWiszniewski
Emerging Contributor

The case is that Experience Builder API doesn't contain any information about pop-ups. (https://developers.arcgis.com/experience-builder/api-reference/)
I tried to import  PopupTemplate which I also added to my app's manifest.json in the "dependency" array, but I got Module not found: Error: Can't resolve '@arcgis/core/PopupTemplate.js'

 

import PopupTemplate from "@arcgis/core/PopupTemplate.js";

 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

Experience Builder is really just a skin over the JavaScript API. Anything in the API can be used with Experience Builder.

To import something from the JS API use the quoted require path of the AMD line on any page of the API docs. So the import path for PopupTemplate is:

import PopupTemplate from 'esri/PopupTemplate'

You will also need to add jimu-arcgis to your dependencies in manifest.json, as in this example.

https://developers.arcgis.com/experience-builder/guide/get-map-coordinates/#change-the-widget-name

Also, you will need to find a way to either target this map layer so you can attach the PopupTemplate or you will need to load the layer at runtime with the PopupTemplate as part of the initial declaration.

GIS Developer
City of Arlington, Texas
0 Kudos
ŁukaszWiszniewski
Emerging Contributor

Thank you Jeffrey for your advice. I still have to ask more because further I dig more questions I have.
I found this codePen https://codepen.io/pen?editors=1000 which shows more less what I have to achieve but instead of having an icon, I need a minimum 2 options menu.
Do I have to create a new FeatureLayer to be able to add a menu in the popup? The case is, my widget has to work with different types of maps, and some of them will have only ImageServer without featurelayers. I cannot add hard coded URL for a FeatureLayer to a server what is shown in codepen example (line 52)

0 Kudos
JeffreyThompson2
MVP Regular Contributor
jimuMapView.view.map.allLayers.map(layer => {
   if (layer.type === 'feature') {
     layer.popupTemplate.actions.push(myAction)
   }
})

The codepen link does not work, but something like this should loop through all of the layers in the map, check if it is a feature layer then add myAction to the popup actions. It is possible that altering the popupTemplate will break the default popupTemplate and you will need to define the title and content, which is where things could really get tricky.

GIS Developer
City of Arlington, Texas
0 Kudos
ŁukaszWiszniewski
Emerging Contributor

Thanks for help Jeffrey! It was not straightforward to get it fixed but I managed to do it.

 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/add-a-button-to-a-popup-using-the...

For future reference, here's how you can add an action to a popup without breaking the default popup template.

GIS Developer
City of Arlington, Texas
0 Kudos
TonghuiMing
Esri Regular Contributor

In the latest AGOL October release, the Map widget provides the data action within the pop-up, so it might be helpful to utilize that as well:

TonghuiMing_0-1698392279201.png

 

0 Kudos