topic Re: style pop up in v4.20 in ArcGIS JavaScript Maps SDK Questions

style pop up in v4.20

KenjooYeap — Tue, 07 Sep 2021 14:51:45 GMT

Hi,

I am wondering if there's a way to create up pop up for v4.20, I saw this but it's for v3.x.

I tried to style overwritting the exisiting css of .esri-popup but there is quite a few things that needs to be overwrriten hence wondering if there's another way.

Thanks!

Re: style pop up in v4.20

JeffreyWilkerson — Tue, 07 Sep 2021 15:09:16 GMT

Style your popup by configuring the popup in the ArcGIS Service and choosing 'A custom attribute display'. Then use the 'Configure' button to enter your own html. I haven't found an easy to add CSS classes, but you can use inline styles to get what you want, such as:

<p style="font-size: 1.1em; color: #0e4f49;">Located at {expression/expr8}, {expression/expr9}, light rail station <span style="text-decoration: underline;">{StationName}</span> is currently <span style="text-decoration: underline;">{StationStatus}</span>.</p> <table border="1" style="width: 191px; color: #ffffff; background-color: #177c72; border-color: #ffffff;"> <tbody> <tr> <td style="width: 71px; background-color: #12635b;"><strong>Benches</strong></td> <td style="width: 10px;">{expression/expr0}</td> <td style="width: 69px; background-color: #12635b;"><strong>Restroom</strong></td> <td style="width: 29px;">{expression/expr4}</td> </tr> <tr> <td style="width: 71px; background-color: #12635b;"><strong>Bike Racks</strong></td> <td style="width: 10px;">{expression/expr1}</td> <td style="width: 69px; background-color: #12635b;"><strong>TVM</strong></td> <td style="width: 29px;">{expression/expr5}</td> </tr> </tbody> </table> <p style="font-size: 0.8em;"><a href="{Image}" rel="nofollow ugc" target="_blank"><img alt="Station photo" height="150" src="{Image}" width="200" /></a></p> <p style="font-size: 0.8em;"></p>

Re: style pop up in v4.20

KenjooYeap — Tue, 07 Sep 2021 15:14:25 GMT

Hi @JeffreyWilkerson , thank you for your reply. I assume that by ArcGIS service you mean using the ArcGIS webapp interface? I am only using the JSAPI and building the maps with React not through the ArcGIS online portal. Or do you mean there's a way to configure it such that the API would return me the pop up as styled in the portal?

Re: style pop up in v4.20

JeffreyWilkerson — Tue, 07 Sep 2021 15:18:57 GMT

Yes, I mean going to the service on ArcGIS Online or your own Portal server and setting the Popup look and feel there. I'm sure there's a way to do it through the API but I've never done that since it is so easy to do it this way.