Community

JS API 4.16 Coded Domain Values with QueryTask

3790
18
Jump to solution
08-18-2020 12:27 PM
Claire_Peterson
by
Occasional Contributor
‎08-18-2020 12:27 PM

There are a lot of threads that talk about returning the coded domain values descriptions while using a queryTask but from the few examples I have seen using the 4.x API, I can't get anything to work. My code is below if anyone could help me. I haven't really found any examples along the same lines as to what I am trying to do.

//build query task
    var queryTask = new QueryTask({
      url: "https://services.arcgis.com/uHAHKfH1Z5ye1Oe0/arcgis/rest/services/misin_treatments_aquatic/FeatureServer/0"
      });

    //build query filter
    var query = new Query();
    query.returnGeometry = true;
    query.outSpatialReference = view.spatialReference; //added for testing
    query.outFields = ["*"];


    //pass the url parameters.
    var urlObject = urlUtils.urlToObject(window.location.href);
    if (urlObject.query)
    {
      if (urlObject.query.id)
      { OID = urlObject.query.id; }

    //set query based on the parameters

    var treatmentid = "OBJECTID = '" + OID + "'";
    query.where = treatmentid;
    }

  // execute query, place graphic on map and zoom to graphic
      queryTask.execute(query).then(function(result){
         console.log(result.features);
         view.graphics.removeAll();
         view.popup.close();

         var resultFeatures = result.features;
         resultFeatures.map(function(gra){
           gra.symbol = sym;
           view.graphics.add(gra);
           gra.popupTemplate = popupTemplate;

           // Provide graphic to a new instance of a Feature widget
         const feature = new Feature({
           container: "attributes",
           graphic: gra,
           map: view.map,
           spatialReference: view.spatialReference
         });

         var AOI = result.features;
         view.goTo(AOI);
       });
     });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
AaronBooterbaugh
by
Occasional Contributor
‎08-18-2020 07:27 PM

Claire,

Below is a complete working htm document that you can use to create a file *.htm. This will output a domain value to the console of the web browser when you load it to a browser and click the button. I hope this helps so you can see the code work for yourself.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.16
  </title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.16/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #paneDiv {
      position: absolute;
      bottom: 40px;
      width: 100%;
      text-align: center;
      background-color: transparent;
      color: white;
    }

    .esri-button-overwrite {
      width: auto;
      display: table-cell;
      margin: 4px;
      background-color: white;
      color: #0079c1;
    }

  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ], function (Map, MapView, FeatureLayer) {
      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,

        extent: {
          // autocasts as new Extent()
          xmin: -9177811,
          ymin: 4247000,
          xmax: -9176791,
          ymax: 4247784,
          spatialReference: 102100
        }
      });

      /********************
       * Add feature layer
       ********************/
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/uHAHKfH1Z5ye1Oe0/ArcGIS/rest/services/MISIN_Browse_Data/FeatureServer/0"
      });

      map.add(featureLayer);

      var buttons = document.querySelectorAll("button");
      for (var i = 0, button = null;
        (button = buttons); i++) {
        button.addEventListener("click", onClick);
      }

      /********************
       * onClick
       ********************/
      function onClick(event) {
        var fieldNameTest = "OB_DENSITY";
        var fieldDomainCode = "1";
        var testReturn = GetCodedValueAndAlias(featureLayer, fieldNameTest, fieldDomainCode);
        console.log("Field alias for field name " + fieldNameTest + " = " + testReturn[0]);
        console.log("Field daomain value for code value " + fieldDomainCode + " = " + testReturn[1]);
      }

      /********************
       * GetCodedValueAndAlias
       ********************/
      function GetCodedValueAndAlias(layer, fieldName, fieldValue) {
        var returnValue = [fieldName, fieldValue];
        layer.fields.forEach(function (fld) {
          if (fld.name === fieldName) {
            returnValue[0] = fld.alias;
            cDomain = fld.domain;
            fieldType = fld.type;
            if (cDomain)
              cDomain.codedValues.forEach(function (cVal) {
                if (cVal.code === fieldValue)
                  returnValue[1] = cVal.name;
              });
          }
        });
        return returnValue;
      }
    });

  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="paneDiv" class="esri-widget">
    <button class="esri-button esri-button-overwrite">Run Coded Value Function</button>
  </div>
</body>

</html>

View solution in original post

18 Replies
AaronBooterbaugh
by
Occasional Contributor
‎08-18-2020 01:35 PM

Claire,

