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

[BenjaminGrover]

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??

[RobertScheitlin__GISP]

Benjamin,

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

[BenjaminGrover]

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.  

[RobertScheitlin__GISP]

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.

[BenjaminGrover]

That is correct.

[RobertScheitlin__GISP]

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.

[BenjaminGrover]

Thank you, Robert

[RobertScheitlin__GISP · Accepted solution]

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

[BenjaminGrover]

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?

[BrianDudek1]

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.