topic Re: Combobox in WAB basic custom widget in Web AppBuilder Custom Widgets Questions

Combobox in WAB basic custom widget

AnasELMALEKI1 — Sun, 12 Dec 2021 16:54:10 GMT

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();
 }
 });
 });

Re: Combobox in WAB basic custom widget

KenBuja — Sun, 12 Dec 2021 08:40:05 GMT

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

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Combobox in WAB basic custom widget

AnasELMALEKI1 — Tue, 13 Jun 2017 16:42:09 GMT

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.

Re: Combobox in WAB basic custom widget

AnasELMALEKI1 — Tue, 13 Jun 2017 16:52:04 GMT

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

Re: Combobox in WAB basic custom widget

KenBuja — Tue, 13 Jun 2017 17:03:35 GMT

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.