AnsweredAssumed Answered

Formatting Clickable List in popupTemplate

Question asked by jkingbainova on May 2, 2019
Latest reply on May 2, 2019 by rscheitlin

Greetings,

 

On our map we are displaying some simple-marker symbols that are configured to show popups when clicked.  On these popups we need to have clickable text or buttons that will facilitate the user drilling down in order to get more information.  I have defined some actions for this purpose.  However, I am not able to style or customize the look and feel of the layout of the display for the clickable actions.  With the actionsMenuEnabled set to true, we get this:

 

 

With the actionsMenuEnable set to false, we get this:

 

 

How can we take control of these clickable "buttons" and display them on the popup as a list, maybe formatted to look like a hyperlink, or whatever we decide?

 

We are using arcgis 4.11.

 

Here is some code:

 

        loadModules(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Point",
            "esri/symbols/TextSymbol", "esri/PopupTemplate", "esri/support/actions/ActionButton"])
            .then(([Map, MapView, Graphic, Point, PopupTemplate, ActionButton]) => {
                const map = new Map({ basemap: "streets" });
                const view = new MapView({
                    container: "viewDiv",
                    map: map, zoom: 8,
                    center: [-73.773, 42.6344],
                    popup: {
                        actionsMenuEnabled: false
                    }
                });
                view.goTo({
                    target: view.graphics
                });
                var clickAction = {
                    title: " Click Action",
                    id: "click-action"
                };
                var clickAction2 = {
                    title: " Click Action 2",
                    id: "click-action2"
                }
                var func = (event) => {
                    if (event.action.id === "click-action") {
                        alert("in the click action!");
                    }
                    if (event.action.id === "click-action2") {
                        alert("in the click action2!");
                    }
                }
                view.popup.on("trigger-action", func);
                var popupTemplate = new PopupTemplate({
                    title: "Check this out!",
                    content: "<div>this is the content</div>",
                    actions: [clickAction]
                });
                popupTemplate.actions.push(clickAction2);
I hope this is clear.
Thank you very much.

Outcomes