topic Re: Customizing Layer List Widget "Description" to open in new browser tab? in ArcGIS Web AppBuilder Questions

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

RexRobichaux — Wed, 23 Dec 2020 14:03:38 GMT

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!

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

RobertScheitlin__GISP — Sat, 26 Dec 2020 22:48:25 GMT

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"

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

RexRobichaux — Wed, 30 Dec 2020 14:23:47 GMT

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!

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

RexRobichaux — Wed, 30 Dec 2020 14:42:18 GMT

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

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

RobertScheitlin__GISP — Wed, 30 Dec 2020 15:19:06 GMT

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

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

RexRobichaux — Wed, 30 Dec 2020 15:28:38 GMT

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.

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

RobertScheitlin__GISP — Wed, 30 Dec 2020 16:44:14 GMT

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.

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

RexRobichaux — Mon, 04 Jan 2021 20:39:08 GMT

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.