Tutorial on using the Experience Builder

02-17-2022 02:57 PM
Labels (2)
Occasional Contributor II


Here is a step-by-step Tutorial for creating a simple Web App using the ArcGIS Online version of the Experience Builder.

You can view this Tutorial in HTML format.




You may download the entire Tutorial as a single PDF File.




You will be using the following widgets.


  • Map Widget
  • List Widget
  • Survey Widget
  • Widget Controller
  • Table Widget
  • Search Widget
  • Query Widget


Here is a preview of the Web App you will be creating:







If you want to add Custom Widgets, you will need to use the Developer Edition of the Experience Builder.

You can view this Tutorial in HTML format.




You may download the entire Tutorial as a single PDF File.




You will learn how to add the following Custom Widgets designed by Robert Scheitlin.


  • Print Widget
  • Enhanced Locate Widget
  • Measure Widget
  • Draw Widget


Here is a preview:


Note: You must use Firefox to open this.






Best regards,

David Das







20 Replies
Occasional Contributor

@DavidDas__GISP thank you very much for the tutorial and efforts!  What you put together helps fills a big gap in Esri's Experience Builder documentation, namely, the lack of examples to help clarify the implementation and use of the various features, including the widgets.    ESRI - TAKE NOTE PLEASE!!!!

Question:  I implemented the Query widget for a couple of parcel feature layers we use.  In Spatial filter, for "Geometries from a map," it will show the features which intersect the shape drawn (as documented).   Is there a way to just return those >>within<< a shape drawn (e.g. rectangle or polygon)?

Also, in "Selected features from data source" (n the Query widget), there is "Spatial relationship rules."  I cannot find an example which clarifies the use of such, and how it would be helpful.  Do you have anything to add to this, based on your experience?



Occasional Contributor II

Hi John,


Thanks for the kind words!


Question 1:  I implemented the Query widget for a couple of parcel feature layers we use.  In Spatial filter, for "Geometries from a map," it will show the features which intersect the shape drawn (as documented).   Is there a way to just return those >>within<< a shape drawn (e.g. rectangle or polygon)?

Answer: You are correct. The Query Widget will only return features that intersect your drawn shape.


You would like to see an enhancement to return features that are within your drawn shape.


Explanation: When you select Geometries from a map




Check Drawn graphic




It will only select features that intersect your drawn graphic.




The Query Widget will return all the Parcels that are intersected by the Rectangle.




You would like to add an option to return only the parcels that are within your Rectangle.


I would like to have this enhancement added as well!


I can use the Point Tool to add a point on the map.




This will return a single parcel which is intersected by the point.






Question 2:

Also, in "Selected features from data source" (n the Query widget), there is "Spatial relationship rules."  I cannot find an example which clarifies the use of such, and how it would be helpful.  Do you have anything to add to this, based on your experience?




I agree with you. There are no examples to showcase the power of the advanced capabilities of the Query Widget.


What the Query Widget allows you to do is find features on your map that Intersect, Cross, Overlap, Touch another feature on the map.


For example:


  • Find all the Parcels that lie within a selected Zip Code.
  • Find all the Parcels that lie within 1000ft of a Zip Code
  • Find all the Parcels that Touch a selected Zip Code
  • Find all the Sections that cross a Zip Code
  • Find all the Zip Codes that are within 0.5 miles of a selected City


This is classic Spatial Analysis.


The Query Widget that was recently added to the Experience Builder encapsulates the power of GIS in performing Spatial Searches.





Turn on Spatial Filter | Filter by | Selected features from data source




Add Filter Layer





Add all the layers you have in your Web Map





Select all the Layers




Open your Parcel Query




By default only 1 Spatial Relation Rule is enabled.




Expand the drop down and enable all 8 rules








Now you are ready to run your Spatial Analysis.


You can set your Spatial Filter to Selecting Features from a data source





Or, you can set your Spatial Filter to Drawn Graphic





Example 1:


Find all the Parcels Contained in Zip Code 85322


Select Zip Code 85322 from the List Widget




Set your Filter Layer = Zip Code






Set your Spatial Relationship = Contain











The Spatial Search returns 1108 parcels