You will have to use the CodedValueDomain | ArcGIS API for JavaScript 4.16  in order to get at the values.

0 Kudos
AaronBooterbaugh
by
Occasional Contributor
‎08-18-2020 01:45 PM

Claire,

After more thought here is an easy way of getting the dmain values... This does a little more than asked...

function GetCodedValueAndAlias(layer, fieldName, fieldValue) {
                var returnValue = [fieldName, fieldValue];
                dojo.forEach(layer.fields, function (fld) {
                    if (fld.name === fieldName) {
                        returnValue[0] = fld.alias;
                        cDomain = fld.domain;
                        fieldType = fld.type;
                        if (fieldType === "esriFieldTypeDate" && fieldValue != null) {
                            var date = new Date(fieldValue);
                            console.log('The epoch date field value is : ' + fieldValue)
                            fieldValue = date.toString();
                            console.log('The date field value is : ' + fieldValue)
                            returnValue[1] = fieldValue;
                        }
                        if (cDomain)
                            dojo.forEach(cDomain.codedValues, function (cVal) {
                                if (cVal.code === fieldValue)
                                    returnValue[1] = cVal.name;
                            });
                    }
                });
                return returnValue;
            }
0 Kudos
Claire_Peterson
by
Occasional Contributor
‎08-18-2020 01:53 PM

Hi Aaron Booterbaugh‌ Thank you for this information - I believe I have seen a similar snippet before but I was unsure where this should be included so I was unable to get it to work correctly. I'm still a bit of a novice when it comes to JavaScript so it is taking me a bit longer to make sense of the code and wrap my head around it. I am assuming that nothing in this snippet needs to be modified and I keep it as is?

With the CodedValueDomain, is this a property of a Feature Layer or is this it's "own thing" like :

var feature = new FeatureLayer‍ ();‍
0 Kudos
AaronBooterbaugh
by
Occasional Contributor
‎08-18-2020 07:27 PM

Claire,

Below is a complete working htm document that you can use to create a file *.htm. This will output a domain value to the console of the web browser when you load it to a browser and click the button. I hope this helps so you can see the code work for yourself.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.16
  </title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.16/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #paneDiv {
      position: absolute;
      bottom: 40px;
      width: 100%;
      text-align: center;
      background-color: transparent;
      color: white;
    }

    .esri-button-overwrite {
      width: auto;
      display: table-cell;
      margin: 4px;
      background-color: white;
      color: #0079c1;
    }

  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ], function (Map, MapView, FeatureLayer) {
      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,

        extent: {
          // autocasts as new Extent()
          xmin: -9177811,
          ymin: 4247000,
          xmax: -9176791,
          ymax: 4247784,
          spatialReference: 102100
        }
      });

      /********************
       * Add feature layer
       ********************/
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/uHAHKfH1Z5ye1Oe0/ArcGIS/rest/services/MISIN_Browse_Data/FeatureServer/0"
      });

      map.add(featureLayer);

      var buttons = document.querySelectorAll("button");
      for (var i = 0, button = null;
        (button = buttons); i++) {
        button.addEventListener("click", onClick);
      }

      /********************
       * onClick
       ********************/
      function onClick(event) {
        var fieldNameTest = "OB_DENSITY";
        var fieldDomainCode = "1";
        var testReturn = GetCodedValueAndAlias(featureLayer, fieldNameTest, fieldDomainCode);
        console.log("Field alias for field name " + fieldNameTest + " = " + testReturn[0]);
        console.log("Field daomain value for code value " + fieldDomainCode + " = " + testReturn[1]);
      }

      /********************
       * GetCodedValueAndAlias
       ********************/
      function GetCodedValueAndAlias(layer, fieldName, fieldValue) {
        var returnValue = [fieldName, fieldValue];
        layer.fields.forEach(function (fld) {
          if (fld.name === fieldName) {
            returnValue[0] = fld.alias;
            cDomain = fld.domain;
            fieldType = fld.type;
            if (cDomain)
              cDomain.codedValues.forEach(function (cVal) {
                if (cVal.code === fieldValue)
                  returnValue[1] = cVal.name;
              });
          }
        });
        return returnValue;
      }
    });

  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="paneDiv" class="esri-widget">
    <button class="esri-button esri-button-overwrite">Run Coded Value Function</button>
  </div>
</body>

</html>
Claire_Peterson
by
Occasional Contributor
‎08-19-2020 05:31 AM

