Tutorial on using the Experience Builder

4026
20
02-17-2022 02:57 PM
DavidDas__GISP
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.

 

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/

 

DAVIDDAS_0-1645138539565.png

 

 

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

 

DAVIDDAS_1-1645138539581.jpeg

 

Best regards,

David Das

 

 

 

 

 

 

20 Replies
JohnSasso2
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?

 

Thanks!

DavidDas__GISP
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

 

DAVIDDAS_0-1645222635846.png

 

Check Drawn graphic

 

DAVIDDAS_1-1645222635856.png

 

It will only select features that intersect your drawn graphic.

 

DAVIDDAS_2-1645222635867.png

 

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

 

DAVIDDAS_3-1645222635875.png

 

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.

 

DAVIDDAS_4-1645222635880.png

 

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

 

DAVIDDAS_5-1645222635884.png

 

 

 

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

 

DAVIDDAS_6-1645222635888.png

 

Add Filter Layer

 

DAVIDDAS_7-1645222635895.png

 

 

Add all the layers you have in your Web Map

 

 

DAVIDDAS_8-1645222635900.png

 

Select all the Layers

 

DAVIDDAS_9-1645222635916.png

 

Open your Parcel Query

 

DAVIDDAS_10-1645222635919.png

 

By default only 1 Spatial Relation Rule is enabled.

 

DAVIDDAS_11-1645222635937.png

 

Expand the drop down and enable all 8 rules

 

DAVIDDAS_12-1645222635938.png

 

 

DAVIDDAS_13-1645222635941.png

 

 

Now you are ready to run your Spatial Analysis.

 

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

 

DAVIDDAS_14-1645222635962.png

 

 

Or, you can set your Spatial Filter to Drawn Graphic

 

DAVIDDAS_15-1645222635978.png

 

 

Example 1:

 

Find all the Parcels Contained in Zip Code 85322

 

Select Zip Code 85322 from the List Widget

 

DAVIDDAS_16-1645222635999.png

 

Set your Filter Layer = Zip Code

 

DAVIDDAS_17-1645222636009.png

 

 

 

Set your Spatial Relationship = Contain

 

DAVIDDAS_18-1645222636020.png

 

 

Apply

 

DAVIDDAS_19-1645222636023.png

 

 

 

The Spatial Search returns 1108 parcels

 

DAVIDDAS_20-1645222636047.png

 

 

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.

 

DAVIDDAS_21-1645222636052.png

 

 

 

Example 2:

 

Find all parcels that Overlap the boundary of Zip Code 85322

 

DAVIDDAS_22-1645222636058.png

 

 

Apply

 

There are 127 Parcels that Overlap Zip Code 85322

 

DAVIDDAS_23-1645222636069.png

 

 

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/

 

DAVIDDAS_24-1645222636102.png

 

 

Search for the example Parcel 211-67-062E

 

The map zooms to the selected Parcel

 

DAVIDDAS_25-1645222636166.png

 

 

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

 

DAVIDDAS_26-1645222636226.png

 

Click on the Intersected By Tool.

 

DAVIDDAS_27-1645222636230.png

 

Choose Buffer

 

DAVIDDAS_28-1645222636236.png

 

 

There are 15 Parcels within 300 ft of your selected Parcel

 

DAVIDDAS_29-1645222636265.png

 

 

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.

 

DAVIDDAS_30-1645222636270.png

 

8 Parcels are found

 

DAVIDDAS_31-1645222636275.png

 

 

Example 3:

 

Find all the Parcels that Touch these 8 Parcels

 

Open the By Spatial Tab

 

Click on the Touched By Tool

 

DAVIDDAS_32-1645222636281.png

 

This time choose Selection

 

DAVIDDAS_33-1645222636285.png

 

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

 

DAVIDDAS_34-1645222636296.png

 

 

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

 

DAVIDDAS_35-1645222636300.png

 

 

Search

 

Open the By Spatial Tab

 

Draw a 0.5 mile Buffer around the City of Chandler

 

DAVIDDAS_36-1645222636344.png

 

 

Select Zip Code from the drop-down list.

 

DAVIDDAS_37-1645222636347.png

 

 

Engage the Intersected By Tool

 

DAVIDDAS_38-1645222636354.png

 

 

Select Buffer

 

DAVIDDAS_39-1645222636359.png

 

 

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

 

DAVIDDAS_40-1645222636387.png

 

 

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-...

 

 

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/

 

DAVIDDAS_41-1645222636432.png

 

 

 

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
JohnSasso
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
DavidDas__GISP
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,

 

David

0 Kudos
DavidDas__GISP
Occasional Contributor II

 

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/

 

DavidDas__GISP_0-1645413337908.png

 

 

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

 

DavidDas__GISP_1-1645413337912.png

 

 

 

