topic Re: Convert Flex pop-up to WAB - 2 questions in Web AppBuilder Custom Widgets Questions

Convert Flex pop-up to WAB - 2 questions

MegPeterson — Fri, 20 Nov 2015 19:55:55 GMT

Hi all -

I have a popup from my old Flex site that I would like to re-create in WAB. It's displayed below and was configured using the <description> tag with <![CDATA[ {NAME}<br> <img src="assets'images\popup_icons\{I_bike}"> <img src="assets'images\popup_icons\{I_hike}">, etc etc.>

to pull in image icons referenced in the data table.

Question #1: I'm trying to configure the pop-up in the web map using the "custom attribute display" option, but I don't see a way to display the icons horizontally referencing an <img> tag, or via a virtual directory. Is that possible to do? And if not - egads, where would I begin to recreate the popup? The images represent Yes or No values for whether the activity is available at that location.

Question #2: Ideally I'd like to configure the popup to be queried for only the activities available at each location, similar to the Park Locator Local Government template. This seems more extensive with coding, but if anyone has suggestions on where to begin or what forums to read and get started, I'd appreciate the guidance.

Thank you. - Meg

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Fri, 20 Nov 2015 20:13:39 GMT

Meg,

Is the service that feeds this popup public?

Is it a field in the data that is null or not that defines if that particular service is available?

Re: Convert Flex pop-up to WAB - 2 questions

MegPeterson — Fri, 20 Nov 2015 20:57:42 GMT

Hi Robert -

The service is not public. The data table looks like this though and there are no Null values.

The icons shown in the popup above reference these fields.

Icons are displayed based on the gif image value in each field, referencing them in the assest\images folder in flex or via a virtual directory. i_bile_35.gif displays a white icon for the activity is available; i_no_bike_35.gif displays a grey icon that the activity is not available.

There are also corresponding fields with Y / N values. Ideally I'd like the popup to only reflect the Y values but display the icon images.

Is there a way in the WAB to develop the mapclick popup (infowindow?), or should it be set in the web map? I'm felt I was just getting a handle on Flex and am now treading water in WAB. Thanks.

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Sat, 21 Nov 2015 16:47:21 GMT

Meg,

Is this going to be a one app deal or are you going to want to make it reusable in more than one app? If it is a one app deal then I can help provide code that you would add the mapManager.js to set the infoWidow content using click event for that particular layer. If it will be something that will need to be added to multiple apps the development of a custom non panel widget.

It would greatly help if you could provide a a sample set of data for dev and testing purposes.

Re: Convert Flex pop-up to WAB - 2 questions

MegPeterson — Mon, 23 Nov 2015 20:06:46 GMT

It's a one app deal (for now!). I'll send you a sample set of the data tomorrow when I'm back in the office.

Thank you++

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:19:06 GMT

Meg,

OK, I have completed the code additions for the MapManager.js for adding the custom infoWindow for your parks layer:

There are three new functions and one line of code to add to an existing function in MapManager.js.

