Formatting Clickable List in popupTemplate

[JeffKing3]

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.

[RobertScheitlin__GISP]

Jeff,

   Actions in the popup are in a state of disarray in the 4.11 API you can allow the menu which makes them display nicely but when you disable the menu they get all wonky right now. Sorry then is not a lot you can do about it as the API internally decides with it includes a node for the actions label or not (you use to be able to set an undocumented property for this, but it is since been removed in 4.10 and greater).

[JeffKing3]

Thank you, Robert, for the reply.  Is there some other way around this, maybe using something else besides actions?  It seems that there must be some other hook to tap into.

Thanks.

[RobertScheitlin__GISP]

Jeff,

   I could be done with a lot of effort, some direct DOM manipulation and css rule overrides. Sorry I do not have any examples to share.

[JeffKing3]

OK, thanks.