AnsweredAssumed Answered

How to add numpicker to custom widget?

Question asked by mattias_j on Aug 27, 2020
Latest reply on Aug 31, 2020 by mattias_j

I've spent many hours reading documentation and learned the basics of Javascript, CSS, Dojo, Javascript API and feel like I'm ready to start developing my own custom widgets. But I'm running into trouble right away.

I just want to add some controls like a couple of numberpickers, a button and a couple of Radiobuttons to a widget. I started with the sample demo widget and looked at the code in some of the otb-widgets and tried to do the same, I want my numpickers and buttons to look the same as the do in the otb-widgets.

This is what my widget.html looks like:

 

<div>
  <div>${nls.label1}.</div>
  <div>${nls.label2}.[${config.configText}]</div>
  <div data-dojo-attach-point="mapIdNode"></div>
  <div data-dojo-attach-point="vertexCount"></div>

  <input data-dojo-attach-point="minAge" data-dojo-type="dijit/form/NumberSpinner"
  data-a11y-label-by="locationLabel_fontSize" style="width:100px;" data-dojo-props='value:0,smallDelta:1,constraints:{min:0,max:125},intermediateChanges:true'></input>
  <input data-dojo-attach-point="maxAge" data-dojo-type="dijit/form/NumberSpinner"
  data-a11y-label-by="locationLabel_fontSize" style="width:100px;" data-dojo-props='value:125,smallDelta:1,constraints:{min:0,max:125},intermediateChanges:true'></input>
  <br><br>
  <div role="button" class="jimu-btn" data-dojo-attach-point="btnUndo" data-dojo-attach-event="onclick:_onBtnUndoClicked" tabindex="0">Button</div>
  <br><br>
  <br>
  <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="preserveFormDijit">
    <input type="radio" data-dojo-attach-point="radio0" data-dojo-type="dijit/form/RadioButton" data-dojo-props="name:'preserveScale',checked:true,value:'true'"/>
    <label data-dojo-attach-point="radio0Label">Radio 1</label>
    <br />
    <input type="radio" data-dojo-attach-point="radio1" data-dojo-type="dijit/form/RadioButton" data-dojo-props="name:'preserveScale',value:'false'"/>
    <label data-dojo-attach-point="radio1Label">Radio 2</label>
  </div>
</div>

 

And this is my widget.js

define(['dojo/_base/declare''jimu/BaseWidget''dijit/form/NumberSpinner'],
function(declare, BaseWidget) {
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget], {
    // DemoWidget code goes here

    //please note that this property is be set by the framework when widget is loaded.
    //templateString: template,

    baseClass: 'jimu-widget-demo',

    _onBtnUndoClicked: function(){
      //this._undoManager.undo();
    },

    postCreate: function() {
      this.inherited(arguments);
      console.log('postCreate');
    },

    startup: function() {
      this.inherited(arguments);
      this.mapIdNode.innerHTML = 'map id:' + this.map.id;
      console.log('startup');
    },
...
...
...

The button looks like I want, but the numpickers just looks like ordinary text inputs, and so does the radiobuttons...

This is how it looks:

I want the numpickers to look like they do for example in the drawWidget:

 

I've also looked att the samples at The Dojo Toolkit Reference Guide but I don't really know how to use thoose samples in the WAB widget context as it's not like starting from scratch a plain html-file.

What am I missing? something in the define([...], function (...  ?

Or is it CSS? haven't found anyhting specific in the otb widgets styles that i think i should have copied as well. I'm thinking the styles porbably would be defined somewere else in the WAB-code when don't want a custom style.

Outcomes