Disappearing HTML in New Map Viewer

[RobertAnderson3]

I deployed the ArcGIS Solutions for Capital Project Tracking and was digging into the pop up display as I really like the progress bar style visualization. I wanted to see how this worked so I could use it in other places as well. However, when viewing it in the new map viewer it made zero sense, the attribute expressions, which return 'background-color:#hex' needed to display the colours were no where to be found.

I take a look at the HTML in the Classic Map Viewer, and there they are exactly where I'd expect. Why is that? It disappears in the new viewer, and made it so I was unable to create this pop up formatting the same way.

I ended up figuring out a workaround having the expressions just return the hexcode for the colour and putting the HTML in as 'background-color:{expression/expr0}' instead of the above, but is this an expected behaviour or some sort of bug still? Would probably be a good idea to update the templates that Esri is using to work in the new map viewer if it's not a bug.

[David_McRitchie]

Hey Robert,

Could you let us know which Web Map you are seeing this with the Solution?

From the sounds of this I believe it will be due to the JavaScript version. Map Viewer Classic is built on JavaScript 3.x while Map Viewer is built on JavaScript 4.x so it might be that the required format has changed and that the Solution has not accounted for this.

Many thanks,

David

[RobertAnderson3]

Hi David,

It's in this solution here: https://doc.arcgis.com/en/arcgis-solutions/latest/reference/introduction-to-capital-project-tracking...

The map I was looking at is the one used in the Operations Dashboard, "Capital Project Dashboard"

Super glad it still works in the new Map Viewer, but it was definitely odd to see. It's a nice visualization strategy and I'd love to see a how-to on it (both in pop ups and an Ops Dashboard list) instead of just having to guess off example dashboards I find.

Side note, I would kind of like an "Are you sure" when it tries to deploy a solution you already have a copy of, as I managed to accidentally deploy it two extra times going to find the best link to send you lol

[David_McRitchie]

Hey Robert,

Thank you for letting me know. Would you mind showing some screenshots of the pop-ups and the configuration difference? I am just having issues with my layers not editing correctly.

Many thanks,

David

[RobertAnderson3]

The appearance of the pop up is the same in both map viewers, however when editing the code needed to show the progress of the project (PreDesign, Design, Construction, Closeout) does not show up in the new map viewer, the {expression/expr#} that should be in the table HTML to return the cell colour is not there.

The code as seen in the new Map Viewer:

 <strong>Phase</strong>
    </p>
    <div style="min-width:365px;">
        <figure class="table" style="width:100%;">
            <table style="border-collapse:separate;border-spacing:6px 4px;margin:8px -6px;table-layout:fixed;">
                <tbody>
                    <tr height="16">
                        <td style="text-align:center;width:25%;">
                            &nbsp;
                        </td>
                        <td style="text-align:center;width:25%;">
                            &nbsp;
                        </td>
                        <td style="text-align:center;width:25%;">
                            &nbsp;
                        </td>
                        <td style="text-align:center;width:25%;">
                            &nbsp;
                        </td>
                    </tr>
                    <tr style="text-align:center;" height="24">
                        <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                            PreDesign
                        </td>
                        <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                            Design
                        </td>
                        <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                            Construction
                        </td>
                        <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                            Closeout
                        </td>
                    </tr>
                </tbody>
            </table>
        </figure>
    </div>

The code as seen in the Classic Map Viewer

<b>Phase</b>
<div style="min-width: 365px">
<table style="margin:8px -6px; border-collapse: separate; border-spacing: 6px 4px; width: 100%; table-layout: fixed;">
	<tbody>
		<tr height="16">
			<td style="{expression/expr2}; text-align: center; width: 25%">
			</td><td style="{expression/expr3}; text-align: center; width: 25%">
			</td><td style="{expression/expr4}; text-align: center; width: 25%">
			</td><td style="{expression/expr5}; text-align: center; width: 25%">
		</td></tr>
		<tr height="24" style="text-align: center;">
			<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px">PreDesign</td>
			<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px">Design</td>
			<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px">Construction</td>
			<td style="text-align: center; width: 25%; font-weight:normal; padding-left: 0px"> Closeout</td>
		</tr>
	</tbody>
</table>
</div>

Note the <td style="{expression/expr5};" part in the Classic code, when I try using an {expression/expr} in this location in the new Map Viewer it just vanishes after I close the HTML preview.

[David_McRitchie]

Hey Robert this is a good observation. In that case I think it would be best to raise this as a support case with your Distributor as I agree it looks defective so it could be logged for the ArcGIS Solutions team to review.

Many thanks,

David

[RobertAnderson3]

Ahh, okay I will send them a note, I thought you would take care of it when you jumped in! Haha

Not terribly worried about it since I was able to find it and got what I needed, but figured it would be good to point out so it could be remedied to prevent confusion for others!

Thanks!