nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Tutorial on using the Experience Builder

DavidDas__GISP

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.

http://davidapps.net/exb/EXBTutorial

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

http://davidapps.net/exb/EXBTutorial.pdf

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:

https://experience.arcgis.com/experience/eace3c015bed4ddfbaf20f61a3ddbffe/

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.

http://davidapps.net/exb/EXBDevTutorial

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

http://davidapps.net/exb/EXBDevTutorial.pdf

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.

http://davidapps.net/exb/ParcelMapV2

Best regards,

David Das

Find more posts tagged with

ArcGIS Online

ArcGIS Enterprise

Accepted answers

All comments

SanMateoCountyDPW

Hi David, are these tutorials still available? The links are broken. Thanks!

DavidDas__GISP

Hi John,

Congratulations!!

I am very happy to hear you got the Query Widget to work.

How about using the Filter Widget to filter out the data exactly they way you want it.

The Filter Widget will allow you to show only the Transmission Power Lines that carry 115kV.

You could turn on another Filter that will show only the Parcels of size >= 40 acres.

So, with these two filters engaged, your map will only display the Transmission Lines that are carrying 115kV and the Parcels that are 40 acres or larger in size.

JohnSasso2

@DavidDas__GISP another inquiry about the Query widget (pun intended)...

So in my example, I am querying for parcels Within a drawn polygon, which are >= [User-specd Size]. For example, show all parcels >= 40 acres within the drawn polygon. That is working.

Lets step this up. Suppose you have a line feature layer, such as a streets feature layer, where segments of the line in the layer have attributes. In the case of a street feature layer, assume speed along a section in MPH) is such an attribute. Now suppose you want to select all parcels which abut a street segment (or any street segment) which has a speed <= 40MPH. I don't see how this can be done with the current query widget.

In my case, I have a line-based feature layer which shows transmission power lines (avail. from Dept of Homeland Security, btw), and an attribute of the lines is their voltage (in kV). It would be nice to create a query that says:

show all parcels >= 40 acres in size which abut a 115kV transmission line (selected)

JohnSasso2

@DavidDas__GISP I have some "good news" ... to an extent.

I managed to get the parcel selection working. WHY, I do not know. I may never know.

What I did is make a copy of my web map (yes, my AGOL web map) and "attached" to it in my EB web app. I proceeded to reconnect my various widgets to this copy and its feature layers. Now, by what I chalk up to dumb luck, the querying of parcels within a drawn polygon works.

I am leaving at that.

DavidDas__GISP

Hi John,

I am using ArcGIS Experience Builder Developer Edition v1.7, January 12, 2022

https://developers.arcgis.com/downloads#arcgis-experience-builder

JohnSasso2

FYI - I am using the latest version of EB (1.7.0)

JohnSasso

@DavidDas__GISP exactly what version of Experience Builder developer platform are you using on your desktop?

DavidDas__GISP

Hi John,

I opened the Web App on an Apple iPad.

https://experience.arcgis.com/experience/826295ea0a7344699360f284308e7456/

The Query Widget returned the correct results.

I am puzzled why this is not working for you. Can you borrow an iPad and give it a try?

Perhaps open this link in your home computer outside your Organizational Firewall?

Is your VPN blocking traffic?

DavidDas__GISP

Hi John,

That is indeed strange.

I just tried these steps on 3 different computers using the MyPoly Polygon you added.

It worked every time.

https://experience.arcgis.com/experience/826295ea0a7344699360f284308e7456/

I open the Parcel Query

Filter layer = Polygon

1 record selected in filter layer

Relationship = Contain

Apply

The Query Widget returns 7 Parcels within your MyPoly polygon

JohnSasso2

@DavidDas__GISP I tried all three suggestions. No go.

DavidDas__GISP

Hi John,

I had an idea.

How about clearing your browser cache and then reloading the Web App?

How about switching to a different browser like Firefox?

How about switching to a different computer?

DavidDas__GISP

Hi John,

That is really puzzling.

Once you have 1 feature selected and your Query Widget shows up like this you are ready to go.

When I hit Apply, the Query Widget correctly returns the 3 Parcels within the green polygon.

I am getting "Features displayed: 1- 3 / 3"

However, in your case, you are getting "Features displayed: 0 - 0 / 0"

I am at a loss here.

You may want to open a Support Ticket with ESRI.

JohnSasso2

@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

DavidDas__GISP

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:

https://experience.arcgis.com/experience/826295ea0a7344699360f284308e7456/

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.

https://services.arcgis.com/ykpntM6e3tHvzKRJ/arcgis/rest/services/EditFeatures/FeatureServer

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.

https://maricopa.maps.arcgis.com/home/webmap/viewer.html?webmap=8bd93b0c206d4c40b50876b9655fc919

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

JohnSasso2

@DavidDas__GISP

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

JohnSasso2

@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?

DavidDas__GISP

Hi John,

Success!!

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.

https://experience.arcgis.com/experience/826295ea0a7344699360f284308e7456/

This has 4 layers:

Schools = Point Layer
Street = Line Layer
Polygon = Template for adding polygons to your map using the Edit Widget
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

Add

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.

Cheers!

David Das

DavidDas__GISP

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,

David

JohnSasso

@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

DavidDas__GISP

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?

Answer:

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.

Explanation:

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

Apply

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

Apply

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:

https://gis.maricopa.gov/GIO/HistoricalAerial/

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:

http://www.davidapps.net/docs/parcel/help/enhanced_search_widget.htm

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

https://community.esri.com/t5/web-appbuilder-custom-widgets-questions/roberts-custom-wab-widgets/td-p/844181

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.

https://experience.arcgis.com/experience/c26b108e31444e45bdc2f24559fb03ec/

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

JohnSasso2

@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?

Thanks!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.