Web AppBuilder Developer Edition - Resource List (updated 5/13/2018)

122278
80
03-09-2016 11:11 AM
RebeccaStrauch__GISP
MVP Emeritus
106 80 122K

Web AppBuilder Developer Edition - Customization Resource List

This blog...last update: 5/13/2018  

Sorry....a bit behind right now(May)....  WAB Dev 2.8 available

5/13/2018 new widgets.  https://community.esri.com/people/joe.sapletal/blog/2018/05/09/web-app-builder-widgets-from-metrogis   (iPad not behaving for editing...look at link for three widgets)

https://community.esri.com/community/gis/web-gis/web-appbuilder/blog/2018/04/13/what-s-new-in-web-ap... 

https://www.esri.com/arcgis-blog/products/web-appbuilder/mapping/whats-new-in-web-appbuilder-for-arc... 

Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers      interesting that the date says JUNE 2018 (??)

Just looking for the custom widget list? =>  /blogs/myAlaskaGIS/2017/03/04/web-appbuilder-the-custom-widgets-list-332017 

The Resource list (this blog) will continue to be the main location for announcements, including any new widgets and updates, etc., as well as having direct links to the other topics.

Version 2.7 released   (January 2018)

-->  Web AppBuilder for ArcGIS v2.7 Developer Edition Now Available!! | ArcGIS Blog 

-->  Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers     included link for download

-->  What is Web AppBuilder for ArcGIS?—Web AppBuilder for ArcGIS | ArcGIS 

-->  What’s New in Web AppBuilder for ArcGIS (December 2017) | ArcGIS Blog 

-->  About release versions—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

-->  What's new in version 2.7—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

-->  New 1/22/18  Web AppBuilder for ArcGIS Developer Edition v2.7 enhancements  

This blog...latest updates:    

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

Current version:

My other WAB related blog posts:

Table of Contents/Categories (sorry no hyperlinks)  ---- updating.....:

  • Quick links/Notes

    • Current Version info

  • Pinned pages
  • Latest News and updates
  • Creating your own customer widgets..... moved to new blog
  • Mix-ins..... moved to new blog
  • Custom widgets and tweaks    ...moved to new blog
  •    ....

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

