Combobox in WAB basic custom widget

1018
4
06-13-2017 07:10 AM
AnasELMALEKI1
New Contributor II

I am a beginner in ArcGIS WAB, I want to create a custom widget that calculates zonal stats and generates charts. This is the mockup of my my widget :

 

I just began coding and I got stuck on the comboboxes  

here is my code :

<input id="zoneSelect">
<p>
    <button onClick="alert(dijit.byId('zoneSelect').get('value'))">
       Get value
    </button>
</p>

define(['dojo/_base/declare', 'jimu/BaseWidget', "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"],
 function (declare, BaseWidget, Memory, ComboBox) {
 //To create a widget, you need to derive from BaseWidget.
 return declare([BaseWidget], {
 // Custom widget code goes here
 baseClass: 'jimu-widget-statistiqueszonales',
 startup: function () {
 this.inherited(arguments);
 this.mapIdNode.innerHTML = 'map id:' + this.map.id;
 this.zone = new Memory({
 data: [
 { nom: "Commune", id: "Com" },
 { nom: "Province", id: "Prv" },
 { nom: "Région", id: "Reg" }
 ]
 });
 this.cmbZone = new ComboBox({
 id: "zoneSelect",
 name: "zone",
 value: "Commune",
 store: zone,
 searchAttr: "nom"
 }, "zoneSelect").startup();
 }
 });
 });
0 Kudos
4 Replies
KenBuja
MVP Esteemed Contributor

This is how I set up a Select box (attach point selectPriority) in my widget

<div>
  <div data-dojo-attach-point="btnSignIn"></div>
  <div data-dojo-attach-point="loginNode" style="display: none;">
    <div class="select-dijit-container" data-dojo-attach-point="selectDijitNode">

    </div>
    <div data-dojo-attach-point="totalGrid"></div>
    <div data-dojo-attach-point="selectPriority"></div>
    <div class="config-section">
      <div data-dojo-attach-point="btnApply" class="jimu-btn" style="margin-top: 20px;">Apply</div>
    </div>
  </div>
  <div data-dojo-attach-point="shelter" data-dojo-type="jimu/dijit/LoadingShelter" data-dojo-props="hidden:true"></div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍

        var store = new oldMemory({
          data: this._arrayPriority
        });
        var os = new ObjectStore({ objectStore: store });
        var s = new Select({
          store: os,
          style: "margin-top: 10px;"
        }, this.selectPriority);
        s.startup();

‍‍‍‍‍‍‍‍‍‍
AnasELMALEKI1
New Contributor II

I know how to do this in a simple web page, I have already checked the link you've mentionned, my problem is how to structure the widget 😕
Would you share the whole JS of your widget ?
I would be greatful.

0 Kudos
AnasELMALEKI1
New Contributor II

In which part of the lifecycle functions should I put my code ?

0 Kudos
KenBuja
MVP Esteemed Contributor

This is how I set it up in the widget. This code fragment is in a function that is called in the postCreate section of Widget.js.

0 Kudos