Customizing Layer List Widget "Description" to open in new browser tab?

1008
7
Jump to solution
12-23-2020 06:03 AM
RexRobichaux
Occasional Contributor

Hello WABD gurus,

 I have what I think is a fairly simple question that I'm hoping someone might be able to help with. Is it possible to force the layer list widget to open the "Description" of a layer (the REST endpoint of a given layer) in a new browser tab, rather than forcing the current browser window (where the web app is) to direct to the REST page? This behavior is a little jarring for users of our app, and they then have to hit "back" to return and reload the web app.

I've poked around in some of the Layer List widget config files but don't right off see where I could use something like window.open() method to force the new url to be opened in a new tab instead. Thank you as always for any help you can offer!

 

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Rex,

   What version of WAB are you using? In 2.17 the default is to open in a new tab. You can see this in the code below from the PopupMenuInfo.js file in the LayerList widget.

    _getATagLabel: function() {
      var url;
      var label;
      var layerUrl = this._layerInfo.getUrl();
      var basicItemInfo = this._layerInfo.isItemLayer();
      if (basicItemInfo) {
        url = this._getItemDetailsPageUrl(basicItemInfo) || layerUrl;
        label = this.nls.itemShowItemDetails;
      } else if (layerUrl &&
        (this._layerType === "CSVLayer" || this._layerType === "KMLLayer")) {
        url = layerUrl;
        label = this.nls.itemDownload;
      } else if (layerUrl && this._layerType === "WMSLayer") {
        url = layerUrl + (layerUrl.indexOf("?") > -1 ? "&" : "?") + "SERVICE=WMS&REQUEST=GetCapabilities";
        label = this.nls.itemDesc;
      } else if (layerUrl && this._layerType === "WFSLayer") {
        url = layerUrl + (layerUrl.indexOf("?") > -1 ? "&" : "?") + "SERVICE=WFS&REQUEST=GetCapabilities";
        label = this.nls.itemDesc;
      } else if (layerUrl) {
        url = layerUrl;
        label = this.nls.itemDesc;
      } else {
        url = '';
        label = this.nls.itemDesc;
      }
      this._ATagLabelUrl = url;
      return '<a class="menu-item-description" target="_blank" href="' +
        url + '">' + label + '</a>';
    },

The code that set the anchor element to a new tab is this target="_blank"

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Rex,

   What version of WAB are you using? In 2.17 the default is to open in a new tab. You can see this in the code below from the PopupMenuInfo.js file in the LayerList widget.

    _getATagLabel: function() {
      var url;
      var label;
      var layerUrl = this._layerInfo.getUrl();
      var basicItemInfo = this._layerInfo.isItemLayer();
      if (basicItemInfo) {
        url = this._getItemDetailsPageUrl(basicItemInfo) || layerUrl;
        label = this.nls.itemShowItemDetails;
      } else if (layerUrl &&
        (this._layerType === "CSVLayer" || this._layerType === "KMLLayer")) {
        url = layerUrl;
        label = this.nls.itemDownload;
      } else if (layerUrl && this._layerType === "WMSLayer") {
        url = layerUrl + (layerUrl.indexOf("?") > -1 ? "&" : "?") + "SERVICE=WMS&REQUEST=GetCapabilities";
        label = this.nls.itemDesc;
      } else if (layerUrl && this._layerType === "WFSLayer") {
        url = layerUrl + (layerUrl.indexOf("?") > -1 ? "&" : "?") + "SERVICE=WFS&REQUEST=GetCapabilities";
        label = this.nls.itemDesc;
      } else if (layerUrl) {
        url = layerUrl;
        label = this.nls.itemDesc;
      } else {
        url = '';
        label = this.nls.itemDesc;
      }
      this._ATagLabelUrl = url;
      return '<a class="menu-item-description" target="_blank" href="' +
        url + '">' + label + '</a>';
    },

The code that set the anchor element to a new tab is this target="_blank"

RexRobichaux
Occasional Contributor

Thanks Robert! Great question... I'm actually running 2.17, however IIRC the app in question was actually created in 2.15, and manually copied / imported into 2.17 so I'm betting that might be the issue. I'll peep into this code today and verify. Thanks again for your help and insight as always!

RexRobichaux
Occasional Contributor

Well now I'm a little stumped and scratching my head on this one. I've checked the PopupMenuInfo.js file, and sure enough, for both apps where we are seeing the url forward vs new tab behavior, I see the code that (I was not expecting to see). Here's an extract from the file. Very strange. Any ideas? Thanks again for the help!

 

    _getATagLabel: function() {
      var url;
      var label;
      var itemLayerId = this._layerInfo._isItemLayer && this._layerInfo._isItemLayer();
      var layerUrl = this._layerInfo.getUrl();

      if (itemLayerId) {
        url = portalUrlUtils.getItemDetailsPageUrl(
                portalUrlUtils.getStandardPortalUrl(this.layerListWidget.appConfig.portalUrl),
                itemLayerId);
        label = this.nls.itemShowItemDetails;
      } else if (layerUrl &&
        (this._layerType === "CSVLayer" || this._layerType === "KMLLayer")) {
        url = layerUrl;
        label = this.nls.itemDownload;
      } else if (layerUrl && this._layerType === "WMSLayer") {
        url = layerUrl + (layerUrl.indexOf("?") > -1 ? "&" : "?") + "SERVICE=WMS&REQUEST=GetCapabilities";
        label = this.nls.itemDesc;
      } else if (layerUrl && this._layerType === "WFSLayer") {
        url = layerUrl + (layerUrl.indexOf("?") > -1 ? "&" : "?") + "SERVICE=WFS&REQUEST=GetCapabilities";
        label = this.nls.itemDesc;
      } else if (layerUrl) {
        url = layerUrl;
        label = this.nls.itemDesc;
      } else {
        url = '';
        label = this.nls.itemDesc;
      }

      return '<a class="menu-item-description" target="_blank" href="' +
        url + '">' + label + '</a>';
    },

 

RobertScheitlin__GISP
MVP Esteemed Contributor

Have you tested in more than one browser (i.e. Chrome, IE, Edge, FireFox, etc)? Could be a browser setting issue.

RexRobichaux
Occasional Contributor

Hey Robert, 

Yep I have. First browser tested was Firefox, then Chrome. Behavior is reproducible in both. I just tested IE and it's the same there as well.

RobertScheitlin__GISP
MVP Esteemed Contributor

Rex,

 

  As I do not see this in any browsers, It means that it is time for you to contact esri tech support on this.

RexRobichaux
Occasional Contributor

Thanks again for the help Robert. After further troubleshooting I've arrived at the same conclusion. I'll kick off a ticket and update this thread if we ever find the resolution / culprit. 

0 Kudos