First, try out the basics.

 

Example 1:

 

Find the Parcel that Intersects Desert Mountain School

 

Select Desert Mountain School from the List Widget.

 

DavidDas__GISP_2-1645413337919.png

 

 

Open the Query Widget and Select Parcel as your Search Layer

 

DavidDas__GISP_3-1645413337920.png

 

 

Set your Filter Layer = Schools

Relationship = Intersect

 

 

 

DavidDas__GISP_4-1645413337927.png

 

 

1 Parcel is found

 

DavidDas__GISP_5-1645413337933.png

 

 

Set Relationship = Within

 

DavidDas__GISP_6-1645413337939.png

 

 

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.

 

DavidDas__GISP_7-1645413337942.png

 

 

You have selected a Street

 

DavidDas__GISP_8-1645413337950.png

 

 

Set the Filter Layer = Street

 

Relationship = Intersect

 

Set Buffer Distance = 30 ft

 

DavidDas__GISP_9-1645413337952.png

 

 

 

19 Parcels lie within 30 ft of this Street Segment.

 

DavidDas__GISP_10-1645413337970.png

 

 

So, this is working as expected.

 

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

 

DavidDas__GISP_11-1645413337976.png

 

 

Draw a Rectangle around a Parcel

 

DavidDas__GISP_12-1645413337982.png

 

 

1 Parcel is Selected.

 

DavidDas__GISP_13-1645413337988.png

 

 

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

 

So, here is the workaround.

 

Clear the Selection

 

DavidDas__GISP_14-1645413337994.png

 

 

Notice the Green Polygon added as a Test Feature.

 

DavidDas__GISP_15-1645413338004.png

 

 

Select Poly1 from the List

 

DavidDas__GISP_16-1645413338016.png

 

 

 

Set Filter Layer = Polygon

 

Set Relationship = Contain

 

Leave the Buffer Distance blank

 

DavidDas__GISP_17-1645413338022.png

 

 

 

It finds the Parcel within the Green Polygon.

 

DavidDas__GISP_18-1645413338026.png

 

 

Now add your own polygon using the Edit Widget

 

Open the Edit Widget.

 

Add Feature

 

DavidDas__GISP_19-1645413338029.png

 

 

Add a Polygon Feature

 

DavidDas__GISP_20-1645413338034.png

 

 

 

Draw a Polygon around 2 Parcels.

 

Name this new Polygon = Poly2

 

Add

 

DavidDas__GISP_21-1645413338041.png

 

 

 

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

 

DavidDas__GISP_22-1645413338045.png

 

 

Select Poly2 from the List

 

DavidDas__GISP_23-1645413338052.png

 

 

Open the Query Widget.

 

Set Filter Layer = Polygon

 

Relationship = Contain

 

DavidDas__GISP_24-1645413338055.png

 

 

The Query Wizard correctly returns 2 parcels.

 

DavidDas__GISP_25-1645413338061.png

 

 

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.

 

DavidDas__GISP_26-1645413338067.png

 

 

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

 

DavidDas__GISP_27-1645413338070.png

 

 

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.

 

 

DavidDas__GISP_28-1645413338078.png

 

 

This is the By Value Tab

 

DavidDas__GISP_29-1645413338083.png

 

 

This is the By Spatial Tab

 

DavidDas__GISP_30-1645413338096.png

 

 

Notice, the collection of Spatial Relationship Rules.

 

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

 

 

 

DavidDas__GISP_31-1645413338099.png

 

 

 

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

 

JohnSasso2
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.

JohnSasso2_0-1645480730327.png

 

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:

JohnSasso2_1-1645481075013.png

 

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

JohnSasso2_2-1645481121261.png

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.

JohnSasso2_3-1645481301830.png

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

 
0 Kudos
JohnSasso2
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
DavidDas__GISP
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:

 

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

 

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

 

DavidDas__GISP_0-1645550018231.png

 

 

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.

 

DavidDas__GISP_1-1645550018236.png

 

 

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

 

Open the Selection Tool on the Top Left.

 

DavidDas__GISP_2-1645550018239.png

 

 

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

 

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

 

DavidDas__GISP_3-1645550018242.png

 

 

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.

 

DavidDas__GISP_4-1645550018246.png

 

 

Open the Query Widget and Select Parcel.

 

DavidDas__GISP_5-1645550018247.png

 

 

 

Set Filter Layer = Polygon

 

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

 

Set Relationship = Contain

 

DavidDas__GISP_6-1645550018249.png

 

 

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

 

DavidDas__GISP_7-1645550018253.png

 

 

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

 

DavidDas__GISP_8-1645550018259.png

 

 

 

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
JohnSasso2
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

 

JohnSasso2_0-1645553746883.png

 

0 Kudos