AGOL Pop-Ups Text Content Table Formatting

[Christopher_Spadi]

Greetings,

In map viewer, I am using the pop-ups, Text (content), to create a table from a map service table. I am close to what I need but can't get specific fields to highlight or appear bold/different color in the pop up when the condition is meet. 

Arcade expression (one for each field): 

var test1ExceedsD1 = $feature.Test1Exceed_D1;
var test1ResultD1 = $feature.Test1Result_D1;
if (test1ExceedsD1 == "Y") {
    return "<span style='font-weight:bold; color:red;'>" + test1ResultD1 + "</span>";
} else {
    return test1ResultD1;
}

Then for the html source in text: 

<figure class="table">
    <table>
        <tbody>
            <tr>
                <td style="background-color:hsl(0, 0%, 90%);border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    ft(bgs)
                </td>
                <td style="background-color:hsl(0, 0%, 90%);border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    PCE&nbsp;
                </td>
                <td style="background-color:hsl(0, 0%, 90%);border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    TCE&nbsp;
                </td>
                <td style="background-color:hsl(0, 0%, 90%);border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    VC&nbsp;
                </td>
                <td style="background-color:hsl(0, 0%, 90%);border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    Benz&nbsp;
                </td>
            </tr>
            <tr>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {Depth1}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr0}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr1}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr2}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr3}&nbsp;
                </td>
            </tr>
            <tr>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {Depth2}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr4}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr5}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr6}&nbsp;
                </td>
                <td style="border:1px solid hsl(0, 0%, 30%);text-align:right;">
                    {expression/expr7}&nbsp;
                </td>
            </tr>
        </tbody>
    </table>
</figure>

Result (1st row is null): 

My ideal situation would be to highlight a cell yellow if it meets the condition instead of making the value bold, but I can't even seem to get that to work. 

Any help would be appreciated. 

[jcarlson · Accepted solution]

Try to use an Arcade popop element. Instead of defining a ton of variables separately, you could write them all in a single expression and build the HTML that way. An Arcade popup element is capable of dynamic HTML, where a text element is not.

Also, certain styles will be inherited by all child elements, so you can set things like header background and font alignment on the table as a whole. Saves a lot of text and makes your HTML more readable.

Since you just need the "exceeds" field to control the background color, we can insert that into each row where appropriate. Using a backtick string, we can use template literals, inserting the values into the exact spot we need them.

// conditional style text per field
var t1d1 = Iif(
  $feature.test1ExceedsD1 == 'Y',
  'background-color:red; font-weight:bold;',
  'background-color:white;'
)

var t2d1 = Iif(…) // and so on

var html = `<table style="border:1px solid hsl(0, 0%, 30%); border-collapse:collapse; text-align:right;" cellpadding=3>
  <tbody>
    <tr style="background-color:hsl(0, 0%, 90%);">
      <td>ft(bgs)</td>
      <td>PCE</td>
      <td>TCE</td>
      <td>VC</td>
      <td>Benz</td>
    </tr>
    <tr>
      <td>{Depth1}</td>
      <td style="${t1d1}">{$feature.test1ResultD1}</td>
      <td style="${t2d1}">{$feature.test2ResultD1}</td>
      <td style="${t3d1}">{$feature.test3ResultD1}</td>
      <td style="${t4d1}">{$feature.test4ResultD1}</td>
    </tr>
    <tr>
      <td>{Depth2}</td>
      <td style="${t1d2}">{$feature.test1ResultD2}</td>
      <td style="${t2d2}">{$feature.test2ResultD2}</td>
      <td style="${t3d2}">{$feature.test3ResultD2}</td>
      <td style="${t4d2}">{$feature.test4ResultD2}</td>
    </tr>
  </tbody>
</table>`

return {
  type: 'text',
  text: html
}

I'm just using random numbers to assign the background color, but whenever the random number is greater than 0.5, it goes red.

[Christopher_Spadi]

Thanks Josh.