style pop up in v4.20

Question

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!

JeffreyWilkerson · Answer

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.

KenjooYeap · Answer

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?

JeffreyWilkerson · Answer

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:

Located at {expression/expr8}, {expression/expr9}, light rail station {StationName} is currently {StationStatus}.

Benches	{expression/expr0}	Restroom	{expression/expr4}
Bike Racks	{expression/expr1}	TVM	{expression/expr5}