topic Re: Customize LayerList widget to add interactive image between layers in Web AppBuilder Custom Widgets Questions

Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 15:05:42 GMT

I want to add an image between the layers and embed it with a link so that when an image is clicked, the link will open in a new tab. I updated the Widget.js code within the show layers function (around line132) and I am partially successful i.e, my image won't display (as in the image below), but I am can click on the small icon to go to another page. I am a not sure what code I am missing for displaying the image. I am a newbie to WAB and programming and Any help will be highly appreciated.

Thanks,

Sunita

setTimeout(lang.hitch(this, function(){

var node = query('.layer-tr-node-OsuStwTree_9178_1')[0];

var layerTrNodeClass = 'layer-tr-node-OsuStwTree_9178_1';

var layerTrNode = domConstruct.create('tr', {

'class': 'treeInventory',

'layerTrNodeId': 'OsuStwTree_9178_1'

});

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-OsuStwTree_9178_1';

var divLabel = domConstruct.create('div', {

'innerHTML': '<br><div id = "treeInventory"><br><a target="_blank" href="http://arbordayblog.org/tree-campus-usa/10-year-tree-campus-usa-spotlight-university-of-nebraska-lincoln/"><img height = "50px" src= "images/treeCampus.png"></a>',

'class':layerTitleDivIdClass + ' div-content jimu-float-leading',

style:{

height: this.height +'px'

}

}, layerTitleTdNode);

domConstruct.place(layerTrNode, node, 'after');

}), 1000);

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 15:10:45 GMT

Sunita,

What is the full path of the treeCampus.png image?

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 15:13:44 GMT

Here is the full path of my treeCampus.png

D:\WebAppBuilder\WebAppBuilderForArcGIS\server\apps\5\widgets\LayerList\images

Thanks.

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 15:30:42 GMT

And when you hover over the broken image link icon what does it say the path it is using is?

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 15:33:41 GMT

It won't display any path.

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 15:36:55 GMT

Right click it and choose "inspect" (if using Chrome).

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 15:43:27 GMT

This is how it looks like in the chrome developer tool.

Many thanks for taking the time to help solve this one.

Sunita

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 15:45:43 GMT

Sunita,

OK, now hover over the src property and see what path it displays in the tooltip.

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 15:52:15 GMT

It looks like this

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 16:10:18 GMT

Sunita,

So you see having "images/treeCampus.png" goes to the Apps images folder and not the widgets images folder.

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 16:19:56 GMT

Yes, so I copied that file and it showed up, thank you so much for this. Greatly appreciated.

Can I ask a follow-up question on this? what code do I have to change to move the image below the tree icon.

Thanks,

Sunita

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 16:22:21 GMT

I don't understand the question.

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 16:26:07 GMT

So, I want the symbol for the Not-a-tree or other Lifecycle above the image, if that makes sense.

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 16:32:39 GMT

In the code you provided I only see you adding one image... So where is the other one coming from? Is it the symbol for that layer?

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 16:36:47 GMT

That's a symbology from the layer and it appears below the added image when the layer is expanded and I want that symbology to go above the Tree Campus USA image.

Thanks.

Re: Customize LayerList widget to add interactive image between layers

RobertScheitlin__GISP — Wed, 12 Sep 2018 16:46:53 GMT

Sunita,

Then your domConstruct.place(layerTrNode, node, 'after'); is the issue. instead of node you need to find the layers symbol node and place it after that.

Re: Customize LayerList widget to add interactive image between layers

Sunita_Khanal — Wed, 12 Sep 2018 16:54:42 GMT

Thank you so much, Robert. I very much appreciate your time and input.

Sunita