Skip navigation
All Places > Web AppBuilder Custom Widgets > Blog
simo

My thoughts on WAB

Posted by simo Jun 5, 2019

As a developer I used WAB Developer Edition on two occasions in the last 3 years. Here are some of my thoughts.

 

 

1. Some important functions are missing in the out-of-box widgets. just think what you will do on the digital map: I will select features (by attribute or by interacting with the map), add / remove the new selection to / from my existing selection. But the Select Widget does none of this. and the Select widget only works for visible feature layers, no tricks can be done on the map service to make it seemingly selectable.

 

2. Actually the Query widget is more like a selection widget if a confusing and useless (most of time) temporary layer not being created for every query. Can't we just create a temporary memory layer which is managed by the application rather than by the user?? Most of user don't even know a layer is created for this operation. If I need my users to select on the map service (better performance in some cases, advanced cartography), I have to let them do a query first before they can select, what?? 

 

3. There are no Select By Attribute function. Instead, they provide two filter widgets , Filter and  Group Filter. But sometimes I need simply select and highlight features rather than aggressively filter out other features. don't we do this all the time in the desktop GIS?

 

4. If I am not happy with the existing features / lack of features, I can always customize existing widgets, since I can write code and I have a WAB Developer Edition. right? I have to say I did get some good stuff done, but I don't like the experience. The main problem is the documentation for the JIMU architecture and its detailed API reference. It was so poor and out-dated  that I had to read thousands of line of code to figure out how to add tens of lines of code of my own! I've been a developer on ESRI platform for quite long time, I feel the quality of the help document is not on par with other ESRI product for developers --- It lacks details. Developers need details, because their work are like under microscope. 

 

5. I noticed there are many new widgets released since I first used it 3 years ago, but most of these are not useful for my projects. Let's go back to the basic widgets that everyone uses and bring back the consistent user experience that ESRI has established in their desktop products. how about starting with comprehensive selection function and doing stats/reports on arbitrary selections? and giving the developers stronger support by providing good documentation and examples if we are going to continue the Developer Edition.

 

I can't help thinking the Flex Viewer days, the application architecture was elegant and well-documented, so did the APIs, the spirit of the developer community were high... OK, have to get over it now 

 

I am not all negative about WAB, quite opposite actually, I like WAB in portal and ArcGIS Online, which provides great flexibility when sharing your maps. Just my expectation for the Developer Edition is much higher than that for the WAB online version.

Hi ,

I am using Web app builder DE 2.10, and have the requirement that , custom widget should open in separate popup window instead of Panel. Please suggest if any work out on this.

Thanks in advance.

 

Chatru

In case you want to exclude a layer not to show up, on the LayerList then you probably don't want it appear in the Legend and Attribute Table either.

 

LayerList Widget

The LayerList widget through the Settings provides a way to exclude layers to be listed in the Layer List. However, if you add a layer programmatically, the layer is not listed in the Settings. 

You can exclude a layer by accessing the LayerListView.js under the LayerList widget folder under the addLayerNode function and add this simple script. In this script, a layer with the text "Outside" in the title of the layer will be excluded. You can use any other layerinfo property to specify which layer to exclude.

Under the the LayerListView.js

 drawListNode: function(layerInfo, level, toTableNode, position) {
      var nodeAndSubNode, showLegendDiv;
      if(this.isLayerHiddenInWidget(layerInfo) || layerInfo.title.includes("Outside")) {
        return;
      }
---------------------
---------------------

 

Attribute Table Widget

Under the widget.js there are two places to modify the script.

Under the initDiv function (add line 8 and line 12)

-------------
-------------
paneJson.paneId = json.id;
            paneJson.title = json.name;
            paneJson.name = json.name;
            paneJson.layerType = this._layerTypes.FEATURELAYER;
            paneJson.style = "height: 100%; width: 100%; overflow: visible;";
            if (!paneJson.name.includes("Outside")) {
              var cp = new ContentPane(paneJson);
              this.layerTabPages[j] = cp;
              this.tabContainer.addChild(cp);
            }
          }
        }
----------------
----------------

Under the onReceiveData function add lines 6 and 26

-------------------------
-------------------------