New functions to add:

      _getParksLayer: function() {
        require(["jimu/LayerInfos/LayerInfos"], lang.hitch(this, function(LayerInfos){
          if (this.map.itemId) {
            LayerInfos.getInstance(this.map, this.map.itemInfo)
            .then(lang.hitch(this, function(operLayerInfos) {
              this.operLayerInfos = operLayerInfos;
              array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
                console.info(layerInfo);
                if(layerInfo.title === 'ParksFinder'){
                  this._setupParksPopup(layerInfo);
                }
              }, this);
            }));
          } else {
            var itemInfo = this._obtainMapLayers();
            LayerInfos.getInstance(this.map, itemInfo)
            .then(lang.hitch(this, function(operLayerInfos) {
              this.operLayerInfos = operLayerInfos;
              array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
                console.info(layerInfo);
                if(layerInfo.title === 'ParksFinder'){
                  this._setupParksPopup(layerInfo);
                }
              }, this);
            }));
          }
        }));
      },

      _setupParksPopup: function(LayerInfo) {
        var infoTemplate = new InfoTemplate();
        infoTemplate.setTitle("Park Name: ${PARK}");
        var templateString = "<b>${NAME}</b><br/>" +
            "<b>Park Website: </b>${PARK_URL:convertLink}<br/>" +
            "<b>Park Map: </b>${PARK_MAP:convertLink}<br/><br/>" +
            "${I_BIKE:checkAvailable}" +
            "${I_WALK:checkAvailable}" +
            "${I_SWIMP:checkAvailable}" +
            "${I_SWIML:checkAvailable}" +
            "${I_DOGWALK:checkAvailable}" +
            "${I_FISH:checkAvailable}" +
            "${I_INTERP:checkAvailable}" +
            "${I_HORSE:checkAvailable}" +
            "${I_PICNIC:checkAvailable}" +
            "${I_RESTRM:checkAvailable}" +
            "${I_PLAYGRD:checkAvailable}" +
            "${I_BOAT:checkAvailable}" +
            "${I_GOLF:checkAvailable}" +
            "${I_ARCHERY:checkAvailable}" +
            "${I_GCAMP:checkAvailable}" +
            "${I_BPCAMP:checkAvailable}" +
            "${I_FCAMP:checkAvailable}";
        infoTemplate.setContent(templateString);
        checkAvailable = function (value, key, data) {
          var boolTest = value.toLowerCase().indexOf('_no_') > 0 ? false : true;
          var retRslt = "";
          if(boolTest){
            retRslt = "<img src='http://gislap183/ParkIcons/" + value + "'/> ";
          }
          return retRslt;
        };
        convertLink = function (value, key, data) {
          var retRslt = "", linkAlias = "";
          switch (key){
            case 'PARK_URL':{
              linkAlias = "More Info";
              break;
            }
            case 'PARK_MAP':{
              linkAlias = "Print Park Map";
              break;
            }
          }
          retRslt = "<a href='" + value + "' target='_blank'>" + linkAlias + "</a>";
          return retRslt;
        };
        LayerInfo.layerObject.setInfoTemplate(infoTemplate);
      },

      _obtainMapLayers: function() {
        // summary:
        //    obtain basemap layers and operational layers if the map is not webmap.
        var basemapLayers = [],
          operLayers = [];
        // emulate a webmapItemInfo.
        var retObj = {
          itemData: {
            baseMap: {
              baseMapLayers: []
            },
            operationalLayers: []
          }
        };

        array.forEach(this.map.graphicsLayerIds, function(layerId) {
          var layer = this.map.getLayer(layerId);
          if (layer.isOperationalLayer) {
            operLayers.push({
              layerObject: layer,
              title: layer.label || layer.title || layer.name || layer.id || " ",
              id: layer.id || " "
            });
          }
        }, this);
        array.forEach(this.map.layerIds, function(layerId) {
          var layer = this.map.getLayer(layerId);
          if (layer.isOperationalLayer) {
            operLayers.push({
              layerObject: layer,
              title: layer.label || layer.title || layer.name || layer.id || " ",
              id: layer.id || " "
            });
          } else {
            basemapLayers.push({
              layerObject: layer,
              id: layer.id || " "
            });
          }
        }, this);

        retObj.itemData.baseMap.baseMapLayers = basemapLayers;
        retObj.itemData.operationalLayers = operLayers;
        return retObj;
      },

Code to add to _publishMapEvent function is on line 19:

      _publishMapEvent: function(map) {
        //add this property for debug purpose
        window._viewerMap = map;
        if (this.loading) {
          this.loading.destroy();
        }

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map);
        }
        this._getParksLayer();
      },

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:19:08 GMT

Meg,

OK, I have completed the code additions for the MapManager.js for adding the custom infoWindow for your parks layer:

