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(); } }); });
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();
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.
In which part of the lifecycle functions should I put my code ?
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.