Web AppBuilder Custom Widgets Blog

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Latest Activity

(24 Posts)
LaurynasGedminas2
Occasional Contributor

Drone Video replay widget replays video files with associated metadata files. Video and metadata files can be hosted on premises or cloud storage buckets. Widget has specific functionality listed below:

  • Video replay
  • Synchronized video with flight track (click on the flight track or the video and video is replayed from that location)
  • Video query by extent
  • Video filtering by attributes
  • Follow the drone on the map
  • 360 degree video support: pan around, zoom  in

This widget can be hosted on premises or ArcGIS Online WebApp Builder Applications. User can choose where they want to host needed feature class, video and metadata files.

Technology used to develop this widget is JavaScript API 3.X and runs on ArcGIS Enterprise 10.5 or above.

LaurynasGedminas2_0-1631970571159.png

 

more
2 3 901
ShaikhNaseer
New Contributor II

#Splash #Loginform#WAB #Widget#customized 

How to achieve Login functionality by customized Splash Widget

 

1) Enable Splash Widget and modify Widget.html of splash to accept User credentials (add textusernametxtPassword).

 

2) under event onOkClick of Widget.js fetch credentials values and do $.ajax call for external web service for login. you have to refrence JQuery on index.html at the root of the application.

var user = $("#txtUserName").val();
var pass = $("#txtPassword").val();
$.ajax({

 url: "https://sampleserver.domain.com/Methodname_to_ValidateUsers?",
 data: { "UserName": user, "Password": pass },
 success: function (result) {
 
 if (result.Is_Valid_User == true) {
 // hide the splash 
 var me = document.getElementsByClassName("jimu-widget-splash-desktop jimu-widget-splash jimu-widget");
 var this.me = document.getElementById(me[0].id);
 thisme.style.display = "none";
 // do furter modifications as per results.values
 // set localStorage if needed
 }
 else {
 alert("Invalid Usename or Password");
 }
},
 error: function (err) {
 alert(err.status + " Please check service settings ");
 this.open();
 
 }
});

 

create a custom widget and use it whenever you needed in web app applications.

best suitable for separately deployed WAB gis applications.

feel free to discuss. sendtoshaikhnaseer@gmail.com

more
3 3 2,755
simoxu
by MVP Regular Contributor
MVP Regular Contributor

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.

more
9 13 4,418
ChatruNenavath
New Contributor

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

more
0 5 2,545
LefterisKoumis
Occasional Contributor III

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 programma... 

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;
    },
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

more
2 0 1,544
GavinRehkemper1
New Contributor III

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.

more
10 3 13.5K
Jianxia
Esri Regular Contributor

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

more
1 4 1,555
JasonHine
Esri Contributor

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.

more
2 7 1,672
Jianxia
Esri Regular Contributor

 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

more
0 4 1,835
JasonHine
Esri Contributor

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.

more
4 0 1,243
318 Subscribers