params.layer = params.layer || params.layerInfo;
          console.log(params)
          if (!params.layer.title.includes("Outside")) {
          if (!this.showing) {
            this._openTable().then(lang.hitch(this, function () {
              var isInResources = !!this._resourceManager.getLayerInfoById(params.layer.id);
              if (!isInResources) {
                this._resourceManager.updateLayerInfoResources(false)
                  .then(lang.hitch(this, function () {
                    this._addLayerToTable(params);
                  }));
              } else {
                this._addLayerToTable(params);
              }
            }));
          } else {
            this._resourceManager.updateLayerInfoResources(false)
              .then(lang.hitch(this, function () {
                this._addLayerToTable(params);
              }));
          }
        }
      }
----------------------------
--------------------------

 

Legend Widget

Thanks to Robert Scheitlin's solution at: 

How to remove a layer from the Legend widget in Developer Addition Web App Builder?  We are programmatically adding a Grid layer to the map using JavaScript API, not the Web Map, and would like to hide the layer from the Legend Widget when we add this lay 

I was able to remove from Legend widget as well with a slight modification, probably because it is a different WAB version and the widget code has been modified.

Added lines 14-21 and comment out line 23. The other lines were already comment out by ESRI. I am using WAB version 2.8.

 _getLayerInfosParam: function() {
      var layerInfosParam;

      /*
      if(this.config.legend.layerInfos === undefined) {
        // widget has not been configed.
        layerInfosParam = legendUtils.getLayerInfosParam();
      } else {
        // widget has been configed, respect config.
        layerInfosParam = legendUtils.getLayerInfosParamByConfig(this.config.legend);
      }
      */


     layerInfosParam = legendUtils.getLayerInfosParam(this.config);
     filteredLayerInfosParam = layerInfosParam.filter(function(layerInfoParam) {
      if(!layerInfoParam.title.includes("Outside")){
        console.log(layerInfoParam)
        return layerInfoParam;
      }
    });
    return filteredLayerInfosParam;

      //return layerInfosParam;
    },

Web AppBuilder Widget Search is newly updated with categories, screenshots, and more. If you're looking for a custom widget, this is a good place to start your search.

 

If you're a widget author and you'd like to add your widget to the list, please follow the instructions on GitHub.

Web AppBuilder for ArcGIS (Developer Edition) 2.10 beta version is available in the Early Adopter Community. It syncs up with the latest Web AppBuilder in AGOL September 18 update. Click on this link to access the latest beta version.

 

Developer Edition 2.10 introduces a new Pocket theme designed for apps embedded in websites, story maps, or other locations with surrounding context, where only one widget is supported in a panel positioned on the left or the right. In addition, multiple widgets have been improved. You can now find layers by typing a keyword in Layer List, use Search to support typing coordinates in the search box to locate a place on the map, set dynamic maximum and minimum values dependent on data configured in Extra Data source for the gauge in Infographic, and hide or customize filter labels in Query. With 3D Daylight, you can now choose a date to reflect the sun’s position at different times. For more information, see the blog.

 

Please use the Forums within the Early Adopter Community to communicate all your observations and feedback.

Thank you!

The Web AppBuilder for ArcGIS team

Photo by Denys Nevozhai on Unsplash

 

Continuing the series that began with the Introduction to Web AppBuilder for ArcGIS Developer Edition training seminar, Esri Training Services has just released another video for Users and Tinkerers. This 9 minute video presents a workflow that can help standardize and streamline the way your organization configures widgets. Use this link to access this and all the videos in the series:

 

www.esri.com/training/Bookmark/FKRAQTELZ

 

If you have feedback on the video, or would like to suggest topics for future videos, please leave a comment! When new videos get added to this series, I'll let you know about them here on GeoNet.

 Web AppBuilder for ArcGIS (Developer Edition) 2.9 beta version is available in Early Adopter Community. It syncs up with the latest Web AppBuilder in AGOL June 26th update. Click on this link to access the 2.9 beta version.

 

Developer Edition 2.9 has made enhancements on multiple widgets. Now you can set relative time span and intervals to animate live data with Time Slider; filter multi-selection on a single field; swipe multiple layers at a time; honor zoom scale for the line and polygon feature search; move a point feature to manually entered coordinates or GPS location with Smart Editor; edit many-to-many related records; measure areas in 3D, etc. See the blog. 

 

Please use the Forums within the Early Adopter Community to communicate all your observations and feedback.

Thank you!

The Web AppBuilder for ArcGIS team

Photo by Chad Kirchoff on Unsplash

 

