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

3397
32
Jump to solution
01-19-2018 12:48 PM
BenjaminGrover
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

32 Replies
RobertScheitlin__GISP
MVP Emeritus

Benjamin,


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

0 Kudos
BenjaminGrover
New Contributor II

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.  

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
BenjaminGrover
New Contributor II

That is correct.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
New Contributor II

Thank you, Robert

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
New Contributor II

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?

0 Kudos
BrianDudek1
New Contributor III

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.

0 Kudos