There are three new functions and one line of code to add to an existing function in MapManager.js.

New functions to add:

      _getParksLayer: function() {
        require(["jimu/LayerInfos/LayerInfos"], lang.hitch(this, function(LayerInfos){
          if (this.map.itemId) {
            LayerInfos.getInstance(this.map, this.map.itemInfo)
            .then(lang.hitch(this, function(operLayerInfos) {
              this.operLayerInfos = operLayerInfos;
              array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
                console.info(layerInfo);
                if(layerInfo.title === 'ParksFinder'){
                  this._setupParksPopup(layerInfo);
                }
              }, this);
            }));
          } else {
            var itemInfo = this._obtainMapLayers();
            LayerInfos.getInstance(this.map, itemInfo)
            .then(lang.hitch(this, function(operLayerInfos) {
              this.operLayerInfos = operLayerInfos;
              array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
                console.info(layerInfo);
                if(layerInfo.title === 'ParksFinder'){
                  this._setupParksPopup(layerInfo);
                }
              }, this);
            }));
          }
        }));
      },

      _setupParksPopup: function(LayerInfo) {
        var infoTemplate = new InfoTemplate();
        infoTemplate.setTitle("Park Name: ${PARK}");
        var templateString = "<b>${NAME}</b><br/>" +
            "<b>Park Website: </b>${PARK_URL:convertLink}<br/>" +
            "<b>Park Map: </b>${PARK_MAP:convertLink}<br/><br/>" +
            "${I_BIKE:checkAvailable}" +
            "${I_WALK:checkAvailable}" +
            "${I_SWIMP:checkAvailable}" +
            "${I_SWIML:checkAvailable}" +
            "${I_DOGWALK:checkAvailable}" +
            "${I_FISH:checkAvailable}" +
            "${I_INTERP:checkAvailable}" +
            "${I_HORSE:checkAvailable}" +
            "${I_PICNIC:checkAvailable}" +
            "${I_RESTRM:checkAvailable}" +
            "${I_PLAYGRD:checkAvailable}" +
            "${I_BOAT:checkAvailable}" +
            "${I_GOLF:checkAvailable}" +
            "${I_ARCHERY:checkAvailable}" +
            "${I_GCAMP:checkAvailable}" +
            "${I_BPCAMP:checkAvailable}" +
            "${I_FCAMP:checkAvailable}";
        infoTemplate.setContent(templateString);
        checkAvailable = function (value, key, data) {
          var boolTest = value.toLowerCase().indexOf('_no_') > 0 ? false : true;
          var retRslt = "";
          if(boolTest){
            retRslt = "<img src='http://gislap183/ParkIcons/" + value + "'/> ";
          }
          return retRslt;
        };
        convertLink = function (value, key, data) {
          var retRslt = "", linkAlias = "";
          switch (key){
            case 'PARK_URL':{
              linkAlias = "More Info";
              break;
            }
            case 'PARK_MAP':{
              linkAlias = "Print Park Map";
              break;
            }
          }
          retRslt = "<a href='" + value + "' target='_blank'>" + linkAlias + "</a>";
          return retRslt;
        };
        LayerInfo.layerObject.setInfoTemplate(infoTemplate);
      },

      _obtainMapLayers: function() {
        // summary:
        //    obtain basemap layers and operational layers if the map is not webmap.
        var basemapLayers = [],
          operLayers = [];
        // emulate a webmapItemInfo.
        var retObj = {
          itemData: {
            baseMap: {
              baseMapLayers: []
            },
            operationalLayers: []
          }
        };

        array.forEach(this.map.graphicsLayerIds, function(layerId) {
          var layer = this.map.getLayer(layerId);
          if (layer.isOperationalLayer) {
            operLayers.push({
              layerObject: layer,
              title: layer.label || layer.title || layer.name || layer.id || " ",
              id: layer.id || " "
            });
          }
        }, this);
        array.forEach(this.map.layerIds, function(layerId) {
          var layer = this.map.getLayer(layerId);
          if (layer.isOperationalLayer) {
            operLayers.push({
              layerObject: layer,
              title: layer.label || layer.title || layer.name || layer.id || " ",
              id: layer.id || " "
            });
          } else {
            basemapLayers.push({
              layerObject: layer,
              id: layer.id || " "
            });
          }
        }, this);

        retObj.itemData.baseMap.baseMapLayers = basemapLayers;
        retObj.itemData.operationalLayers = operLayers;
        return retObj;
      },

