topic Webapp builder Infowindow not showing content. in Web AppBuilder Custom Widgets Questions

Webapp builder Infowindow not showing content.

BrettKruger — Mon, 03 Oct 2016 08:31:43 GMT

Hi Guys

I have a custom basic widget to calculate the lengths of a polygon. The calculations seems to be fine but I cannott get the content to display in the infowindow. The setTitle seems to work fine but as soon as I try to set the content it shows nothing... any ideas?

my code:

define(['dojo/_base/declare', 'jimu/BaseWidget','esri/tasks/IdentifyTask',
'esri/tasks/IdentifyParameters',"esri/tasks/GeometryService", "esri/InfoTemplate"],
function(declare, BaseWidget, IdentifyTask, IdentifyParameters, GeometryService, InfoTemplate) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {

// Custom widget code goes here

    baseClass: 'Dimension',
    // this property is set by the framework when widget is loaded.
    // name: 'Dimension',
    // add additional properties here

    //methods to communication with app container:
    postCreate: function() {
      this.inherited(arguments);
      console.log('Dimension::postCreate');
      mainMap = this.map;
      var firstGraphic = null;
      console.log(mainMap.infoWindow);
      //user clicked point
       mainMap.on("click", function (evt) {
           //get site name clicked with id
           //initialize identity task
           identifyTask = new IdentifyTask("*/arcgis/rest/services/Merafong/Merafong_base/MapServer");
           identifyParams = new IdentifyParameters();
            identifyParams.tolerance = 3;
            identifyParams.returnGeometry = true;
            identifyParams.layerIds = [43];
            identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
            identifyParams.width = mainMap.width;
            identifyParams.height = mainMap.height;
            identifyParams.geometry = evt.mapPoint;
           identifyParams.mapExtent = mainMap.extent;

           var results = new Array();
           var currentClick = evt.mapPoint;
           //run identify task results
           identifyTask.execute(identifyParams, function (idResults) {
           console.log(mainMap);
           len = idResults[0].feature.geometry.rings[0].length;
           //calculate lengths between each vertex
           for (var i = 0; i < len; i++) {
                       var p1 = idResults[0].feature.geometry.rings[0]
                       if (i == len - 1){
                           var p2 = idResults[0].feature.geometry.rings[0][0]
                           }
                       else {
                           var p2 = idResults[0].feature.geometry.rings[0][i + 1]
                       }
                       var polyline = {
                           "paths": [[p1, p2]],
                           "spatialReference":{"wkid":idResults[0].feature.geometry.spatialReference.wkid}
                       };
                       polyline = new esri.geometry.Polyline(polyline);
                       polyline = esri.geometry.webMercatorToGeographic(polyline);
                       results = esri.geometry.geodesicLengths([polyline],esri.Units.METERS);
                       console.log(results);
               }
            });
           mainMap.infoWindow.setTitle("Dimension Results");
           var content = "<table border='1'><th><td>Erf Dimensions (Meter) </td></th>";
           for (var i = 0; i < results.length - 1; i++){
               content += "<tr><td>" + results + "</td></tr>";
           }
           content += "</table>";
           mainMap.infoWindow.setContent("My infoWindow Content");
           mainMap.infoWindow.show(mainMap.toScreen(currentClick),             mainMap.getInfoWindowAnchor(mainMap.toScreen(currentClick)));
       });
    }

});

Re: Webapp builder Infowindow not showing content.

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:11:15 GMT

Brett,

I have updated several things in your code (changed your mixture of Legacy and AMD to just AMD coding style), updated your map infowindow stuff to be included in your identify deferred (this was your main issue), changed the way you were using arrays, etc:

define(['dojo/_base/declare', 'jimu/BaseWidget', 'esri/tasks/IdentifyTask',
        'esri/tasks/IdentifyParameters', 'esri/tasks/GeometryService', 'esri/geometry/Polyline',
        'esri/geometry/webMercatorUtils', 'esri/geometry/geodesicUtils', 'esri/units', 'dojo/_base/lang'
    ],
    function(declare, BaseWidget, IdentifyTask, IdentifyParameters, GeometryService,
        Polyline, webMercatorUtils, geodesicUtils, Units, lang) {
        //To create a widget, you need to derive from BaseWidget.
        return declare([BaseWidget], {

            // Custom widget code goes here

            baseClass: 'Dimension',
            // this property is set by the framework when widget is loaded.
            // name: 'Dimension',
            // add additional properties here

            //methods to communication with app container:
            postCreate: function() {
                this.inherited(arguments);
                console.log('Dimension::postCreate');
                //user clicked point
                this.own(this.map.on("click", lang.hitch(this, function(evt) {
                    //get site name clicked with id
                    //initialize identity task
                    identifyTask = new IdentifyTask("*/arcgis/rest/services/Merafong/Merafong_base/MapServer");
                    identifyParams = new IdentifyParameters();
                    identifyParams.tolerance = 3;
                    identifyParams.returnGeometry = true;
                    identifyParams.layerIds = [43];
                    identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
                    identifyParams.width = this.map.width;
                    identifyParams.height = this.map.height;
                    identifyParams.geometry = evt.mapPoint;
                    identifyParams.mapExtent = this.map.extent;

                    var results = [];
                    var currentClick = evt.mapPoint;
                    //run identify task results
                    identifyTask.execute(identifyParams, lang.hitch(this, function(idResults) {
                        len = idResults[0].feature.geometry.rings[0].length;
                        //calculate lengths between each vertex
                        for (var i = 0; i < len; i++) {
                            var p1 = idResults[0].feature.geometry.rings[0][i]
                            if (i == len - 1) {
                                var p2 = idResults[0].feature.geometry.rings[0][0]
                            } else {
                                var p2 = idResults[0].feature.geometry.rings[0][i + 1]
                            }
                            var polyline = {
                                "paths": [
                                    [p1, p2]
                                ],
                                "spatialReference": {
                                    "wkid": idResults[0].feature.geometry.spatialReference.wkid
                                }
                            };
                            polyline = new Polyline(polyline);
                            polyline = webMercatorUtils.webMercatorToGeographic(polyline, true);
                            results.push(geodesicUtils.geodesicLengths([polyline], Units.METERS));
                            console.log(results[i]);
                        }
                        this.map.infoWindow.setTitle("Dimension Results");
                        var content = "<table border='1'><th><td>Erf Dimensions (Meter) </td></th>";
                        for (var i = 0; i < results.length - 1; i++) {
                            content += "<tr><td>" + results[i] + "</td></tr>";
                        }
                        content += "</table>";
                        this.map.infoWindow.setContent(content);
                        this.map.infoWindow.show(currentClick);
                    }));
                })));
            }
        });
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Webapp builder Infowindow not showing content.

BrettKruger — Tue, 04 Oct 2016 07:26:33 GMT

Hi Robert

Thanks a lot for getting back to me and providing me with the correct code. Coming from a .NET background my JS coding style is a bit behind especially when it comes to legacy vs AMD coding style.

I need to get into the AMD style it seems, thanks again.

Just another question Robert, After I have closed the widget the onMap click event still seems to be firing. How could I stop that event when the widget is closed? I know you have the 1 method which runs when the widget is closed but I have no idea how to stop the onclick event?

Brett Kruger

Re: Webapp builder Infowindow not showing content.

RobertScheitlin__GISP — Tue, 04 Oct 2016 13:50:05 GMT

Brett,

For that you need to assign a var to the map click event handler:

this.own(this.mapClickEvent = this.map.on("click", lang.hitch(this, function(evt) {‍

then in the widget close function call:

this.mapClickEvent.remove();‍