Quick Links/Notes:   

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

      Current version of WAB (v2.6 - Q3 2017  )

          Download: https://developers.arcgis.com/web-appbuilder/

      Pinned pages/links: 

      Latest Updates: (note: I try to list "What's New" here, so you know whether it is worth checking for changes.)

      CMV is built on top of the Esri JavaScript API so you can use your ArcGIS Server REST resources directly without using webmaps or portal. Services at ArcGIS Online and many other external services can be used as well.

      CMV includes numerous widgets available including a very robust layerControl (TOC) widget. If you prefer to use the WAB LayerList widget, you could do that too. With the upcoming version of CMV, you can use widgets created for the WebApp Builder without changing any code - either those that are included with WAB or those that developers have put together. I have created a github repo with a number of examples using WAB widgets here

      WAB items on the Ideas page ArcGIS Ideas.WAB.no distrintion between Online and Developer

      and implemented because of it )  ...Ideas implemented in the ArcGIS Online release (June 2016) | ArcGIS Blog

      filtered list of implemented items: ArcGIS Ideas

      Per Kelly Gerrow  ...

      The documentation has been updated to reflect the changes. In the blog, there are links to the ideas. On each idea, you will find a response that includes a link in the documentation that refers to the new functionality.

      --------

      Portal specific links and documents (testing Portal 10.5 now (March 2017)...these are older links for reference):  ...expect this to move to new blog

      Other discussions and widgets will be added as time allows.  Thanks to all that provide the widgets and coding tips.

      **************************************************************************************************************

      Please remember, custom widgets are created and provided by the generosity of the

      other users in the community, like you. Most have real jobs too. So, be patient and

      appreciative for the tools and advice they provide.

      *************************************************************************************************************

       

      80 Comments
      TimWitt2
      MVP Alum

      Rebecca this is a great resource! 

      VenusScott
      Occasional Contributor III

      Once again Rebecca, thank you!

      MichaelJenkins
      Occasional Contributor III

      Excellent resource, thank you!

      RebeccaStrauch__GISP
      MVP Emeritus

      Thanks.  I've made several updates today.  If anyone of you Tim WittVenus ScottMichael Jenkins‌ are following the blog by email, can you tell me whether you actually received an email when I updated (should have been about 6 today).....not just this email if you are following me.  Thanks.

      TimWitt2
      MVP Alum

      Rebecca,

      I have it set-up to only send me e-mails when I'm mentioned. I got that e-mail.

      Tim

      VenusScott
      Occasional Contributor III

      I got your update at 6:07pm on 2/23/15 via email!

      RebeccaStrauch__GISP
      MVP Emeritus

      Thanks Tim and Venus.  I had a statement in the blog that said if you follow the thread by "inbox" you would see when I updated....but not sure if that is really true, and no way to test (being the author).  I guess I won't worry about it, and just hope folks check back once in a while to see any updates.

      TimWitt2
      MVP Alum

      Update it and I will check.

      VenusScott
      Occasional Contributor III

      I am getting them.

      TimWitt2
      MVP Alum

      If you just updated it, I didn't get a message. Maybe I have it configured wrong.

      RebeccaStrauch__GISP
      MVP Emeritus

      I just updated and published a couple times this morning.  There may be some lag, but I would think you would get them.  Of course, now you are getting notifications just because of this comment section, I think.

      LarryStout
      Occasional Contributor III

      Rebecca,

      I have updated my documentation to include some enhancements to Esri's Bookmark and Draw widgets.  The new document link is ftp://ftp.hamiltoncounty.in.gov/GIS/AWAB/DOCS%20-%20AWAB%20Viewer%20Enhancements%20and%20Extensions....

      I've added an appendix to track changes to the document, so this should be the last time its link changes.

      Larry

      RebeccaStrauch__GISP
      MVP Emeritus

      Thanks Larry.  i updated the link.

      Suggestions:

      • try to avoid spaced in the URL and zip file name.  Make's it messy to look at (i.e. space = %20)
      • It would be helpful to have the last updated date at the top.  I know this isn't probably the proper format for what i assume is an official doc, but would make it easier for those of us that need it.
        • But better yet, create a new discussion in Web AppBuilder Custom Widgets‌ when you are ready, and I can link directly to that.  Then you can edit your (original) post add an "updated: date" each time.  that way it will be quick for users to see if they have the latest or not.

      I won't be able to keep dates and/or version numbers refreshed in my blog above.  I would have to hit each every day, so better for me to just keep the link up to date, and have the individual author to help out with the "last update" info, most likely as part of their process anyway.

      Thanks

      LarryStout
      Occasional Contributor III

      I'm not trying to make work for you.  For now, I've made a copy with no spaces:

      ftp://ftp.hamiltoncounty.in.gov/GIS/AWAB/DOCS_AWAB_Viewer_Enhancements_and_Extensions.zip

      The old one is still out there, so let me know when you have changed your link and I'll delete it.

      The document itself has a date and an update history.  That's the best I can do for now.

      Thanks for doing this.

      Larry

      RebeccaStrauch__GISP
      MVP Emeritus

      Thanks Larry.  I have updated the link in the blog post.  The suggestion about posting yourself is then you can control content and "get credit" and points, vs just me listing.  But I'm happy to just list the direct link until you have time or desire to do your own post.  I appreciate your sharing of the info!

      StanMcShinsky
      Occasional Contributor III

      Rebecca Strauch‌,

      I just created and uploaded a new street view in popup widget that you can add to this list.

      Street View in Popup Widget 1.1.0.1

      RebeccaStrauch__GISP
      MVP Emeritus

      thanks Stan McShinsky‌   I was actually just in the process of that!  should be there now.   i actually grouped is with the Google view widget Robert Scheitlin, GISP‌ has, and re-named my grouping Streetview.  That was users can see options of similar.  Not sure how similar or dissimilar they as, but that is up to the user at this point. (sorry, haven't had a chance to try either yet).

      TimWitt2
      MVP Alum

      Rebecca Strauch‌ I am slowly moving over my advanced draw widget to also be available in the WebApp builder. Here is the link to the document Enhanced Draw Widget

      BrianWays1
      New Contributor III

      This is sweet

      RebeccaStrauch__GISP
      MVP Emeritus

      Thanks Tim Witt‌  I added the link in a new section, under the edraw section. I'm trying to keep like topics together, as much as possible, since everyone has different requirements and might need options.

      At some point I'll have to work on a reformat of this page...starting to get long.......

      MelanieHammond1
      New Contributor III

      Has anyone seen the widgets posted that were introduced to the AGOL version of Web AppBuilder? Looks like a new Analysis, Time Slider, and Swipe widget were released. ArcGIS Online | What's New - March 2015

      BrianWays1
      New Contributor III

      Are these going to be available on the local version?

      RebeccaStrauch__GISP
      MVP Emeritus

      My guess is yes, when the next version of Web AppBuilder dev edition is released.  I do not have a date of release, but typically AGOL is updated first and more often.  Portal and WAB-Dev lag behind.​

      MichaelJenkins
      Occasional Contributor III

      Today we posted a Beta version of our new WAB based app.   This is going to finally replace our ArcIMS app that has been used by thousands of people every day for about 13 years!

      Many thanks to the developers and resources here on GeoNet.  We've incorporated a bunch of the customized widgets listed here including eSearch, eDraw, StreetView and URL tracker.   We are probably going to add Tabbed Splash screen and Print+ in a few weeks as well.

      King County iMap

      I'll be at the DevSummit next week, hope to met some of you there!

      - Michael Jenkins

      StanMcShinsky
      Occasional Contributor III

      Michael,

      We are in the same boat. ESRI has been in the mindset for a while of single task maps. We have been in the need of a map that could be used as a kitchen sink to see all kinds of data with more then just a single workflow. There have been some promising options and templates out there, but when Web Appbuilder came along it was heaven sent. Very little coding to get all the rich features we needed. We too are replacing a catch-all map that was built using ArcIMS by people before I got it. It has been running by a thread and WAB now replaces all the functionality and then provides a ton more. Our users are loving the new map. Thanks ESRI and GeoNet crew for making me look like a rock star.

      KarstenRank
      Occasional Contributor III

      Is it possible to download an Web Map Application from AGOL?

      StanMcShinsky
      Occasional Contributor III

      Karsten Rank

      You would need to follow the instructions here:

      Download app—Web AppBuilder for ArcGIS | ArcGIS

      This will allow you to down load and configure the WAB viewer and use your map from AGOL WAB. It is not the developer edition.

      -Stan

      KarstenRank
      Occasional Contributor III

      My problem is, that Code Attachment is NONE

      StanMcShinsky
      Occasional Contributor III

      Karsen,

      Make sure you follow step 2 and uncheck to show results only from your organization.

      Here is the page you should be finding:

      http://www.arcgis.com/home/item.html?id=fffd70b754594c54bc58d90d4e897e19

      This is a blank esri viewer/template that is pre-compiled. You then need to replace the config file with the steps under "Deploy the app" and you should be good.

      -Stan

      KarstenRank
      Occasional Contributor III

      It worked fine! Thanks a lot Stan!

      SrisubrahmanyaNandula
      New Contributor III

      Topic : Customizing and Extending the Web AppBuilder for ArcGIS (JavaScript)

      As I am discussing with all of you, how to add 'x' buttons to close tabs in the attribute table in Web

      AppBuilder. It is a general programming question. I don't know how to customize and insert the new scripting into my javascript file : "widgets\AttributeTable\nls\Widget_en.js"  below:

      /***************************************************************************************************************************/

      //>>built

      define({"dgrid/extensions/nls/pagination":{status:"${start} - ${end} of ${total} results",gotoFirst:"Go to first page",gotoNext:"Go to next page",gotoPrev:"Go to previous page",gotoLast:"Go to last page",gotoPage:"Go to page",jumpPage:"Jump to page",_localized:{}},"dgrid/extensions/nls/columnHider":{popupLabel:"Show or hide columns",_localized:{}},"widgets/AttributeTable/nls/strings":{_widgetLabel:"Attribute Table",ok:"OK",cancel:"Cancel",exportMessage:"Export data to CSV file?",exportFiles:"Export to CSV",

      options:"Options",zoomto:"Zoom to",highlight:"Highlight Graphics",selectAll:"Select Records in All Pages",selectPage:"Select Records in Current Page",clearSelection:"Clear Selection",filterByExtent:"Filter by Map Extent",refresh:"Refresh",selected:"selected",transparent:"Transparent Mode",indicate:"Locate Selection",columns:"Show/Hide Columns",selectionSymbol:"Selection Symbol",closeMessage:"Hide Table (expand it again from the bottom)",dataNotAvailable:"Data not available!\x3cbr\x3eClick [Refresh] button to try again.",

      openTableTip:"Open Attribute Table",closeTableTip:"Hide Attribute Table",_localized:{}}});

      /**************************************************************************************************************************/

      Please help me to solve the problem re: to add 'x" buttons to close tabs in the attribute table in Web AppBuilder for ArcGIS.

      RebeccaStrauch__GISP
      MVP Emeritus

      Srisubrahmanya,

      i suggest you ask your question in Web AppBuilder Custom Widgets​  .   If you use the advanced editor, you should be able to insert your formatted code so others can read and have a better chance if helping.

      SrisubrahmanyaNandula
      New Contributor III

      Hi Rebecca,

      I don't know how to add 'x" buttons to close tabs in the attribute table in Web AppBuilder for ArcGIS using JavaScript. Please let me know how to solve the problem.

      Thanks

      RebeccaStrauch__GISP
      MVP Emeritus

      Srisubrahmanya Nandula,

      i created a "question" for you in Web AppBuilder for ArcGIS which will give you a better chance to get an answer since I do not know the answer.  You should have received notice of that thread, but if not, Is it possible to add an 'x' to close tabs in attribute table?

      for for some tips from me for getting started with GeoNet, you can check out Tips for Getting Started on GeoNet (general and Alaska User Group specific)      which is not the official or complete GeoNet Help​ but has some simple tips for getting started.  Keep in mind I have not updated the Tips document lately, so some GeoNet updates may not be included.

      I hope this helps and someone can help you with your question.

      SrisubrahmanyaNandula
      New Contributor III

      The link address of Web AppBuilder for ArcGIS for King County, WA is http://gismaps.kingcounty.gov/iMap/?center=-13574069%2C5996175&scale=1155581.108577&

      I did not find example of code for this website.  Can you please send me the ftp folder of code examples?

      Thanks,

      Sri

      RebeccaStrauch__GISP
      MVP Emeritus

      Hi Sri,

      I don't think they have posted code for King County iMap but it sounds like they have used the various custom widgets and built in widgets available for download (in the Resource List document above).  From there, it would be a matter of customizing for your own services and needs.

      Michael Jenkins​ provided the link to their beta site and may be able to provide more details.

      MichaelJenkins
      Occasional Contributor III

      That's right, Rebecca, we have built a WAB application using several of the widgets that are here on your list.  Currently we are implementing the url tracker, eSearch, Google StreetView, and an enhanced measure tool.

      Our users are pretty happy with most of these tools but the enhanced measure tool is not working out so well.  Because it only displays the measurements as text on the screen, if a user draws more than a couple of line segments (or short segments) then it becomes very hard to read, plus there is no way to copy the measurement text to your clipboard.  The Esri measure tool is very simplistic, but it is easier to use and easier to see your measures.  The enhanced measure tool has so many drawing tool options that many users look at it and don't know what to do to measure.

      We had also started to use the eDraw widget, but we got inconsistent results with it and removed it.  Text was the biggest problem. If you place more than one piece of text it would often continue to add the first text, and if you try to edit the text after it is placed, we had to save twice in order to see the change.   It has many great features and we hope it can be fixed so that we can offer it once again.

      by Anonymous User
      Not applicable

      Thank you  rastrauch for this thread. Our User Community rocks! #winning​ !

      deleted-user-Xi8z5Zq24xyX
      New Contributor

      Does anyone no how to turn off, move or at least reduce the size of the "Powered by ESRI" badge in Web App Builder 1.1? ESRI here in Sweden say it is possible (although only allowed if you are not using an ESRI basemap), however they do not provide support for Web App Builder.

      LarryStout
      Occasional Contributor III

      Mark,

      The Esri logo is by default, 65px wide and 32px high.  You can change this with a CSS selector in the css/style.css file of any widget that loads on startup:

      .map .logo-med {

        background-size: 32px 18px;

        background-repeat: no-repeat;

      }

      You can turn it off this CSS selector:

      map .logo-med {

        display: none;

      }

      Larry

      deleted-user-Xi8z5Zq24xyX
      New Contributor

      Thanks a ton Larry!

      MichaelJenkins
      Occasional Contributor III

      Another way to turn off the logo is to go into the config.json file and look for the "mapOptions" item and add

      "logo" : false,  -- it is on line 236 in mine but could be anywhere.

      The original code will look something like this:

        
      "mapOptions": {

               "extent": {

                      "xmin":-13640110.909870049,

                      "ymin":5954211.294452187,

                      "xmax":-13479287.402357975,

                      "ymax":6073758.806690248,

                      "spatialReference":{ "wkid": 102100}

                      }

          }

      Change to:

          "mapOptions": {

               “logo”: false,

               "extent": {

                      "xmin":-13640110.909870049,

                      "ymin":5954211.294452187,

                      "xmax":-13479287.402357975,

                      "ymax":6073758.806690248,

                      "spatialReference":{ "wkid": 102100}

                      }

          }

      TimWitt2
      MVP Alum

      Rebecca I have added 2 live sites for my widgets:

      Advanced Draw: ArcGIS Web Application

      Location: ArcGIS Web Application

      Tim

      RebeccaStrauch__GISP
      MVP Emeritus

      Thanks Tim.  I've added the links to the blog.

      I like that you added the option for UTM and other projections (from wkid)...and it geocoded (when there was actually an address).  Very cool.

      A little bit of strange behavior between browsers.  IE9 seems to behave as expected.  FireFox (37.0.2), when using the number pad on the the side of the keyboard accepts the first number in the field, then wants to navigate.  Chrome (latest) wanted to navigate the first time I tried, but working better (maybe user error)  These where just quick tests, and sure not critical, but thought I'd mention.  just fyi.

      MassimoBisogno
      New Contributor II

      Rebecca this page is very very useful. Many thanks

      RebeccaStrauch__GISP
      MVP Emeritus

      Thanks Massimo. I'm glad to know it's still helpful and relevant to others (and me too).​

      MartenHogeweg
      Esri Contributor

      for those interested in finding services (from ArcGIS Online, Geoportals, and 3rd party catalogs) and adding those to a built app, check out the Geoportal Search widget:

      geoportal-server/components/wab/GeoportalSearch at develop · Esri/geoportal-server · GitHub

      You can try the widget at: http://gptogc.esri.com/geoviewer

      OmolaraKareem
      Occasional Contributor

      Hi Rebecca,

      (I inadvertently deleted our posts, where you answered some of my questions, then pointed me to Tapas Das's post "Using the Web AppBuilder".)

      Thank you for directing me to Tapas Das's detailed 'how-to' set up the Web App Builder 1.1.

      I have finally succeeded in getting it working:

      I proceeded to import a Web App I had created previously in Portal for ArcGIS (shown directly below):

      Importing the Web App was successful. However, the operational layers of the map are missing.:

      Do you have any idea what the problem may be?

      Lara

      RebeccaStrauch__GISP
      MVP Emeritus

      Ha....yes I was wondering about the other link...got an error when I went to it.

      I'm glad you were able to get this far with Tapas' doc.  My blog it short and works for most, but Tapas has put in a lot of time to get his document put together.

      As for the issue of the operations layers not showing, I don't know specifically what would cause this, but would check 1) if the layers are public, that is your client can see them; and 2) you may need a proxy for cross-domain purposes and/or if security is in place or a token is required.

      I haven't actually used a full AGOL  web map for my WAB.  I use it to grab the basemap I need (and is required), then I use the LocalLayer widget to add my services directly from my ArcGIS Server services.  Links to the widget and other related docs are above, including my Tips for using the custom LocalLayer widget with WAB-Dev edition​  and of course Tapas has additional info on that too.

      I haven't been using WAB lately (on other projects) and I'm waiting for the release of 1.2 which is due out any day.  That will incorporate many of the latest enhancements that have been released on the online version.  It's good that you are making progress and figuring out some of these issues now.  Keep notes, because you most likely will want to upgrade when it is released.

      CecilioMartinez
      New Contributor II

      This is great Rebecca!  I keep coming back to this for references and updates!  Keep it up it's very helpful and appreciated!

      About the Author
      Worked with GIS for 30+ years for the Alaska Dept of Fish and Game.