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.
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.
Solved! Go to Solution.
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.
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.
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";
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.
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)
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.
Thanks for help Jeffrey! It was not straightforward to get it fixed but I managed to do it.
For future reference, here's how you can add an action to a popup without breaking the default popup template.
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: