topic Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed. in ArcGIS Web AppBuilder Questions

Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Fri, 19 Jan 2018 20:48:00 GMT

I've seen some talk about this in other discussions, but no solid solutions. Where would one need to add code to insert text lines between layers in the LayerList widget? I'm wanting to add some descriptive text, smaller font, bolded, and in red, below a few layers listed in the Widget. Can this be done??

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Fri, 19 Jan 2018 21:20:14 GMT

Benjamin,

Where is this info going to come from? That will be a main factor in this.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Fri, 19 Jan 2018 21:35:45 GMT

I am running the developer version, so I was figuring on finding the proper script/code file and adding the text directly to the application's code, it would not be extracted from any data or anything if that is what you mean.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Fri, 19 Jan 2018 21:41:07 GMT

Yes that is what I was wanting to know. So it sounds like you have some set layers and order to then so you will know which layer object to add your specific text to, is that correct.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Fri, 19 Jan 2018 21:43:19 GMT

That is correct.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Fri, 19 Jan 2018 21:46:05 GMT

Ben,

Hopefully this weekend I will get some time to work up some code to share with you for this. When I have more than a iDevice to work with.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Mon, 22 Jan 2018 14:35:09 GMT

Thank you, Robert

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:27:29 GMT

Benjamin,

Here is the code to do that:

In the LayerList Widget.js replace the showLayers function with this one.

The define portion changes:

define([
    'jimu/BaseWidget',
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/dom',
    'dojo/on',
    'dojo/query',
    'dijit/registry',
    './LayerListView',
    './NlsStrings',
    'jimu/LayerInfos/LayerInfos',
    'dojo/dom-construct'
  ],
  function(BaseWidget, declare, lang, array, html, dom, on,
  query, registry, LayerListView, NlsStrings, LayerInfos, domConstruct) {
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

      showLayers: function() {
        // summary:
        //    create a LayerListView module used to draw layers list in browser.
        this.layerListView = new LayerListView({
          operLayerInfos: this.operLayerInfos,
          layerListWidget: this,
          config: this.config
        }).placeAt(this.layerListBody);

//RJS code changes begin
        setTimeout(lang.hitch(this, function(){
//The next line is what you need to change from your layer you want this desc added to
//.layer-tr-node-LOJIC_LandRecords_Louisville_5606
//replace LOJIC_LandRecords_Louisville_5606 with your layers id everywhere you see it in the code
          var node = query('.layer-tr-node-LOJIC_LandRecords_Louisville_5606')[0];
          var layerTrNodeClass = "layer-tr-node-LOJIC_LandRecords_Louisville_5606";
          var layerTrNode = domConstruct.create('tr', {
            'class': 'desc',
            'layerTrNodeId': 'LOJIC_LandRecords_Louisville_5606'
          });
          var layerTdNode = domConstruct.create('td', {
            'class': 'col col1',
            'style': 'width: 40px;'
          }, layerTrNode);
          var layerTitleTdNode = domConstruct.create('td', {
            'class': 'col col2'
          }, layerTrNode);
          var layerTitleDivIdClass = 'layer-title-div-LOJIC_LandRecords_Louisville_5606';
          var divLabel = domConstruct.create('div', {
            'innerHTML': 'This is your text you wanted to add',
            'class':layerTitleDivIdClass + ' div-content jimu-float-leading'
          }, layerTitleTdNode);
          domConstruct.place(layerTrNode, node, 'after');
        }), 1000);
//RJS code changes end
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The new css rule to add to the style css:

.jimu-widget-layerList .desc{
  height: 40px;
  color: #ff0000;
  font-size: 11px;
}‍‍‍‍‍

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Mon, 22 Jan 2018 18:40:53 GMT

I sincerely appreciate your help so far Robert. That appears to be exactly what I'm trying to do. Eseentially just a note following a handful of specific layers listed in the layerList widget.

I implemented the code you provided, but I am getting an error when I run the widget in the web application.

I'm wondering if this has to do with the way my layers are published. I have multiple layers published to each service in my map, primarily to to accomplish the effect of group layers in the Layer list, but also to cut down on the numbers of map services published to our server. Would this have anything to do with the error I am receiving?

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Mon, 22 Jan 2018 18:43:18 GMT

I also have web app builder. 2.0 developer edition, I haven't take then time to upgrade. Just hit me that the LayerList widget has seen some changes in more recent releases, could this be my issue?

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Mon, 22 Jan 2018 18:51:27 GMT

That is the most likely issue (version). The code I provide was for 2.6.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Mon, 22 Jan 2018 18:59:15 GMT

Downloading 2.7 right now. Do you suspect they are the same?

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Mon, 22 Jan 2018 19:00:08 GMT

very likely.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Mon, 22 Jan 2018 19:52:00 GMT

version 2.7 seemed to make no difference. I got the same error.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Mon, 22 Jan 2018 19:59:31 GMT

Ben,

Hmm.. you must have introduced a syntax error in the widgets code then.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Mon, 22 Jan 2018 20:41:02 GMT

Am i correct in assuming the "LOJIC_LandRecords_Louisville_5606" layer ID you used, is the published web service's name? As in the bolded text here from the service URL: /arcgis/rest/services/ProjectName/Abandoned_ServiceLines/MapServer

Or should I be using something else?

There are several layers under this abandoned service lines service. Should the Layer ID i need to be using, be for each of these individual layers from within the Abandoned Service Lines service?

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Mon, 22 Jan 2018 20:56:57 GMT

Ben,

No. The best way to find the layers id is to right click the layer title in the LayerList widget and to choose inspect (i am using Chrome) then in the elements class you will see the layers id.

i.e.

<div class="layer-title-div-LOJIC_LandRecords_Louisville_5320 div-content jimu-float-leading ">LOJIC_LandRecords_Louisville - LandUse</div>

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BenjaminGrover — Mon, 22 Jan 2018 23:53:19 GMT

Got it to work. Thanks!

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

RobertScheitlin__GISP — Tue, 23 Jan 2018 00:04:43 GMT

Great Don’t forget to mark your question is answered.

Re: Can I customize the LayerList widget to add non-interactive descriptive text lines between layers listed.

BrianDudek1 — Wed, 19 Sep 2018 21:13:51 GMT

The style.css code does not appear to be working on my end. The text addition after the layer does. I just copied and pasted the code into LayerList\css\style.css. But the color did not change nor any changes I make to size, etc. Any ideas on why?

'class': 'desc' is certainly in the Widget.js code.

Using 2.8. Thanks.