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

WAB: Change Layer List 'Description' option

MatissValdmanis1

Hello everyone,

I am using Web AppBuilder Developers Edition and want to change the Layer List "Description" option. When you run an app, when you click on the drop down beside a layer in the Layer List you are given the option to view the layer's 'Description'. This automatically opens the layer's REST endpoint URL.

I am wondering if there is a way to change the 'Description' option to show a custom URL website I can create myself, or even just the layer's "Description" value - you can edit this in an mxd by opening the layer's properties, under the General Tab, and then republishing the mxd to a Map Service that AGOL (and thus WAB) uses.

Find more posts tagged with

Accepted answers

MatissValdmanis1

Hi Robert,

Unfortunately

url = ((this._layerInfo.layerObject.name) + '.com');

returned undefined again,

However I've got a solution that works now:

} else if (this._layerInfo.layerObject && this._layerInfo.layerObject.url) {

//url = this._layerInfo.layerObject.url;

url = ((this._layerInfo.id) + '.html'); //MV added

label = this.nls.itemDesc;

}

That code returns .../webappbuilder/apps/3/(Mapservice_Name)_3308_3.html

I can build the description/metadata websites off of this.

Thank you so much for the help!

All comments

MatissValdmanis1

Also

} else if (this._layerInfo.layerObject && this._layerInfo.layerObject.url) {

//url = this._layerInfo.layerObject.url;

url = ((this._layerInfo.title) + '.html'); //MV added

label = this.nls.itemDesc;

}

Works, returns
.../webappbuilder/apps/3/(layer name).html

However spaces in the layer name make it unusable

MatissValdmanis1

Hi Robert,

Unfortunately

url = ((this._layerInfo.layerObject.name) + '.com');

returned undefined again,

However I've got a solution that works now:

} else if (this._layerInfo.layerObject && this._layerInfo.layerObject.url) {

//url = this._layerInfo.layerObject.url;

url = ((this._layerInfo.id) + '.html'); //MV added

label = this.nls.itemDesc;

}

That code returns .../webappbuilder/apps/3/(Mapservice_Name)_3308_3.html

I can build the description/metadata websites off of this.

Thank you so much for the help!

RobertScheitlin__GISP

Matiss,

If you are just wanting the layers name then just use "name" there is no property called "layerId" in the layerObject.

url = ((this._layerInfo.layerObject.name) + '.com'); //MV added - returns 'layername.com'

MatissValdmanis1

Thank you Robert! Definitely got me closer. However, I am not sure how to change which URL it goes do (please bear with me, I am still new to WAB JS).

As it stands I can't seem to get the layer's name string value - I could make a small html Description/metadata website for each layer if I could just get the layer's name value and pop the websites in the ...apps/[app #]/ folder.

Here is the code I have put in the _getATagLabel function:

_getATagLabel: function() {

var url;

var label;

var itemLayerId = this._layerInfo._isItemLayer && this._layerInfo._isItemLayer();

/*if (itemLayerId) {

url = portalUrlUtils.getItemDetailsPageUrl(

portalUrlUtils.getStandardPortalUrl(this.layerListWidget.appConfig.portalUrl),

itemLayerId);

label = this.nls.itemShowItemDetails;

} else if (this._layerInfo.layerObject &&

this._layerInfo.layerObject.url &&

(this._layerType === "CSVLayer" || this._layerType === "KMLLayer")) {

url = this._layerInfo.layerObject.url;

label = this.nls.itemDownload;

} else if (this._layerInfo.layerObject && this._layerInfo.layerObject.url) {

url = this._layerInfo.layerObject.url;

label = this.nls.itemDesc;

} else {

url = '';

label = this.nls.itemDesc;

} */ MV removed

url = ((this._layerInfo.layerObject.layerId) + '.com'); //MV added - returns 'undefined.com'

label = this.nls.itemDesc; //MV added

return '<a class="menu-item-description" target="_blank" href="' +

url + '">' + label + '</a>';

RobertScheitlin__GISP

Matiss,

Sure you can have that option in the menu do what ever you want just open the:

[install dir]\server\apps\[app #]\widgets\LayerList\PopupMenuInfo.js

and find the _getATagLabel function this is the function that set the anchor hyper link to the layers rest end point page.

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.