Experience Builder Tips and Tricks - Page 4

Have you ever dropped in a widget into your page, got all the options and interactions set up just the way you want it and then realized it should really be in a Widget Controller in your header. So you drag your widget up to put it in the header, only to find there is an impenetrable force field keeping your widget from where you want it to be. So, you sigh and delete your widget and configure it all again in the header?

I've done it. Multiple times.

But don't, there is an easier way. You can't just move a widget in or out of a header, but you can copy it in.

1. Click the widget you want to move.
2. Use ctrl-C on your keyboard.
3. Click on the Edit Header button.
4. Use Ctrl-V on your keyboard. A copy of your widget with all of your configuration should now be in your header. 
5. Drag the widget into the Widget Controller and fix the title. (It will be Widget 2 now.)
6. Delete the old widget.

Bonus Tip: Headers and Footers are only useful if you are planning to reuse items in a multi-page Experience. If you are making a single page application, save yourself the hassle and use one of the Layout widgets.

If you are on Developer Edition, here is a set of links to custom widgets you may find useful. I have used most of these myself. Please post any other widgets you find useful in the comments.

• Add/Remove By Group - Allows end users to add/remove sets of related layers as groups.
• Draw - Offers more drawing and editing options than the default draw widget, including support for text. I recommend my visually enhanced version.
• Enhanced Coordinate - Displays coordinates, zoom, scale, tilt and rotation and links to Google Maps.
• Enhanced Locate - Search for a location in any spatial reference and reverse geocoding. 
• Feature Panel - Retrieves data for all features at a clicked mouse location. Can be placed in an auto-opening sidebar.
• Identify - Much like the Feature Panel widget, but with a tabbed presentation, ability to be enabled/disabled by the end-user and can be triggered by the related search widget. Identify for Experience Builder 1.14.
• NearMap - Displays NearMap aerial imagery with option to compare two images in a swipe.
• Previous Extent - Back and forward buttons for your map.
• Rain Radar - Live weather radar.
• What3Words - Get the What3Words location of a mouse click.
• XBUI and XBUI Search - XBUI is intended as an all-in-one user interface with Table of Contents, Bookmarks, Advanced Search and Selection options and Tables. XBUI Search is focused on the search and selection aspects of the widget. Note: these widgets are developed by a consulting firm, Engineering Mapping Solutions, contact them at Marko@emsol.com to learn more.

This series of videos presented by GISman Lee will show how to develop a customised hierarchy-layer widgets in new ArcGIS Experience Builder with React.js, ArcGIS Javascript API & Reactstrap, as well as how to deploy Customised ArcGIS Experience Builder App on ArcGIS Enterprise.

Let's start moving from the old ArcGIS Webapp Builder to the new esri product. Initially 3 parts in total, maybe more in future.

https://www.youtube.com/watch?v=A-D0wAD1jUA

This YouTube video tutorial by GISman Lee presents an easy way to implement the communication among multiple customized widgets in ArcGIS Experience Builder.

With this method, you don't have to follow the complex ways of doing so as written in the Esri ArcGIS Experience Builder official website.

The method here is to combine the in-built Redux of ArcGIS Experience Builder with the ReactJS Life Cycle Functions, to establish a "pulling" style of message transactions.

https://www.youtube.com/watch?v=gQAqoasLkgY

Here is a comprehensive tutorial for absolute beginners on ArcGIS Experience Builder Developer Edition 1.12.

https://daviddas2.github.io/exb/

This app is mobile friendly. It collapses gracefully to fit a Tablet or Smartphone in portrait and landscape mode.

No programming is necessary. The two custom widgets for Google Earth and Pictometry come preconfigured.

The first 3 parts of this Tutorial can be done using the ArcGIS Online Edition of the Experience Builder.

This guide is copied from a post by @TonghuiMing. https://community.esri.com/t5/arcgis-experience-builder-questions/overwrite-default-map-filter/m-p/1...

The first option is that you can configure a filter widget with clauses like the following - one clause with a solid none case, like ("OBJECTID=-1"), and not ask for values; then add other clauses that ask for values (they must not contain preset values, being all empty to make it work). Remember to set the logic operator to "OR":

Last but not least, you need to turn on the option "Apply this filter automatically". In this way, you will have the following behavior which starts with none on the map and filter by the desired/input values.

The second is pretty much the same but could be a little more straightforward - add a single filter item to do the above configurations, with only that special clause & turned on automatically. In other filter items, add the criteria for your cases. You can use OR/AND depending on how you want your users to experience:

Additional Tip: If you want to hide something in a feature layer completely from the user, you can set a filter in your webmap. Users in this example will never see a park that without the DevelopmentClass of Developed.

To change the icon displayed for a widget in a Widget Controller, simply click the icon in the Settings panel. You can upload your own icon with the plus sign at the bottom of this window. The box (black by default) in the lower right lets you pick the icon's color.

Rename titles by clicking the title of the widget in the settings panel.

Similar options are available for renaming or changing icons for sections and pages. (Just click on names and icons. You'll find them.)

ESRI documentation is only a click away.

A place for Experience Builder designers to share guides, tips, tricks and easily overlooked stuff, so we can all make better Experiences with fewer headaches.