topic Re: How to turn on label after using query widget in ArcGIS Web AppBuilder Questions

How to turn on label after using query widget

TUANNGUYEN1 — Mon, 14 May 2018 19:19:49 GMT

I want to show label for feature points after a query is executed using the Query Widget.

For the query widget, I edited for following code in the widget.js file:

//create a FeatureLayer
_createNewResultLayer: function(currentAttrs, queryName){
var resultLayer = null;
var renderer = null;
var taskIndex = currentAttrs.queryTr.taskIndex;

var layerInfo = lang.clone(currentAttrs.layerInfo);

//override layerInfo
layerInfo.name = queryName;
//ImageServiceLayer doesn't have drawingInfo
if (!layerInfo.drawingInfo) {
layerInfo.drawingInfo = {
"showLabels":true
};
}

layerInfo.drawingInfo.transparency = 0;
layerInfo.minScale = 0;
layerInfo.maxScale = 0;
layerInfo.effectiveMinScale = 0;
layerInfo.effectiveMaxScale = 0;
layerInfo.defaultVisibility = true;
delete layerInfo.extent;

//only keep necessary fields
var singleQueryLoader = new SingleQueryLoader(this.map, currentAttrs);
var necessaryFieldNames = singleQueryLoader.getOutputFields();
layerInfo.fields = array.filter(layerInfo.fields, lang.hitch(this, function(fieldInfo) {
return necessaryFieldNames.indexOf(fieldInfo.name) >= 0;
}));
var featureCollection = {
layerDefinition: layerInfo,
featureSet: null
};

//For now, we should not add the FeatureLayer into map.
resultLayer = new FeatureLayer(featureCollection,{
showLabels: true
});

// resultLayer.keepResultsOnMapAfterCloseWidget = currentAttrs.config.keepResultsOnMapAfterCloseWidget;
//set taskIndex for resutlLayer
resultLayer._queryWidgetTaskIndex = taskIndex;
//set popupTemplate
var popupInfo = lang.clone(currentAttrs.config.popupInfo1);
var popupTemplate = new PopupTemplate(popupInfo);
console.log(popupInfo);
if(popupInfo.showAttachments){
var url = currentAttrs.config.url;
var objectIdField = currentAttrs.config.objectIdField;
queryUtils.overridePopupTemplateMethodGetAttachments(popupTemplate, url, objectIdField);
}
resultLayer.setInfoTemplate(popupTemplate);

var labelingInfo= lang.clone(currentAttrs.config.labelingInfo1);
console.log(labelingInfo)
var labelClass = new LabelClass(labelingInfo);

resultLayer.labelsVisible = true;
resultLayer.labelingInfo = [labelClass];
resultLayer.setLabelingInfo([labelClass]);

currentAttrs.query.resultLayer = resultLayer;

Re: How to turn on label after using query widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:44:20 GMT

Tuan,

Here is code I added to the query widget to enable labels for the result. You need to add the LabelClass and TextSymbol classes:

...
    'jimu/LayerInfos/LayerInfos',
    'esri/symbols/TextSymbol',
    'esri/layers/LabelClass',
    'jimu/dijit/LoadingShelter',
    'dijit/form/Select'
  ],
  function(on, query, Deferred, lang, html, array, all, declare, _WidgetsInTemplateMixin, jimuUtils, BaseWidget,
    MapManager, FilterUtils, Message, esriLang, esriRequest, symbolJsonUtils, FeatureLayer, PopupTemplate,
    SimpleRenderer, TaskSetting, SingleQueryLoader, SingleQueryResult, queryUtils, LayerInfos,
    TextSymbol, LabelClass) {
...‍‍‍‍‍‍‍‍‍‍‍‍

I am hard coding the label field in my example.

      //create a FeatureLayer
      _createNewResultLayer: function(currentAttrs, queryName){
        var resultLayer = null;
        var renderer = null;
        var taskIndex = currentAttrs.queryTr.taskIndex;

        var layerInfo = lang.clone(currentAttrs.layerInfo);

        //override layerInfo
        layerInfo.name = queryName;
        //ImageServiceLayer doesn't have drawingInfo
        if (!layerInfo.drawingInfo) {
          layerInfo.drawingInfo = {};
        }

        layerInfo.drawingInfo.transparency = 0;
        layerInfo.minScale = 0;
        layerInfo.maxScale = 0;
        layerInfo.effectiveMinScale = 0;
        layerInfo.effectiveMaxScale = 0;
        layerInfo.defaultVisibility = true;
        delete layerInfo.extent;

        //only keep necessary fields
        var singleQueryLoader = new SingleQueryLoader(this.map, currentAttrs);
        var necessaryFieldNames = singleQueryLoader.getOutputFields();
        layerInfo.fields = array.filter(layerInfo.fields, lang.hitch(this, function(fieldInfo) {
          return necessaryFieldNames.indexOf(fieldInfo.name) >= 0;
        }));
        var featureCollection = {
          layerDefinition: layerInfo,
          featureSet: null
        };

        //For now, we should not add the FeatureLayer into map.
        resultLayer = new FeatureLayer(featureCollection);
        //set taskIndex for resutlLayer
        resultLayer._queryWidgetTaskIndex = taskIndex;
        //set popupTemplate
        var popupInfo = lang.clone(currentAttrs.config.popupInfo);
        var popupTemplate = new PopupTemplate(popupInfo);
        if(popupInfo.showAttachments){
          var url = currentAttrs.config.url;
          var objectIdField = currentAttrs.config.objectIdField;
          queryUtils.overridePopupTemplateMethodGetAttachments(popupTemplate, url, objectIdField);
        }
        resultLayer.setInfoTemplate(popupTemplate);

        var devLabel = new TextSymbol()
        devLabel.font.setSize("14pt");
        devLabel.font.setFamily("arial");

        //this is the very least of what should be set within the JSON
        var json = {
          "labelExpressionInfo": {"value": "{DESCRIPTION}"}
        };

        //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
        var labelClass = new LabelClass(json);
        labelClass.symbol = devLabel; // symbol also can be set in LabelClass' json
        resultLayer.setLabelingInfo([labelClass]);

        currentAttrs.query.resultLayer = resultLayer;

        //set renderer
        //if the layer is a table, resultsSymbol will be null
        if(!queryUtils.isTable(currentAttrs.layerInfo)){
          if(!currentAttrs.config.useLayerSymbol && currentAttrs.config.resultsSymbol){
            var symbol = symbolJsonUtils.fromJson(currentAttrs.config.resultsSymbol);
            renderer = new SimpleRenderer(symbol);
            resultLayer.setRenderer(renderer);
          }
        }

        return resultLayer;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

To make the label show without clicking on the LayerList show label option you would have to add the showLabels map option in the main config:

"mapOptions": {"showLabels": true},‍

Re: How to turn on label after using query widget

TUANNGUYEN1 — Tue, 15 May 2018 19:14:41 GMT

Hi Robert Scheitlin,

Thank you for the quick response and I appreciate for your help. Your code works perfectly. But I have another question, the Widget.js file gets data from config_query.json file. What do I need to add in or change in Widget.js file?

{
"queries": [
{
"url": "https://oehsportal.wvdhhr.org/arcgis/rest/services/WVPSSC/MapServer/0",
"name": "Source Water Protection PSSC",
"icon": "",
"filter": {
"logicalOperator": "AND",
"parts": [],
"expr": "1=1"
},
"showSQL": true,
"spatialFilter": {
"currentMapExtent": null,
"drawing": {
"default": false,
"geometryTypes": [
"POINT",
"EXTENT",
"CIRCLE",
"FREEHAND_POLYGON"
],
"buffer": null
},
"useFeatures": {
"default": true,
"relationships": [
{
"relationship": "SPATIAL_REL_INTERSECTS",
"label": "intersect"
}
],
"buffer": null
},
"fullLayerExtent": null
},
"popupInfo": {
"title": "{SITE_NAME}",
"fieldInfos": [
{
"fieldName": "SITE_NAME",
"label": "SITE NAME",
"tooltip": "Double Check",
"visible": true,
"format": null,
"stringFieldOption": "textbox"
},
{
"fieldName": "SITEDESCRIPTION",
"label": "SITE DESCRIPTION",
"tooltip": "",
"visible": true,
"format": null,
"stringFieldOption": "textbox"
},
{
"fieldName": "LATITUDE",
"label": "LATITUDE",
"tooltip": "",
"visible": true,
"format": {
"places": 6,
"digitSeparator": true
},
"stringFieldOption": "textbox"
},
{
"fieldName": "LONGITUDE",
"label": "LONGITUDE",
"tooltip": "",
"visible": true,
"format": {
"places": 6,
"digitSeparator": true
},
"stringFieldOption": "textbox"
},
{
"fieldName": "DATE_",
"label": "DATE",
"tooltip": "",
"visible": true,
"format": {
"dateFormat": "longMonthDayYear"
},
"stringFieldOption": "textbox"
},

{
"fieldName": "SOURCE_CAT",
"label": "SOURCE CAT",
"tooltip": "",
"visible": true,
"format": null,
"stringFieldOption": "textbox"
},
{
"fieldName": "ID",
"label": "ID",
"tooltip": "",
"visible": true,
"format": null,
"stringFieldOption": "textbox"
}
],
"description": null,
"showAttachments": false,
"mediaInfos": [],
"readFromWebMap": false
},
"labelingInfo": {

"labelExpression": "[ID]",
"labelExpressionInfo": {"value": "{ID}"},
"useCodedValues": false,
"maxScale": 0,
"minScale": 0,
"labelPlacement": "esriServerPointLabelPlacementAboveLeft"

},
"orderByFields": [],
"useLayerSymbol": false,
"resultsSymbol": {
"color": [
0,
0,
128,
128
],
"size": 14,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [
0,
0,
128,
255
],
"width": 0.75,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"keepResultsOnMapAfterCloseWidget": false,
"enableExport": true,
"singleResultLayer": true,
"webMapLayerId": null
},

Re: How to turn on label after using query widget

RobertScheitlin__GISP — Tue, 15 May 2018 20:09:42 GMT

Tuan,

I am not understanding your question. What do you need to get from the widgets config file?

Re: How to turn on label after using query widget

AlbertoCañivano — Sun, 12 Dec 2021 00:44:23 GMT

Good morning, Robert
I don't know if the post is too old to ask a question about it.
I want to do something similar in my query widget but the above doesn't work.

The problem is that only using "Textsymbol" it gives me undefined problems

var devLabel = new TextSymbol()
devLabel.font.setSize("14pt");
devLabel.font.setFamily("arial");
‍
‍
‍
‍‍‍‍‍‍‍‍‍‍‍‍‍

I have done the following:

...'jimu/LayerInfos/LayerInfos',
    'jimu/dijit/LoadingIndicator',
    'dijit/form/Select',
    'esri/symbols/TextSymbol',
    'esri/layers/LabelClass',
    "esri/symbols/Font"

  ],
  function(on, query, Deferred, lang, html, array, all, declare, _WidgetsInTemplateMixin, jimuUtils, BaseWidget,
    MapManager, FilterUtils, Message, jimuSymUtils, esriLang, esriRequest, symbolJsonUtils, FeatureLayer, PopupTemplate,
    SimpleRenderer, TaskSetting, SingleQueryLoader, SingleQueryResult, queryUtils, LayerInfos,TextSymbol, LabelClass, Font) {‍‍‍‍‍‍‍‍‍‍‍

And...

var devLabel = new TextSymbol()
var font = new Font();
font.setSize("14pt");
font.setFamily("arial");
devLabel.setFont(font);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The console gives me back the errors

-TypeError: font.setFamily is not a function

and if I comment "SetFamily()", I get the same error for the sentFont() method

Do you know what might be going on?

In line 55 of the code, I understand that the value DESCRIPTION I have to change the attribute of my entity that I want to show, right?

 //this is the very least of what should be set within the JSON
        var json = {
          "labelExpressionInfo": {"value": "{DESCRIPTION}"}
        };‍‍‍‍

Thank you!

Re: How to turn on label after using query widget

KenBuja — Sun, 12 Dec 2021 00:44:26 GMT

The function arguments in your code fragment aren't matching the order of the defined modules. These must be in the same order.

...'jimu/LayerInfos/LayerInfos',
    'esri/symbols/TextSymbol',
    'esri/layers/LabelClass',
    "esri/symbols/Font",
    'jimu/dijit/LoadingIndicator',
    'dijit/form/Select'

  ],
  function(on, query, Deferred, lang, html, array, all, declare, _WidgetsInTemplateMixin, jimuUtils, BaseWidget,
    MapManager, FilterUtils, Message, jimuSymUtils, esriLang, esriRequest, symbolJsonUtils, FeatureLayer, PopupTemplate,
    SimpleRenderer, TaskSetting, SingleQueryLoader, SingleQueryResult, queryUtils, LayerInfos,TextSymbol, LabelClass, Font) {
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to turn on label after using query widget

AlbertoCañivano — Fri, 03 May 2019 12:44:06 GMT

That's it!

Do you know any way to make the label appear automatically after selection? without having to activate it?

Thank you very much.