Concatenate two fields in pop up

[KARIMLABIDI]

Hello,

I would like concatenate two attributes  in pop up. I 'd like to merge these attributes

like that

Thank you for your help!

[Sage_Wall]

Hi @KARIMLABIDI ,

The easiest way to do this would be to use an Arcade expression to concatenate the two attribute values:

https://developers.arcgis.com/arcade/function-reference/text_functions/#concatenate

Concatenate([$feature.FIELD1, TextFormatting.NewLine, $feature.FIELD2])

Then use that arcade expression in your popup.  There is an sample for using arcade in popups located here: https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-arcade/

[KARIMLABIDI]

Thank you @Sage_Wall but it doesn't work. I tried with Concatenate and without this function and nothing happens.

//ARCADE 
        const arcadeExpressionInfos = [
  {
    name: "loca",
    title: "Localisation",
    // defined in separate script element
    expression:  `$feature.IDARRET+ TextFormatting.NewLine + $feature.IDARRET" `
  }, {
      name: "Coord",
      title: img_coord, 
      expression:
      `function MetersToLatLon(x, y) {
    // Converts XY point from Spherical Mercator EPSG:900913 to lat/lon in WGS84 Datum
     // Fuente: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
    var originShift = 2.0 * PI * 6378137.0 / 2.0;

    var lon = (x / originShift) * 180.0;
    var lat = (y / originShift) * 180.0;

    lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0);
    return [lat, lon];
}

var latlon = MetersToLatLon(Geometry($feature).X, Geometry($feature).Y);
//var url = CreateWazeURL(latlon[0], latlon[1]);
//return round(latlon[0],2)+"-------"+ round(latlon[1],2);
    var a = 6378137; //demi grand axe de l'ellipsoide (m)
    var e = 0.08181919106; //première excentricité de l'ellipsoide
    var l0 = PI /180 * 3
    var lc = l0
    var phi0 = PI / 180 * 46.5   // latitude d origine en radian
    var phi1 = PI / 180 * 44   // 1er parallele automécoïque
    var phi2 = PI / 180 * 49    // 2eme parallele automécoïque
    
    var x0 = 700000; //coordonnées à l'origine
    var y0 = 6600000; //coordonnées à l'origine
    var long = latlon[0]
    var lat = latlon[1]
    var phi = (PI / 180) * long;
    var l = (PI / 180) * lat;
       
     //calcul des grandes normales
    var gN1 = a / Sqrt(1 - e * e * Sin(phi1) * Sin(phi1));
    var gN2 = a / Sqrt(1 - e * e * Sin(phi2) * Sin(phi2));
    
    //calculs des latitudes isométriques
        var gl1 = Log(Tan(PI / 4 + phi1 / 2) * Pow((1 - e * Sin(phi1)) / (1 + e * Sin(phi1)), e / 2));
        var gl2 = Log(Tan(PI / 4 + phi2 / 2) * Pow((1 - e * Sin(phi2)) / (1 + e * Sin(phi2)), e / 2));
        var gl0 = Log(Tan(PI / 4 + phi0 / 2) * Pow((1 - e * Sin(phi0)) / (1 + e * Sin(phi0)), e / 2));
        var gl = Log(Tan(PI / 4 + phi / 2) * Pow((1 - e * Sin(phi)) / (1 + e * Sin(phi)), e / 2));
 
 //calcul de l'exposant de la projection
        var n = (Log((gN2 * Cos(phi2)) / (gN1 * Cos(phi1)))) / (gl1 - gl2);//ok
    
    //calcul de la constante de projection
        var c = ((gN1 * Cos(phi1)) / n) * Exp(n * gl1);//ok
        //calcul des coordonnées
        var ys = y0 + c * Exp(-1 * n * gl0);
 
        var $x = x0 + c * Exp(-1 * n * gl) * Sin(n * (l - lc));
       // var y93 = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc));
    //var $x= (($c*exp(-$n*($lat_iso)))*sin($n*(latlon[0]-3)/180*PI)+$xs);
    var $y = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc));
    
    return round($x,2) +TextFormatting.NewLine+ round($y,2)`

 }
];

  //TEMPLATE
  const template = {
          // autocasts as new PopupTemplate()
          title: "{IDARRET} / {NOMARRET} <i>/ {MNLP_HASTUS}</i>",
          lastEditInfoEnabled : false,
          content:
          [
            {
              // It is also possible to set the fieldInfos outside of the content
              // directly in the popupTemplate. If no fieldInfos is specifically set
              // in the content, it defaults to whatever may be set within the popupTemplate.
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "expression/loca",
                  //expression : arcadeExpressionInfos,
                  label: img_adresse,
                },
                {
                  fieldName: "VILLE",
                  label: "Ville",
                },
                {
                  fieldName: "MNLP_HASTUS",
                  label: "MNLP Hastus",
                },   
                {
                fieldName: "expression/Coord",
                
              }          
              ],
              expressionInfos: arcadeExpressionInfos
            }
          ],
          
          actions: [editPROD,editPROJ1,editPROJ2],
         
          
        };