The results are shown 100 per page.

You have to page through to see all the 1108 parcels.



Clicking on a result will zoom to the Parcel.






Example 2:


Find all parcels that Overlap the boundary of Zip Code 85322







There are 127 Parcels that Overlap Zip Code 85322





This is due to inaccuracies in the geometry of our Zip Code and Parcel Boundary Layers.

Zip Codes do not normally intersect Parcel Boundaries.

But you get the idea.


You will soon have an alternative solution to the Query widget


The Enhanced Search Widget by Robert Scheitlin.


Robert designed the Enhanced Search Widget for the Web AppBuilder Developer Edition that combines all the Attribute Search, Graphical Search and Spatial Search into a single widget that is simple and intuitive to use.


Here is a demo on how it works:







Search for the example Parcel 211-67-062E


The map zooms to the selected Parcel





Example 1:


Let’s say you want to find all the Parcels within 300 ft of your selected Parcel.


Open the Spatial Tab


Click on the Buffer Tool


This draws a 300 ft green buffer around your selected Parcel




Click on the Intersected By Tool.




Choose Buffer





There are 15 Parcels within 300 ft of your selected Parcel





Example 2:


Find all the Parcels within 300 ft of a point on the map



Open the By Shape Tab


Engage the Point Tool.


Drop a point on a Street Intersection.




8 Parcels are found





Example 3:


Find all the Parcels that Touch these 8 Parcels


Open the By Spatial Tab


Click on the Touched By Tool




This time choose Selection




There are 14 Parcels that touch your original selection of 8 Parcels





Example 4:


Find all the Zip Codes that are within 0.5 miles of a City


Open the By Value Tab


Select City of Chandler







Open the By Spatial Tab


Draw a 0.5 mile Buffer around the City of Chandler





Select Zip Code from the drop-down list.





Engage the Intersected By Tool





Select Buffer





There are 18 Zip Codes within 0.5 miles of the City of Chandler





For a more detailed explanation of the features and capabilities of Robert’s Enhanced Search Widget see this User Guide:




Robert is in the process of migrating his Custom Widgets from the Web AppBuilder platform to the Experience Builder platform.





The Enhanced Search Widget is the centerpiece of all our Web AppBuilder Apps.


We are anxiously waiting for this widget to be ported to the Experience Builder Developer Edition.


Until this happens, you can always develop your Web Apps using the Web AppBuilder Developer Edition and then embed that into an Experience Builder Website.


For example, here are 4 Web AppBuilder Apps within a multi-page Experience Builder website.








The Web AppBuilder and Experience Builder platforms offer an elegant solution for creating beautiful, interactive and responsive web apps and websites without writing a single line of code!


Best regards,


David Das


0 Kudos
New Contributor II

@DavidDas__GISP thank you very much for clarifying things with examples, esp with the spatial analysis.  They answered more of my questions than Esri's documentation did.

Regarding the issue of the lack of a feature which would allow you to select parcels Contained in a drawn polygon (as opposed to intersecting such), I thought I had a scheme but, after testing, it did not work.  Let me explain, and perhaps you have an answer ...

First, for my web map, I created 3 simple geometry feature layers:  a point layer, a line layer, and a polygon layer.   

Next, I added all 3 geometry feature layers to my web map.

Next, in Experience Builder, I added the Edit(beta) widget and tied it to the three geometry feature layers.  This allows me to add points/lines/polygons to the map while using the web app, or modify such, or delete such.  This works like a charm.

Following your info above, I added a Query tied to my Parcel feature layer.  During configuration, in the Select data pane of Add Filter Layer, I figure I would select the point, line, and polygon layers which I added to my map.  However, when I descend into my map's layer "tree" I do not see them!  In fact, there is only a small subset of geometry feature layers I see which I can select in my web map.  I have no idea why this is.

Well, be that as it may, I clicked on "Add Data" at the bottom and separately selected the 3 feature layers.

