Custom HTML in New Map Viewer

523
8
12-13-2021 08:49 AM
mpboyle
Regular Contributor

I saw the most recent update to the new Map Viewer in AGO supports custom HTML, however I've noticed that in-line styling doesn't seem to work as expected if I'm using a table element.

Below is an example.  If I try to add a second style to the in-line style, setting the font color to red, this style does not hold and disappears when I go back to look at the HTML view.

1 - Add the style

mpboyle_0-1639413656588.png

2 - View the custom pop-up --- font color is not red.

mpboyle_1-1639413745314.png

3 - Look at the custom HTML again --- the color tag is no longer there.

mpboyle_2-1639413807168.png

 

It does seem to work as expected for other elements though, for example, divs, as shown below.  Is there any reason that table are treated differently?  Is it because they are automatically placed within a <figure> element?

mpboyle_3-1639414067882.png

 

 

Tags (2)
0 Kudos
8 Replies
SFM_TravisBott
Occasional Contributor II

@mpboyle are you able to actually save edits in the HTML editor in the New Map Viewer? I found your thread because I am trying to update maps to the new viewer and don't seem to have the option to save edits in the HTML mode when configuring pop-ups. I can manipulate the text but the save button is greyed out. 

Peter_Klingman
Esri Regular Contributor

Hi @SFM_TravisBott Thanks for the post - after making changes to the HTML, select the Source button again to preview your changes and save. 

 

@mpboyle style is a supported attribute for the td tag (https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm), can I get a case started with support to investigate this further? 

 

As a workaround can you try including a span element within the td element and specify the desired color there?

<td style="text-align:center;">
<span style="color:#d98a81;"><strong>Species</strong></span>
</td>

mpboyle
Regular Contributor

@Peter_Klingman :

Below are some screenshots from a test:

1) The custom HTML shown in Notepad++ for readability

mpboyle_0-1639590003766.png

 

2) The custom HTML copy/pasted into the pop-up (bracketed in green)

mpboyle_1-1639590082629.png

 

3) If I click OK to accept the pop-up, then go back in to edit the custom HTML, this is what I see, a couple things of note:

  • The table is automatically wrapped in a <figure> element
  • The "color: red" attribute from the first <td> element is missing
  • The "font-weight: bold" attribute has been automatically re-assigned to <strong>
  • The "color: yellow" attribute from the second <td> element is missing
  • The "font-size: 18px" attribute from the second <td> element is missing

mpboyle_2-1639590154463.png

 

 

Peter_Klingman
Esri Regular Contributor

Thanks @mpboyle - here are answers to your above questions from @LaurenBallantyne :

 

  • The table is automatically wrapped in a <figure> element
    • This is expected, since the rich text editor in Map Viewer meets HTML5 standards and conventions. <figure> is used to define self-contained content, and you will most commonly see <figure> wrapped around all tables and images.
  • The "color: red" attribute from the first <td> element is missing
    • This is a bug that we’re looking to fix for 10.1, but for now the workaround is to specify the <td> or <th> text color in a <span> tag around the cell value
  • The "font-weight: bold" attribute has been automatically re-assigned to <strong>
    • This is expected behavior with the Map Viewer’s text editor. The text will still appear bold with <strong>.
  • The "color: yellow" attribute from the second <td> element is missing
    • Same as the above for style = “color:red” on <td>
  • The "font-size: 18px" attribute from the second <td> element is missing
    • This is a bug that we’re aiming to address for the next release, just like the color on <td> and <th>. The workaround is also to wrap the <td> or <th> text in <span> and apply the font-size within <span>

 

Thanks,

 

-Peter 

0 Kudos
DavidColey
Frequent Contributor

Hi @mpboyle , @Peter_Klingman  - I am having some trouble with the HTML editor since the March 2022 ArcGIS Online update.  When I try to edit the popup using the HTML editor, the 'OK' to save does not work - it just sits there greyed out.  Are either of you experiencing this?

thanks-

0 Kudos
mpboyle
Regular Contributor

I honestly haven't tried using the new map viewer since I encountered all the issues I was having in the custom HTML pop-up I listed above.  Any web maps I create where I want to use custom HTML in the pop-up, I use the classic map viewer.

0 Kudos
DavidColey
Frequent Contributor

ok thanks Matt.  Can I ask if you have had any success trying to use html tags in the new rich text element?  seems something simple like this:

var email = $feature.email;
return {
type : 'text',
text : `<a href=mailto:${email}>Send email</a>` //this property supports html tags
}

doesn't seem to work, at least for me.

@Peter_Klingman 

0 Kudos
DavidColey
Frequent Contributor

Geez, as soon as I posted this I discovered that the element was only erroring out in the Test and Console Log.  It works as expected in the popup . . .