topic Layer List Window, change colors of individual services listed in Web AppBuilder Custom Widgets Questions

Layer List Window, change colors of individual services listed

GeorgeKatsambas — Fri, 31 Jan 2020 14:36:50 GMT

Is there a way that map services in the layer list can be separated with different colors. I have attached an example.

Re: Layer List Window, change colors of individual services listed

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:23:58 GMT

George,

Sure here is a rough solution.

In the LayerList widget.js find this function and make this change:

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

//RJS code changes begin
        setTimeout(lang.hitch(this, function(){
          var nodes = query('div[class^="layer-title-div"]');
          nodes.map(function(node){
            var randomColor = Math.floor(Math.random()*16777215).toString(16);
            html.setStyle(node, 'color', "#"+randomColor);
          });
        }), 1000);
//RJS code changes end

        if(this.config.expandAllLayersByDefault) {
          this.layerListView.foldOrUnfoldAllLayers(false);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Layer List Window, change colors of individual services listed

GeorgeKatsambas — Fri, 31 Jan 2020 16:15:49 GMT

Thanks Robert, That did what I wanted but font size was made smaller and some colors hard to see, can I add Bold or larger font and better colors?

Re: Layer List Window, change colors of individual services listed

RobertScheitlin__GISP — Fri, 31 Jan 2020 16:22:46 GMT

Sure that is just a matter of adding the correct style to the text.

CSS font-weight property

Re: Layer List Window, change colors of individual services listed

GeorgeKatsambas — Wed, 05 Feb 2020 20:41:25 GMT

p.thicker {
font-weight: 900;
}

Where would I add this in the widget.js , after RJS code changes ?

showLayers: function() {
// summary:
// create a LayerListView module used to draw layers list in browser.
this.layerListView = new LayerListView({
operLayerInfos: this.operLayerInfos,
layerListWidget: this,
layerFilter: this.layerFilter,
config: this.config
}).placeAt(this.layerListBody);
//RJS code changes begin
setTimeout(lang.hitch(this, function(){
var nodes = query('div[class^="layer-title-div"]');
nodes.map(function(node){
var randomColor = Math.floor(Math.random()*16777215).toString(16);
html.setStyle(node, 'color', "#"+randomColor);
});
}), 1000);
//RJS code changes end

Re: Layer List Window, change colors of individual services listed

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:24:00 GMT

//RJS code changes begin
        setTimeout(lang.hitch(this, function(){
          var nodes = query('div[class^="layer-title-div"]');
          nodes.map(function(node){
            var randomColor = Math.floor(Math.random()*16777215).toString(16);
            html.setStyle(node, 'color', "#"+randomColor);
            html.setStyle(node, 'font-weight', 900);
          });
        }), 500);
//RJS code changes end‍‍‍‍‍‍‍‍‍‍

Re: Layer List Window, change colors of individual services listed

GeorgeKatsambas — Thu, 06 Feb 2020 20:58:52 GMT

Thanks, out of curiosity what does 900 and 500 refer to?

Re: Layer List Window, change colors of individual services listed

RobertScheitlin__GISP — Thu, 06 Feb 2020 21:02:27 GMT

900 is the font weight and 500 is a half second of time that the setTimeout is waiting for.