Select to view content in your preferred language

Arcade expressions in List Widget to color attribute information

354
2
Jump to solution
03-18-2024 04:22 PM
AnareM
by
New Contributor

Hi, 

I have a ArcGIS Dashboard with a list widget that I would like to add two fields from the same layer to. And not just to add them but also when you see them listed their colors will change based on the attribute information.

  • The first field I am using is Main_Sourc which has Electricity Grid, Generator, Solar and No data entered in the attribute table.
  • The second field, Func_Toile has Yes, No and No data entered in the attribute table

I am able to style the first field Main_Sourc  in the List but not Func_Toile.

My issue as you can see in the screeshot below is the second field "FuncToile" takes the color of the "Main_Sourc" when the list is displayed and not the color that was asigned to it in arcade.

Arcade Issue.PNG

My arcade expression is below:

if($datapoint.Main_Sourc =="Electricity Grid"){
    var Electsource = "#57A700"
}
if($datapoint.Main_Sourc =="Generator"){
    var Electsource = "#FFA500"
}
if($datapoint.Main_Sourc =="Solar"){
    var Electsource = "#FFA500"
}
if($datapoint.Main_Sourc =="No data"){
    var Electsource = "#800000"
}
if($datapoint.Func_Toile =="Yes"){
    var Functoilet = "#57A700"
}
if($datapoint.Func_Toile =="No"){
    var Functoilet = "#6E6865"
}
if($datapoint.Func_Toile =="No data"){
    var Functoilet = "#6E6865"
}
return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
   attributes: {
   Electsource: Electsource,
   Functoilet: Functoilet,
 }
}

 

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

In the Line item template, open the Source and modify the HTML to add in this:

Functioning Toilet: <span style="color:{expression/Functoilet};">{field/Func_Toile}</span>
</p>

Here's an example using my data

dashboard.png

Also you can use the When function to simplify your code

var Electsource = When($datapoint.Main_Sourc =="Electricity Grid", "#57A700",
                       $datapoint.Main_Sourc =="Generator", "#FFA500",
                       $datapoint.Main_Sourc =="Solar", "#FFA500",
                       $datapoint.Main_Sourc =="No data", "#800000",
                       '#000000');
var Functoilet = When($datapoint.Func_Toile =="Yes", "#57A700",
                      $datapoint.Func_Toile =="No", "#6E6865",
                      $datapoint.Func_Toile =="No data", "#6E6865",
                      '#000000');
return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
     Electsource: Electsource,
     Functoilet: Functoilet,
  }
}

 

 

 

View solution in original post

0 Kudos
2 Replies
KenBuja
MVP Esteemed Contributor

In the Line item template, open the Source and modify the HTML to add in this:

Functioning Toilet: <span style="color:{expression/Functoilet};">{field/Func_Toile}</span>
</p>

Here's an example using my data

dashboard.png

Also you can use the When function to simplify your code

var Electsource = When($datapoint.Main_Sourc =="Electricity Grid", "#57A700",
                       $datapoint.Main_Sourc =="Generator", "#FFA500",
                       $datapoint.Main_Sourc =="Solar", "#FFA500",
                       $datapoint.Main_Sourc =="No data", "#800000",
                       '#000000');
var Functoilet = When($datapoint.Func_Toile =="Yes", "#57A700",
                      $datapoint.Func_Toile =="No", "#6E6865",
                      $datapoint.Func_Toile =="No data", "#6E6865",
                      '#000000');
return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
     Electsource: Electsource,
     Functoilet: Functoilet,
  }
}

 

 

 

0 Kudos
AnareM
by
New Contributor

Thank you @KenBuja !
You didnt just provide me with an answer but also I was able to streamline my script as you have shown.

Very much appreciated!

AnareM

0 Kudos