When I bring up my web app, I turn on the parcel feature layer as well as the point, line, and polygon feature layers in my map.  With the Edit(beta) widget, I draw a polygon around a set of parcels (again, this polygon is tied to the polygon feature layer).  Next, I select the drawn polygon (yes, it becomes highlighted).
Next, I bring up the Query widget.  While the polygon feature layer appears in the pull-down list, the text below the list says 0 features are selected (eh?  the polygon is selected).  I set the spatial filter to Contain, then run.  No parcels selected.  I then tried using Within.  Still no go.

My suspicion of why my scheme did not work is that, when configuring the Query widget, I selected the polygon feature as a separate layer outside of my web map, rather than a feature layer within my web map

0 Kudos
Occasional Contributor II

Hi John,


Thanks for that detailed explanation of how you created your Web Map, and added the Edit Widget in Experience Builder that allows you to draw points, lines and polygons.


Let me set up a test case and see if I can reproduce the problem and explore if there is a solution.


I understand all you want to do is draw a rectangle, circle or polygon and find all the Parcels that are fully contained.


At the moment the Query Widget allows you do draw any shape and return features that intersect them.


Best regards,



0 Kudos
Occasional Contributor II


Hi John,




It is possible to select polygons that are Contained in a drawn polygon within the Query Widget.


I followed your idea of drawing a polygon with the Edit Widget and then running a Spatial Search using the Contained Rule.


All the Spatial Relationships within the Query Tool are honored including Contain.


I made this simple Experience Builder Project for you to try out.







This has 4 layers:


  1. Schools = Point Layer
  2. Street = Line Layer
  3. Polygon = Template for adding polygons to your map using the Edit Widget
  4. Parcel = Polygon Layer






First, try out the basics.


Example 1:


Find the Parcel that Intersects Desert Mountain School


Select Desert Mountain School from the List Widget.





Open the Query Widget and Select Parcel as your Search Layer





Set your Filter Layer = Schools

Relationship = Intersect







1 Parcel is found





Set Relationship = Within





Again 1 Parcel is found.


This is working.


Example 2:


Find all Parcels within 30 ft of a Street.


Select a Street by using the Selection Tool.


Use the Rectangle Tool.


Set your Selection Mode to Partially or completely within.





You have selected a Street





Set the Filter Layer = Street


Relationship = Intersect


Set Buffer Distance = 30 ft






19 Parcels lie within 30 ft of this Street Segment.





So, this is working as expected.


Notice that you can set the Selection Mode in the Selection Tool to Completely Contained.





Draw a Rectangle around a Parcel





1 Parcel is Selected.





Ideally, you want this Selection Mode added to the Query Widget as an Enhancement.


So, here is the workaround.


Clear the Selection





Notice the Green Polygon added as a Test Feature.





Select Poly1 from the List






Set Filter Layer = Polygon


Set Relationship = Contain


Leave the Buffer Distance blank






It finds the Parcel within the Green Polygon.





Now add your own polygon using the Edit Widget


Open the Edit Widget.


Add Feature





Add a Polygon Feature






Draw a Polygon around 2 Parcels.


Name this new Polygon = Poly2








Notice, that a new Polygon has been added to your List.





Select Poly2 from the List





Open the Query Widget.


Set Filter Layer = Polygon


Relationship = Contain





The Query Wizard correctly returns 2 parcels.





This is exactly what you wanted.


Although this method would work, it is overkill for wanting to do such a simple task as changing the Selection Mode in the Query Widget.


As you can see, the option to change the Selection Mode is already present in the Selection Tool.





It should not be too difficult to add a Selection Mode for the Drawn Graphic in the Query Widget.





Jianxia Song is the Product Manager. She is the ultimate expert. It would be her decision to add this enhancement request.


I would like to point out that the By Shape Tab in Robert Scheitlin’s Enhanced Search Widget also does not include the option to change Selection Mode. It defaults to Partially or Completely within. The reason being this is the most commonly used mode.


Here is a screenshot of the By Shape Tab in Robert’s Enhanced Search Widget.






This is the By Value Tab





This is the By Spatial Tab





Notice, the collection of Spatial Relationship Rules.


You can select which Spatial Relationship Rules you want to keep during configuration.








As you can see the new Query Widget in the Experience Builder was heavily inspired by the Enhanced Search Widget in the Web AppBuilder.


