Select to view content in your preferred language

arcade rendered pop-up table colors

1469
5
Jump to solution
07-19-2023 12:01 PM
mikaël
Frequent Contributor

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).

mikAMD_0-1689792521675.png

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:

mikAMD_1-1689792880275.png

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

0 Kudos
1 Solution

Accepted Solutions
mikaël
Frequent Contributor

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!

View solution in original post

0 Kudos
5 Replies
jcarlson
MVP Esteemed Contributor

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.

- Josh Carlson
Kendall County GIS
0 Kudos
jcarlson
MVP Esteemed Contributor

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.

jcarlson_0-1689796768473.png

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

jcarlson_1-1689796829251.png

 

- Josh Carlson
Kendall County GIS
mikaël
Frequent Contributor

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:

mikAMD_0-1690394617263.png

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.

0 Kudos
mikaël
Frequent Contributor

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.

0 Kudos
mikaël
Frequent Contributor

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!

0 Kudos