topic Re: How to make a custom widget with a custom appearance? in ArcGIS JavaScript Maps SDK Questions

How to make a custom widget with a custom appearance?

RolandoFlorez — Thu, 20 Oct 2016 01:13:06 GMT

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

Re: How to make a custom widget with a custom appearance?

RobertScheitlin__GISP — Thu, 20 Oct 2016 12:06:04 GMT

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.

Re: How to make a custom widget with a custom appearance?

RolandoFlorez — Sun, 23 Oct 2016 20:20:04 GMT

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?

Re: How to make a custom widget with a custom appearance?

RobertScheitlin__GISP — Sun, 23 Oct 2016 21:03:53 GMT

Rolando,

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

Re: How to make a custom widget with a custom appearance?

RolandoFlorez — Sun, 12 Dec 2021 08:04:05 GMT

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

Re: How to make a custom widget with a custom appearance?

RobertScheitlin__GISP — Tue, 25 Oct 2016 16:02:18 GMT

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);‍

Re: How to make a custom widget with a custom appearance?

RolandoFlorez — Sun, 12 Dec 2021 08:04:08 GMT

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)

Re: How to make a custom widget with a custom appearance?

RobertScheitlin__GISP — Tue, 25 Oct 2016 16:40:01 GMT

Rolando,

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

Re: How to make a custom widget with a custom appearance?

RolandoFlorez — Sun, 12 Dec 2021 08:04:10 GMT

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.

Re: How to make a custom widget with a custom appearance?

RobertScheitlin__GISP — Tue, 25 Oct 2016 16:55:46 GMT

Rolando,

I don't see where you are calling

this.horizontalSlider.startup();

Re: How to make a custom widget with a custom appearance?

RolandoFlorez — Tue, 25 Oct 2016 17:17:10 GMT

Robert, ready. I did it.

I get the same:

Re: How to make a custom widget with a custom appearance?

RobertScheitlin__GISP — Tue, 25 Oct 2016 17:23:21 GMT

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.

Re: How to make a custom widget with a custom appearance?

RolandoFlorez — Tue, 25 Oct 2016 18:48:20 GMT

okey Robert, you can download here or here (from Google Drive).

Thanks Robert

Re: How to make a custom widget with a custom appearance?

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:04:13 GMT

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

Re: How to make a custom widget with a custom appearance?

RolandoFlorez — Tue, 25 Oct 2016 20:44:51 GMT

Thank you very much

Now, I'm gonna modify it like the Opacity widget from the Layer List widget.