The ESRI Development Team has done a terrific job in bringing this powerful functionality to the Experience Builder platform.


They share quite the same functionality. The GUI in the Enhanced Search Widget is more compact and intuitive.


The Query Wizard allows the user to do a regular search by Attributes plus perform a graphical search and a Spatial Search with Buffer capabilities.


This certainly took a lot of complex programming!


Many thanks to the developers who worked on this.





David Das


Occasional Contributor

@DavidDas__GISP   am glad you were able to get things working.  However, I cannot.   Let me elaborate.

In my web map I have numerous layers.  As shown below, I created 3 geometry layers which are grouped under 'Site Sketch Layer':  'Sketched Polygons for Sites,' 'Sketched Lines for Sites,' and 'Sketched points for Sites.'  These are very simple ones I created.



In Experience Builder, in the Query widget and, specifically, for the Parcel layer, if I go to "Selected features from data source" and click on "Add filter layer," I see the entry for my web map but what i expand it out, I do not see the about three geometry layers.  In fact, there are many other geometry layers (e.g municipal boundary layers) I do not see:



So what I ended up doing is adding those three feature layers separately (see below).   


However, as I noted before, if I go into my live web app, draw a polygon via the Edit(beta) widget (see below) over a number of parcels, then bring up the Query widget, you can see it shows the polygon feature layer but, even tho said polygon is selected, the Query widget says "0 records are selected for the filter."  Clicking Apply returns nothing.


I gather you are not seeing the same behavior as I am when configuring the Query widget?

0 Kudos
Occasional Contributor
 the only way I was able to see my geometry feature layers (polygons, lines and points) is if I moved them outside of my group in the web map.  Regardless, still no go.  It is beyond me why it works for you and not for me
0 Kudos
Occasional Contributor II

Hi John,


Thanks so much for that detailed description of the problem with the screenshots. This makes it easier to grasp the scope of your Web App.


The test web app that I created with a small dataset is shared with Everyone so you can follow along.


If you open this URL:




You should see this initial view with all layers turned on.





At the bottom right, the status box should say 0 features selected.


Open the Layers Widget and turn off every layer except the Polygon Layer.





The reason being, you want to select a Single Polygon from the Polygon Layer.


Open the Selection Tool on the Top Left.





Select the Rectangle Tool to select a Single Polygon like so:


The status box should now indicate that 1 feature is selected.





Note: This is the key!


The Spatial Search in the Query Widget will not work unless that Status Box says that 1 or more features have been selected.


Can you repeat the same steps on your Web App to see if the Status Box says 1 feature selected?


If so, then the rest will work.


Turn on the Parcel Layer.





Open the Query Widget and Select Parcel.






Set Filter Layer = Polygon


It should indicate that 1 Record has been selected in the Polygon Layer.


Set Relationship = Contain





The Query Widget correctly returns 1 Parcel within the selected Green Polygon.





So, you see the key is it to getting the Status Box on the bottom right to indicate that 1 or more features from the Filter Layer has been selected.


If the status box says 0 features, then nothing will work.


I have shared the hosted feature service = EditFeatures with Everyone.




This has 4 editable layers


You can use this to set up a test Web Map.


I have shared my Test Web Map = EditFeaturesMap with Everyone.








What works for a simple test case may not always translate to a real world scenario where multiple layers are involved with hundreds of attributes.


I see that you have a pretty complex collection of data layers in your Web Map.


You have indicated that many of the layers do not show up when you attempt to Add Filter Layers.


This may be a design limitation.


Then again, what you are trying to do is very simple. All you wish is to have an additional Selection Method to the Query Widget.


So this can be implemented as a user selectable choice during the configuration of Geometries from a Map like so:


Add Selection Mode

  • Partially or completely within - default
  • Completely contained by


If you add this Enhancement Request I am sure Jianxia Song will take care of it.


Best regards,


David Das



0 Kudos
Occasional Contributor

@DavidDas__GISP I did exactly the first set of steps you noted, which allowed the rectangle on the right to be selected and confirmed that 1 feature and record are selected.  See below.  I click Apply, and I get "Features displayed: 0 - 0 / 0", the same as on my web app




0 Kudos