Is there a list of available jimu/dijit that can be used in web appbuilder developer edition?

[Anonymous User]

I understand that there is some documentation available, but it seems sparse and does not provide good examples of how to implement the various dijits. Below is the documentation that I am aware of.

WidgetManager class—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

[RobertScheitlin__GISP]

Jacob,

  The WAB Jimu library is not a API like the JS API thus it is only litely documented and has little to no samples. The Jimu library is mainly for esris internal WAB app use, but is available for developers to use in their development effort. My only suggestion is to look into the code of existing widgets for examples of how to use those dijits.

[Anonymous User]

Hi Robert,

Thanks for your response. My reason for asking this is that I am trying to create a very simple implementation of the provided Select widget. My goal is to:

1. Select features on a map (without the fluff of the configurable select widget)

2. Pass the selected features to a feature collection

3. As points are passed to a feature selection, I would like to update a visible feature layer to show what is selected

4. Display selected features in a table

I have gotten much of this complete already but mode code is beginning to look like spaghetti and I am having to rewrite code that is already written (which is cool, but wastes time).

Any suggests would be greatly appreciated!

Thanks,

Jacob

[KenBuja]

You'd want to use the "jimu/dijit/FeatureSetChooserForMultipleLayers" to do your selection.

First, instantiate the dijit

this.selectDijit = new FeatureSetChooserForMultipleLayers({
  map: this.map,
  updateSelection: true,
  fullyWithin: false,
  geoTypes: [
    "POINT",
    "EXTENT",
    "POLYGON",
    "CIRCLE",
    "POLYLINE",
    "FREEHAND_POLYGON"
  ]
});‍‍‍‍‍‍‍‍‍‍‍‍‍
html.place(this.selectDijit.domNode, this.selectDijitNode);
this.selectDijit.startup();
this.selectDijit.setFeatureLayers([this.yourLayer]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then set up a listener to determine when the user selects features.

this.own(
  on(
    this.selectDijit,
    "unloading",
    lang.hitch(this, function() {
      const features = this.yourLayer.getSelectedFeatures();
      // your function to update the table
    })
  )
);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You probably also want to update the table if the user clears the selection

this.own(
  on(
    this.selectDijit,
    "user-clear",
    lang.hitch(this, function() {
      // your function to update the table
    })
  )
);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Anonymous User]

Hi Ken,

I attempted to implement this with but received the following error: Cannot read property 'declaredClass' of undefined

Here is my code and a list of modules that I am using:

define(['dojo/_base/declare', 
'jimu/BaseWidget', 
'dojo/on', 
'dojo/dom', 
"dojo/dom-construct", 
"dojo/_base/array", 
"dojo/number", 
"dojo/_base/lang", 
"esri/tasks/QueryTask", 
"esri/tasks/query", 
"esri/layers/FeatureLayer", 
"esri/InfoTemplate",
'esri/symbols/SimpleLineSymbol',
"esri/Color",
'jimu/dijit/FeatureSetChooserForMultipleLayers', 
"jimu/dijit/DrawBox", 
'./makeSelection',
"dojo/domReady!"],
function(declare, BaseWidget, on, dom, dojoConstruct, array, number, lang, QueryTask, Query, esriFeatureLayer, InfoTemplate, SimpleLineSymbol, Color, FeatureSetChooserForMultipleLayers, jimu_drawbox, makeSelection)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

      adoptACityStreets = this.map.getLayer("AdoptACityStreet_4375");
      availableStreets = adoptACityStreets['url'] + "/1";

      adoptACityStreets_fl = new esriFeatureLayer(availableStreets)
      // adoptACityStreets_fl = new esriFeatureLayer(availableStreets, {
      // mode: esriFeatureLayer.MODE_SELECTION,
      // infoTemplate: new InfoTemplate("Whole Street Name: ${WHOLESTNAME}", "${*}"),
      // outFields: ["*"]
      // });
      
      map.addLayer(adoptACityStreets_fl);

      this.selectDijit = new FeatureSetChooserForMultipleLayers({
        map: this.map,
        updateSelection: true,
        fullyWithin: false,
        geoTypes: [
          "POINT"
        ]
      });
      
      this.selectDijit.placeAt(this.selectionContainer);
      this.selectDijit.startup();
      this.selectDijit.setFeatureLayers([this.adoptACityStreets_fl]);

      this.own(
        on(
          this.selectDijit,
          "unloading",
          lang.hitch(this, function() {
            const features = this.adoptACityStreets_fl.getSelectedFeatures();
            // your function to update the table
            console.log(features)
          })
        )
      );‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks for your help!

[KenBuja]

Where does it give you this error? I suspect you are calling a function but not wrapping it in a lang.hitch, which throws off the expected "this" item.

[shaylavi]

Hi Jacob,

If you download the API library to be hosted locally, you can actually browse the folders (jimu, dijit, dojo, etc..) and see all the available components. Also you can just browse through the DOJO documentation online, but it doesn't sounds like it going to help you simply your code if that's what you're after.

Also, you might find this next example relevant to your case -

Edit fiddle - JSFiddle 

Shay.

[Anonymous User]

Hi Shay,

This is great information. Also, thanks for the JSFiddle demo as well. What would be a good way of doing something similar to the example that you provided, but instead using jimu/dijit/FeatureSetChooserForMultipleLayers or jimu/dijit/FeatureSetChooserForSingleLayer?

Thanks,

Jacob

[KenBuja]

One thing to know about the FeatureSetChooserForSingleLayer dijit. It doesn't allow you to set the type of selecting geometry (geoTypes) but only allows you select an extent.

[Anonymous User]

That is a good point. I have tried both but get a new error: Cannot convert undefined or null to object.

This occurs at “this.selectDijit.setFeatureLayers();”

Shouldn’t this be able to take a single feature layer?