As mentioned in the Introduction to Web AppBuilder for ArcGIS Developer Edition training seminar, Esri Training Services has begun producing short videos on specific Developer Edition topics, including some that require no programming experience. Today we published the second video in the series, which explores the purpose and relationships of the files and folders commonly found inside a WAB DE custom widget. You can use this link to find the videos in this series:

 

www.esri.com/training/Bookmark/FKRAQTELZ

 

If you have feedback on the video, or would like to suggest topics for future videos, please leave a comment! When new videos get added to this series, I'll announce them here.

The WebGL rendering of feature Layer allows you to display more data in the map and update the visualization of features more rapidly. Although it is not supported in Web AppBuilder Developer Editon 2.8, you can manually opt in with the steps below.

1. Find the init.js file in the client/stemapp folder
2. Add a line to dojoConfig:

 

dojoConfig = {
   parseOnLoad: false,
   async: true,
   tlmSiblingOfDojo: false,
   has: {
   'extend-esri': 1,
   // add this line
   'esri-featurelayer-webgl': 1
   }
};

3. Save the file
3. Start Web AppBuilder Developer Edition 2.8 and create a new 2D app

 

To verify whether the layer is rendered in WebGL, access the layer through this.map.getLayer in the Widget.js file. Then call the following properties and method:

 

var layerId = this.map.graphicsLayerIds[0];
var layer = this.map.getLayer(layerId);

 

console.log("webgl enabled on map? ", this.map.webglEnabled);
console.log("webgl enabled on layer? ", layer.webglEnabled);
console.log("layer drawn with webgl? ", layer.hasWebGLSurface());

 

Also, see known limitations for the WebGL Feature Layer.

The v2.8 update includes the new capabilities that were part of the Web AppBuilder for ArcGIS online release this month as well as new documentation specifically on unit tests. See the ArcGIS blog below by David Martinez.

 

Web AppBuilder for ArcGIS v2.8 Developer Edition Now Available! 

Starting with Web AppBuilder for ArcGIS (Developer Edition) 2.8, the beta version for each release will be available in Early Adopter Community right after Web AppBuilder in AGOL update. So you can test the latest features and enhancements in Developer Edition beta as well as import the apps from AGOL when needed. Currently, Developer Edition 2.8 beta syncs up with the latest Web AppBuilder in AGOL April 11th update. Click on this link to access the 2.8 beta release.

 

Developer Edition 2.8 has more widgets for 2D apps, including Data Aggregation (beta), Distance and Direction, Gridded Reference Graphic, and Emergency Response Guide. For 3D apps, the dashboard theme and Measurement and Share widgets are available now. Key enhancements have been made to Edit for related feature editing, Legend for choosing layers to show legends, Smart Editor for editing related layers and tables as well as for defining attribute actions, and the statistic layer from the extra data source for a new option of the filter by extent. See What’s New from AGOL update. More SDK related topics will be added in the final release.

 

Please use the Forums within the Early Adopter Community to communicate all your observations and feedback.

Thank you!

The Web AppBuilder for ArcGIS team

Hi Custom Widgets community,

 

David Martinez and I will be presenting a 1-hour webinar on basic techniques to extend Web AppBuilder - specifically though custom widgets and custom themes. If you're interested and this would benefit you, we hope you'll join us. More information, including registration link, is in Amy's blog post: GeoDev Webinar Series Continues with a Welcome into the New Year! 

 

Thanks!

Gavin

Web AppBuilder Developer Edition v2.4 supports a Report class that enables you to print a file with a map, tables, and other supporting elements.

 

Check out the ArcGIS blog "Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class" that describes the basic steps of how you can extend the Report class to create your own custom widget that can be used in Web AppBuilder Developer Edition.

Hi Everyone,

 

The talk that George Bochenek and I gave at Dev Summit 2017 is now posted on YouTube. The slides are here, and be sure to check out the main two tools we mention in the talk:

 

We hope you will find it useful if you weren't able to make the talk in person. Thanks!

Using Web AppBuilder for ArcGIS (Developer's Edition), I tried my best to create the split two live charts; Service Requests and Work Orders (see piechart_servicerequest) on the same panel widget instead of clicking two link buttons (see piechart_widget) many times but they did not work properly. I am attaching the Chart Widget Folder and Web AppBuilder Folder. Can you please review these folders?

 

Let me know.

 

Thanks,

Sri