Code to add to _publishMapEvent function is on line 19:

      _publishMapEvent: function(map) {
        //add this property for debug purpose
        window._viewerMap = map;
        if (this.loading) {
          this.loading.destroy();
        }

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map);
        }
        this._getParksLayer();
      },

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Wed, 25 Nov 2015 17:59:19 GMT

Example screenshot:

Re: Convert Flex pop-up to WAB - 2 questions

MegPeterson — Wed, 25 Nov 2015 21:44:29 GMT

Robert - You are invaluable! I'm hoping to load this before taking off today. If not, I'll check in on Monday. A million thanks for your time - I really can't say that enough.

Re: Convert Flex pop-up to WAB - 2 questions

RickeyFight — Wed, 25 Nov 2015 21:58:02 GMT

Meg,

If you get this working can you post a link.

I have the esri solutions parks viewer and am thinking about moving it over to WAB.

Thank you

Re: Convert Flex pop-up to WAB - 2 questions

MegPeterson — Wed, 25 Nov 2015 22:29:56 GMT

quick question - is this url in the _setupParksPopup a virtual directory?

retRslt = "<img src='http://gislap183/ParkIcons/" + value + "'/> ";

Re: Convert Flex pop-up to WAB - 2 questions

MegPeterson — Wed, 25 Nov 2015 22:31:17 GMT

Yes, definitely. It might be awhile before it goes public, but I'd be happy to post screen shots in the interim.

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Wed, 25 Nov 2015 22:51:11 GMT

Yes that is a virtual directory I set on my dev machine

Re: Convert Flex pop-up to WAB - 2 questions

MegPeterson — Wed, 25 Nov 2015 23:13:12 GMT

Hi Robert -

I've added the 3 new functions and the new line of code to the MapManager.js in my server/apps/3/etc directory, and have changed out your virtual directory for mine.

I fear I'm missing something elementary because on a map click, nothing appears. If I set popups to be enabled, I get the standard field attribute list so I know popups "work".

The only thing I see is in the _setupParksPopup this:

var boolTest = value.toLowerCase().indexOf('_no_') > 0 ? false : true;

seems to reference "no" whereas my data is Y / N. Could this be something? I'm totally blind...

Thanks++

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Wed, 25 Nov 2015 23:18:03 GMT

Meg,

I am not using you Y or N fields to do this I am using the I_BIKE, etc, etc and checking for the existence of "_no_". You need to check the "layer title name that I am checking for as I know that is my layer title in my webmap but might not be yours.

Re: Convert Flex pop-up to WAB - 2 questions

RobertScheitlin__GISP — Wed, 25 Nov 2015 23:28:26 GMT

Meg,

Popups do have to be enabled in the web map. They will get overwritten by the setContent method in the code provided

Re: Convert Flex pop-up to WAB - 2 questions

MegPeterson — Tue, 01 Dec 2015 15:23:26 GMT

Eureka!! Robert - I can't thank you enough. What a great way to start the week.

I got the icons to display and am starting to look at the code to get a better understanding of how it all works. Next up for me is getting the attachment images to display, but this thread has been invaluable as a starting place for me to learn from.

If you know any sites/guides that specifically work with WAB customization please send them on. It will be a win-win as we all won't need to post so many questions.

I'm thrilled this works. Thanks again++!