Aaron Booterbaugh‌ - this is INCREDIBLY helpful - thank you for your time and your help with this. I truly appreciate it.

Claire_Peterson
by
Occasional Contributor
‎08-19-2020 05:52 AM

Aaron Booterbaugh‌ - I switched it to the feature service that is being used for this project, modified the field name and it doesn't seem to work. It does look like maybe the JSON is a bit different because the service in the example uses subtypes.  I wonder if this has something to do with the feature layer not being public?

0 Kudos
AaronBooterbaugh
by
Occasional Contributor
‎08-19-2020 06:40 AM

Clarie,

Subtypes have to be handle a little differently. Here is a new file that does both. This is method is not documented in the ESRI API but this has worked for years. ESRI API has so much more than they document. This is a fully working app so you can see it on the console.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.16
  </title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.16/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #paneDiv {
      position: absolute;
      bottom: 40px;
      width: 100%;
      text-align: center;
      background-color: transparent;
      color: white;
    }

    .esri-button-overwrite {
      width: auto;
      display: table-cell;
      margin: 4px;
      background-color: white;
      color: #0079c1;
    }

  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ], function (Map, MapView, FeatureLayer) {
      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,

        extent: {
          // autocasts as new Extent()
          xmin: -9177811,
          ymin: 4247000,
          xmax: -9176791,
          ymax: 4247784,
          spatialReference: 102100
        }
      });

      /********************
       * Add feature layer
       ********************/
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/uHAHKfH1Z5ye1Oe0/ArcGIS/rest/services/MISIN_Browse_Data/FeatureServer/0"
      });

      map.add(featureLayer);

      var buttons = document.querySelectorAll("button");
      for (var i = 0, button = null;
        (button = buttons); i++) {
        button.addEventListener("click", onClick);
      }

      /********************
       * onClick
       ********************/
      function onClick(event) {
        var fieldNameTest = "OB_DENSITY";
        var fieldDomainCode = "1";
        var testReturn = GetCodedValueAndAlias(featureLayer, fieldNameTest, fieldDomainCode);
        console.log("Field alias for field name " + fieldNameTest + " = " + testReturn[0]);
        console.log("Field daomain value for code value " + fieldDomainCode + " = " + testReturn[1]);
        fieldNameTest = "KINGDOM";
        fieldSubTypeCode = 1;
        testReturn = GetSubtypeCodeValuesAndAlias(featureLayer, fieldNameTest, fieldSubTypeCode);
        console.log("Field alias for field name " + fieldNameTest + " = " + testReturn[0]);
        console.log("Field subtype value for code value " + fieldSubTypeCode + " = " + testReturn[1]);
      }

      /********************
       * GetCodedValueAndAlias
       ********************/
      function GetCodedValueAndAlias(layer, fieldName, fieldValue) {
        var returnValue = [fieldName, fieldValue];
        layer.fields.forEach(function (fld) {
          if (fld.name === fieldName) {
            returnValue[0] = fld.alias;
            cDomain = fld.domain;
            if (cDomain)
              cDomain.codedValues.forEach(function (cVal) {
                if (cVal.code === fieldValue)
                  returnValue[1] = cVal.name;
              });
          }
        });
        return returnValue;
      }
      /********************
       * GetCodedValueAndAlias
       ********************/
       function GetSubtypeCodeValuesAndAlias(layer,fieldName,fieldValue) {
        var returnValue = [fieldName, fieldValue];
        layer.sourceJSON.fields.forEach(function (fld) {
          if (fld.name === fieldName) {
            returnValue[0] = fld.alias;
            cSubtypes = layer.sourceJSON.subtypes;
            if (cSubtypes)
            cSubtypes.forEach(function (cVal) {
                if (cVal.code === fieldValue)
                  returnValue[1] = cVal.name;
              });
          }
        });
        return returnValue;
      }
    });

  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="paneDiv" class="esri-widget">
    <button class="esri-button esri-button-overwrite">Run Coded Value Function</button>
  </div>
</body>

</html>
Claire_Peterson
by
Occasional Contributor
‎08-19-2020 06:55 AM

Hi Aaron Booterbaugh‌ - Ok so the first snippet you shared should work with this other feature service layer (the aquatic treatments used in my first post). As soon as I change to URL and the field name that has a domain set on it. It just returns the number

0 Kudos
AaronBooterbaugh
by
Occasional Contributor
‎08-19-2020 07:00 AM

You will need to use the new code I sent. It looks a like but I added more functionality.

0 Kudos