And on the pop up,

This link helps me https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=popuptemplate-arcade .

I don't know what I missed!

[Sage_Wall]

Are you getting any errors in the console by chance?  Just looking at the code snippet provided I'm not seeing anything that jumps out as me as being wrong either.  You might try simplifying things and seeing if you can get one simple expression to work and then build up from there.  One thing I'm not totally sure of is if `fieldInfos` will take the expression with the `Textformatting.NewLine` function in it.  You might try removing it as a test.

Is there any way you could send a codepen or some other complete sample that works except for the popup expressions to help debug?

[KARIMLABIDI · Accepted solution]

I found!!The arcade expressions have to be in the template properties and not out. With your function concatenate it works.

//TEMPLATE
  const template = {
          // autocasts as new PopupTemplate()
          title: "{IDARRET} / {NOMARRET} <i>/ {MNLP_HASTUS}</i>",
          lastEditInfoEnabled : false,
          expressionInfos:  [{
    name: "loca",
    title: "Localisation",
    // defined in separate script element
    expression:  `Concatenate([$feature.ADRESSE, TextFormatting.NewLine, $feature.VILLE])`
    
  },
    {
      name: "Coord",
      title: img_coord, 
      expression: 
      `function MetersToLatLon(x, y) {
    // Converts XY point from Spherical Mercator EPSG:900913 to lat/lon in WGS84 Datum
     // Fuente: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
    var originShift = 2.0 * PI * 6378137.0 / 2.0;

    var lon = (x / originShift) * 180.0;
    var lat = (y / originShift) * 180.0;

    lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0);
    return [lat, lon];
}

var latlon = MetersToLatLon(Geometry($feature).X, Geometry($feature).Y);
//var url = CreateWazeURL(latlon[0], latlon[1]);
//return round(latlon[0],2)+"-------"+ round(latlon[1],2);
    var a = 6378137; //demi grand axe de l'ellipsoide (m)
    var e = 0.08181919106; //première excentricité de l'ellipsoide
    var l0 = PI /180 * 3
    var lc = l0
    var phi0 = PI / 180 * 46.5   // latitude d origine en radian
    var phi1 = PI / 180 * 44   // 1er parallele automécoïque
    var phi2 = PI / 180 * 49    // 2eme parallele automécoïque
    
    var x0 = 700000; //coordonnées à l'origine
    var y0 = 6600000; //coordonnées à l'origine
    var long = latlon[0]
    var lat = latlon[1]
    var phi = (PI / 180) * long;
    var l = (PI / 180) * lat;
       
     //calcul des grandes normales
    var gN1 = a / Sqrt(1 - e * e * Sin(phi1) * Sin(phi1));
    var gN2 = a / Sqrt(1 - e * e * Sin(phi2) * Sin(phi2));
    
    //calculs des latitudes isométriques
        var gl1 = Log(Tan(PI / 4 + phi1 / 2) * Pow((1 - e * Sin(phi1)) / (1 + e * Sin(phi1)), e / 2));
        var gl2 = Log(Tan(PI / 4 + phi2 / 2) * Pow((1 - e * Sin(phi2)) / (1 + e * Sin(phi2)), e / 2));
        var gl0 = Log(Tan(PI / 4 + phi0 / 2) * Pow((1 - e * Sin(phi0)) / (1 + e * Sin(phi0)), e / 2));
        var gl = Log(Tan(PI / 4 + phi / 2) * Pow((1 - e * Sin(phi)) / (1 + e * Sin(phi)), e / 2));
 
 //calcul de l'exposant de la projection
        var n = (Log((gN2 * Cos(phi2)) / (gN1 * Cos(phi1)))) / (gl1 - gl2);//ok
    
    //calcul de la constante de projection
        var c = ((gN1 * Cos(phi1)) / n) * Exp(n * gl1);//ok
        //calcul des coordonnées
        var ys = y0 + c * Exp(-1 * n * gl0);
 
        var $x = x0 + c * Exp(-1 * n * gl) * Sin(n * (l - lc));
       // var y93 = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc));
    //var $x= (($c*exp(-$n*($lat_iso)))*sin($n*(latlon[0]-3)/180*PI)+$xs);
    var $y = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc));
    
    return round($x,2) +TextFormatting.NewLine+ round($y,2)`

 } ],
          content:
          [
            {
              // It is also possible to set the fieldInfos outside of the content
              // directly in the popupTemplate. If no fieldInfos is specifically set
              // in the content, it defaults to whatever may be set within the popupTemplate.
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "expression/loca",
                  //expression : "$feature.ADRESSE",
                  label: img_adresse,
                },
                {
                fieldName: "expression/Coord",
                
              }          
              ],
            }
          ],
          
          actions: [editPROD,editPROJ1,editPROJ2],
         
          
        };

Thank you @Sage_Wall !