arcade rendered pop-up table colors

[mikAMD]

I have a couple of tables created from arcade expression in pop-ups for a layer. they are generated with arcade because they contain values from other tables/layers.

in the following screenshot, the first table is generated automatically by the map viewer, and the second table is generated from an arcade expression, which is present in the second screenshot (a little bit shortened for this post).

var cssGris = "style='background-color:#ededed;'";
var cssGrisP = "style='background-color:#fbfbfb;'";
var cssLeft = "style='text-align: left;'";
var cssRight = "style='text-align: right;'";

var layer1 = ...
var layer2 = ...

var table = "<table style='width: 100%'>";
table += `<tr ${cssGris}>
  <td ${cssLeft}>horaire</td>
  <td ${cssRight}>${heure}</td>
</tr>`
table += `<tr ${cssGrisP}>
  <td ${cssLeft}>quotidien</td>
  <td ${cssRight}>${jour}</td>
</tr>`

table += "</table>";

return {
  type: "text",
  text: table
};

instead of using hard-coded style values, is it possible to render a table with default map viewer style values?

i ask this because when using the map in a dashboard, if the dark theme is selected, the pop-up colors do not fit at all! see second table in the following screenshot:

or is there some way to change the colors based on the selected dashboard theme?

[jcarlson]

If you use the return type Field List, you can just supply the attribute names and values, and the popup will render it in the same style as the built-in attribute list.

[jcarlson]

For example, here's a popup. The fields at the top are coming from the feature, the ones at the bottom are defined by Arcade.

If I switch to "dark", it automatically applies the right styling.

[mikAMD]

Right, but in this case I have to create an expression for every field coming from another table?

The table I showed in the original screenshot is relatively simple: key:value style. But other tables are a little more complicated and created with the help of a loop when the number of rows is arbitrary (depends on the data), for example:

generated from:

var cssGris = "style='background-color:#ededed;'";
var cssGrisP = "style='background-color:#fbfbfb;'";
var cssLeft = "style='text-align: left;'";
var cssRight = "style='text-align: right;'";
var cssCenter = "style='text-align: center;'";

var dPermis = FeatureSetByRelationshipName($feature, "RelTerrainsDetenteurs_permis", ["*"], false)
var maxMois = max(dPermis, "mois")
var maxAnnee = max(dPermis, "annee")
var dPermis_f = orderby(filter(dPermis, "mois = @maxMois and annee = @maxAnnee"), "nombre_permis_terrain desc");

var table = "<table style='width: 100%'>";
table += `<tr>
  <th ${cssCenter}><b>numéro de client</b></th>
  <th ${cssCenter}><b>nombre de permis</b></th>
  <th ${cssCenter}><b>entente</b></th>
  <th ${cssCenter}><b>catégorie</b></th>
</tr>`;

var i = 0;
for (var item in dPermis_f){
  var noClient = Text(item.no_client);
  var entente = Text(item.entente);
  var categorie = Text(item.categorie);
  var nombrePT = Text(item.nombre_permis_terrain);

  table += `<tr ${iif(i % 2 != 0, cssGrisP, cssGris)}>
    <td ${cssLeft}>${noClient}</td>
    <td ${cssRight}>${nombrePT}</td>
    <td ${cssRight}>${entente}</td>
    <td ${cssRight}>${categorie}</td>
  </tr>`;
  i++;
}
table += "</table>";

return {
  type: "text",
  text: table
};

Thanks for your answer.

[mikAMD]

I guess as a workaround I'll do everything in one big string as suggested here.

But I'll leave the question open in case somebody has a better answer.

[mikAMD · Accepted solution]

I was building HTML tables and returning them with

return {
  type: "text",
  text: table
};

but with the help of this post, I realized I could return fields just as you suggested @jcarlson. I guess I just didn't know how to return the "field" type from arcade.

return {
    type: 'fields',
    title: 'title', 
    description : 'desc',
    fieldInfos: [{'fieldName': 'field1'}],
    attributes : {'field1': 'value'}
}

Would you know by any chance where to find info on the return types that exist in arcade and info on them? I can't seem to find anything.

Thanks for your help!