nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

RexRobichaux

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!

REST.png

Description.png

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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"

All comments

RexRobichaux

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

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

RexRobichaux

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>';
    },

RexRobichaux

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!

RobertScheitlin__GISP

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"

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.