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

featureActions in Expereince Builder

ŁukaszWiszniewski

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.

Find more posts tagged with

Accepted answers

JeffreyThompson2

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.

All comments

JeffreyThompson2

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.

ŁukaszWiszniewski

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

JeffreyThompson2

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.

ŁukaszWiszniewski

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)

JeffreyThompson2

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/add-a-button-to-a-popup-using-the-default-contents/m-p/1342202#M82570

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

TonghuiMing

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:

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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