Experience Builder Tips and Tricks - Page 9

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. Please post any other widgets you find useful in the comments.

• ABLS - A Better Layer Switcher. Change between sets of layers, including timeline filters.
• Add, Map and Edit Data - Import a dataset, do some field mapping and then edit the data.
• Add/Remove By Group - Allows end users to add/remove sets of related layers as groups. The Add/Remove 2.0 Version creates the layers as an Experience Builder datasource. The 3.0 Version includes an option for end-users to make their own groups and makes it fully configurable from the Settings Panel.
• Basemap Gallery - A Basemap Gallery with more functionality and customization options than the OOTB Widget.
• Basemap Toggle - Imports the Basemap Toggle Component from the JavaScript API.
• Calendar - Uses calendar format for filtering, zooming and other Actions.
• CamViewer - Allows viewing of .m3u8 camera streams.
• Clock - A real-time clock with multi-time zone support.
• Cloud Widget - Allows users to save a map state and share it with other users.
• Create Group Layers - Allows end users to create their own layer groups that can be visually toggled as groups.
• CSV Geocoder - Converts a CSV file into GeoJSON, KML or shapefile format.
• Custom Editor - Adds measurements in acres and improved snapping.
• Custom Pill Filter - A copy of the built in Filter Widget with additional styling options.
• Draw - The latest version of this Draw Widget offers a long list of features not currently offered by the ESRI Draw/Measure Widgets, including line segment measurements, multiple import/export option, local file storage, buffers, point symbol rotation, arrowheads on lines, make your own units, a list of drawn graphics and more. Older versions: the original, the facelift of the original and the 1.17 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.
• Enhanced Measurement - Measure stuff in many different ways and export the results.
• Fancy Filter - Automatically creates a set of filters for layer with a Unique Value Renderer. Two versions: one optimized for a single layer designated by Builder and the other allows for the end-user to change layers at runtime. 
• Feature Panel - Retrieves data for all features at a clicked mouse location. Can be placed in an auto-opening sidebar. (Note: has been broken since 1.13. It will take extensive modifications to work in the latest versions.)
• FeedSimple - View data and feature layers from RSS, GeoRSS, XML and Atom feeds.
• Grid - Put an overlay grid on your map.
• 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.
• Identify By Query - A more advanced version of the Identify Widget. Primarily designed as a popup replacement. Accepts the Record Selection Change Action from OOTB Widgets. Integrated with the Custom Draw Widget. Many user and Builder options.
• Interactive Legend - Imports the Interactive Legend Component created for the Interactive Legend Instant App
• Layer Focus - Turns off visibility of all layers but the focused layer.
• Layer Toggler Button - Designed to visibility on and off sets of layers with a single button.
• Mailing Labels - Generate a set of mailing labels from selected data.
• Map Layers - A customized version of the Map Layers Widget with smart expansion of layer groups.
• Map Switcher - Designed for switching between Experience Builder projects and zooming to the same map extent.
• Mapillary Explorer - Designed for viewing crowd sourced street level imagery.
• Measurement - Since the June 2024 Online update, many users have been reporting poor performance with the built in Measurement Widget/Map Tool. Here is an alternative.
• NearMap - Displays NearMap aerial imagery with option to compare two images in a swipe. Re-built for Experience Builder 1.19.
• New-Radar - For viewing time enabled weather radar. 
• Parcel Drafter - Designed for making parcel polygons using traverse measurements.
• Print Advanced - Use a Pro Layout file or Print Service to generate a print out. End users have more styling options than in the standard Print Widget.
• Print With Overview Map - Makes a printable map layout with an zoomed out overview map.
• Previous Extent - Back and forward buttons for your map.
• Property Report - For accessing a wide variety of information related to a property, including related records and nearby features, using text, charts, and graphs and exporting it to a PDF.
• QuerySimple - For building complex queries with many user facing options.
• Radio Layers - Controls your map layers with radio buttons.
• Rain Radar - Live weather radar.
• Right Click Widget - Adds a context menu with many functions when right clicking on map.
• Save Instance - Save the current state of an application to resume later or download and share.
• Search Custom - Version of OOTB Search Widget with additional customization.
• Sharepoint - For interacting with Sharepoint documents.
• Show On Map Widget - Gives end users control over the Show On Map highlighting and ability to save these subsets.
• Sidebar Custom - A modified Sidebar Widget that auto-opens when Add To Table or View In Table Actions are triggered.
• Single Layer Opacity Slider - Control the opacity of a single layer including basemap layers.
• Slider Filter - A filter with slider a based user interface designed for value ranges.
• Traverse - Designed for building polygons based on survey descriptions.
• What3Words - Get the What3Words location of a mouse click.
• What's New? - Communicates to users recent changes to an application.
• 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 [email protected] to learn more.
• Zone Lookup - For finding what polygon an address in located in.
• Zoom - Allows users to manually set the map extent.

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.