How to make a custom widget with a custom appearance?

2028
14
Jump to solution
10-19-2016 06:13 PM
RolandoFlorez
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   You create a widget with the manifest.json inPanel set to false.

In-panel and off-panel widgets—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

You can use the ScaleBar widget as an example or the Coordinate widget.

View solution in original post

14 Replies
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   You create a widget with the manifest.json inPanel set to false.

In-panel and off-panel widgets—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

You can use the ScaleBar widget as an example or the Coordinate widget.

RolandoFlorez
New Contributor III

Hi Robert,

Where is the closeable property?

  • Off-panel widgets have an additional property named closeable when configured as an on-screen widget . If closeable is set to true, the app container creates an icon to open and close the widget; if false, the app container loads and opens the widget by default

Where Can I find it?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   That is a property that you add to the manifest.json

RolandoFlorez
New Contributor III

Robert, that's it.

But now, I Have a problem.. I've been testing with the Scalebar widget, and it appear when I click the widget, but, when I change the Scalebar to the HorizontalSlider, It doesnt appear.

I'm trying of this way:

Widget.html

<div id="sliderNode"></div>

Widget.js

this.horizontalSlider = new HorizontalSlider({labels: ["1","5","10"]},"sliderNode");
this.horizontalSlider.showButtons = true;
domStyle.set("sliderNode",style);

Like I said, when I click in the widget, shows me nothing, only the console print "onOpen", "onClose".

thanks a lot 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   If you look at all other widget you will notice that the html portions don't use id="sliderNode" they all use data-dojo-attach-point="sliderNode" and then in your Widget.js you use:

this.horizontalSlider = new HorizontalSlider({labels: ["1","5","10"]},this.sliderNode);
0 Kudos
RolandoFlorez
New Contributor III

Robert, now, I'm trying this:

this.horizontalSlider = new HorizontalSlider({labels: ["1","5","10"]},this.sliderNode);
this.horizontalSlider.showButtons = true;
domStyle.set(this.sliderNode,style);
<div dojo-attach-point="sliderNode"></div>

but nothing happen ( I'm using 

return declare([BaseWidget,_WidgetsInTemplateMixin], {

_WidgetsInTemplateMixin in my Widget.js) 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   Do you have the HorizontalSlider require in your Widget.js?

0 Kudos
RolandoFlorez
New Contributor III

yeah Robert, look

define(['dojo/_base/declare', 'jimu/BaseWidget','dijit/form/HorizontalSlider',
        'dijit/form/HorizontalRuleLabels','dojo/parser','dijit/form/TextBox','dojo/dom',
      'dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','dojo/dom-style','dojo/text!./Template.html',
    'dijit/form/Button','esri/dijit/HorizontalSlider','esri/dijit/Scalebar'],
        function(declare, BaseWidget,HorizSlider,HorzRuleLabels,parser,TextBox,dom,_TemplatedMixin,_WidgetsInTemplateMixin,domStyle,
                 template,Button,HorizontalSlider,Scalebar)

I have dijit form, and esri dijit.

I want to show this: 

theres a sliderNode node, but I can't see it.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   I don't see where you are calling

this.horizontalSlider.startup();

0 Kudos