topic Re: JS API 4.16 Coded Domain Values with QueryTask in ArcGIS JavaScript Maps SDK Questions

JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Sun, 12 Dec 2021 00:12:13 GMT

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);
       });
     });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Tue, 18 Aug 2020 20:35:40 GMT

Claire,

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

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Tue, 18 Aug 2020 20:45:00 GMT

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;

}

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Tue, 18 Aug 2020 20:53:44 GMT

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‍ ();‍

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Wed, 19 Aug 2020 02:27:56 GMT

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>

<title>

Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.16

</title>

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

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>

<button class="esri-button esri-button-overwrite">Run Coded Value Function</button>

</div>

</body>

</html>

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Wed, 19 Aug 2020 12:31:43 GMT

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

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Wed, 19 Aug 2020 12:52:06 GMT

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?

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Wed, 19 Aug 2020 13:40:52 GMT

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>

<title>

Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.16

</title>

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

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>

<button class="esri-button esri-button-overwrite">Run Coded Value Function</button>

</div>

</body>

</html>

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Wed, 19 Aug 2020 13:55:58 GMT

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

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Wed, 19 Aug 2020 14:00:36 GMT

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

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Wed, 19 Aug 2020 14:07:00 GMT

Aaron Booterbaugh‌ - still doesn't work

using this service URL works just fine: https://services.arcgis.com/uHAHKfH1Z5ye1Oe0/ArcGIS/rest/services/MISIN_Browse_Data/FeatureServer/0

but when I change it to this URL and modify the fieldNameTest variable , it does not:

https://services.arcgis.com/uHAHKfH1Z5ye1Oe0/arcgis/rest/services/misin_treatments_aquatic/FeatureServer/0

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Wed, 19 Aug 2020 14:11:06 GMT

Claire,

A subtype code value is not a string but an integer. Remove the quotes...

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]);

}

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Wed, 19 Aug 2020 14:19:13 GMT

Aaron Booterbaugh‌ That worked! Thank you so, so much.

Now I am wondering, seeing that the domain code is hard coded - how would it handle returning the domain value based on the feature that the query task brings back? It would change depending on which feature is selected.

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Wed, 19 Aug 2020 14:35:50 GMT

Claire,

I would not be able to say. I would need to understand the goal of what you are trying to do. Are you trying to change the values in a popup that shows a single feature? Or are you trying to change the values of an entire table view of values? The sample I gave just works on fields that you know have domains or Subtype Codes. It would fail on date type fields if passed in.

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Wed, 19 Aug 2020 14:43:40 GMT

Aaron Booterbaugh‌ I modified my last reply because I was able to get the function to execute as soon as the map loads.

The primary goal is we have the web app, a user can click on a feature and then clicks on a link within the feature's popup that would bring them to this map page - it only shows the selected feature and a few selected attributes in a popuptemplate off to the side. There are two fields that use domain values and those would change based on the feature that is returned by the queryTask. Below is an image of the finished map page and Chemical Used & Weather Conditions are the two fields that have coded domain values (chemical used as 40+ different domains).

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Wed, 19 Aug 2020 15:05:12 GMT

I would change the values in the result.features. Doing this will take some effort to understand how to do it. The result.features will have the all the field names and values. In the case you sent you would pass in the non alias name of the field for Chemical Used then the value 5 to get the real value then change the result.feature itself to reflect the new data you want. I hope that makes sense. If you use Chrome or Edge-C browser you can CTRL+SHIFT+I and go to the Source Tab to see the code. You can place stops in the code and then look at the variables that you then can change them. The result.features is a variable that you can look at and see how to change it. Below is an image of my browser I use Microsoft Edge Chromium version. Chrome can be used the same way.

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Wed, 19 Aug 2020 15:19:41 GMT

Aaron Booterbaugh‌ - thank you, I will take a look at this a bit more and see if I can figure out what to do. I appreciate the screenshot and all of your help with this.

Re: JS API 4.16 Coded Domain Values with QueryTask

Claire_Peterson — Tue, 25 Aug 2020 14:44:20 GMT

Aaron Booterbaugh‌ - thanks again for your help with this. I ended up modifying my code a bit and changing it to a query on a feature layer versus a queryTask. This change returned the domain values in my popup!

Re: JS API 4.16 Coded Domain Values with QueryTask

AaronBooterbaugh — Tue, 25 Aug 2020 14:47:16 GMT

Cool