Skip navigation
All Places > Web AppBuilder Custom Widgets > Blog

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

FYI: The Imagery Development team have release a collection of widgets that are specifically designed to work with image services. They're available for download from GitHub.

 

Image Service Widgets for Web AppBuilder for ArcGIS | ArcGIS Blog 

 

Sample demo app: http://esriurl.com/LandsatOnAWS  

 

Download link: GitHub - Esri/WAB-Image-Services-Widgets: WAB widgets specific to image services – WABIS 

 

Enjoy,