I have to make this widget to switch the opacity between layers:
but this widget has data-dojo-type tags, and the WAB shows me an error.
I was reading about _WidgetTemplateMixin, but I do not handle well the documentation yet.
So, how can I make the widget with that appearance, instead this?:
thanks a lot
Solved! Go to Solution.
Robert, ready. I did it.
I get the same:
Rolando,
I'm not sure what to tell you. It would be best to zip up your widget and attach it so I can have a look at all of it.
okey Robert, you can download here or here (from Google Drive).
Thanks Robert
Rolando,
You main issue was it data-dojo-attach-point="sliderNode" not dojo-attach-point="sliderNode" in the Widget.html
Widget.html
<div>
<div data-dojo-attach-point="sliderNode"></div>
</div>
Widget.js
define([
'dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'esri/dijit/HorizontalSlider',
'dojo/dom',
'dojo/dom-style'
],
function(
declare,
BaseWidget,
_WidgetsInTemplateMixin,
HorizontalSlider,
dom,
domStyle) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget, _WidgetsInTemplateMixin], {
// Custom widget code goes here
baseClass: 'jimu-widget-customwidget',
horizontalSlider: null,
//this property is set by the framework when widget is loaded.
name: 'Slider',
//methods to communication with app container:
postCreate: function() {
this.inherited(arguments);
console.log('postCreate');
},
startup: function() {
this.inherited(arguments);
this.horizontalSlider = new HorizontalSlider({
labels: ["1", "5", "10"]
}, this.sliderNode);
this.horizontalSlider.showButtons = true;
this.horizontalSlider.startup();
console.log('startup');
},
onOpen: function() {
console.log('onOpen');
var style = {
left: '100px',
right: '250px',
top: '150px',
bottom: '40px',
width: 'auto'
};
domStyle.set(this.sliderNode, style);
},
onClose: function() {
console.log('onClose');
}
});
});
manifest.json (line 15):
{
"name": "Slider",
"2D": true,
"3D": false,
"platform": "HTML",
"version": "2.1",
"wabVersion": "2.1",
"author": "Esri R&D Center Beijing",
"description": "This is the custom widget for slider",
"copyright": "",
"license": "http://www.apache.org/licenses/LICENSE-2.0",
"properties": {
"inPanel": false,
"supportMultiInstance": false,
"closeable": true
}
}
Thank you very much
Now, I'm gonna modify it like the Opacity widget from the Layer List widget.