Experience Builder Tips and Tricks - Page 2

https://youtube.com/playlist?list=PLeXjHxbU5lmZW2qMTokPl0KOU_E1wrzjA&si=GIMpa4G8HUq9yy2Q

Here is a YouTube playlist covering basic video tutorials by Geospatial Training Services.

Video Titles:

• Allow users to Edit Data directly in a Table in Experience Builder
• How to Configure the Query Widget with a Spatial Buffer in Experience Builder
• Coordinates Widget in Experience Builder
• Configure Bar Charts in Experience Builder
• Configure the Print Widget in Experience Builder
• Relating Tables in Experience Builder
• Mobile Responsive Design in Experience Builder
• Choosing a Template in Experience Builder
• Interactive Table Widget Features in Experience Builder
• Interactive Bookmark Widget Experience Builder
• Interactive Filter Widget in Experience Builder

I just found a silly little workaround for a small problem. Perhaps too small for this blog, but someone will probably find this useful one day.

I am trying to build a link to a page on an internal server. It's not exactly formatted like a standard URL. Let's say it looks like, https://internal/site. I can type this into my browser and it works just fine. But when I try to make a link with a Text or Button Widget, I get an error and Experience Builder won't allow me to click OK.

I assume Experience Builder is using regex to validate the address and is rejecting it because it lacks a high level domain, like .com or .org. (If that doesn't make sense to you, don't worry about it.)

So what can I do? Connect my widget to data. What data? It doesn't matter. I'm not going to use it. Now that I am connected to data I get a slightly different Set Link settings panel and this one doesn't reject my non-standard URL. And my link works just fine.

The user has searched for something and confirmed their selection, but the search results menu just stays open taking up screen real estate.

Wouldn't it be better if this just automatically collapsed after the user made their choice? This is a pretty easy fix...if you're on Developer Edition. (If you're not using Developer Edition, you can go now. There's nothing for you here.) Along the way, we will cover the general steps to take an ESRI widget and make it your own.

Step One: Turn Off Your Client Server

I have encountered issues with renaming custom widgets after their initial webpack build and you will need to run npm start for Experience Builder to find a new custom widget the first time, so it is best to do these first steps with your client server off.

Step Two: Copy The Widget To Your-Extensions

All of the ESRI widgets can be found within the client/dist/widgets folder. So, we can just find the Search Widget in here and make our modifications, right? Wrong, if you make any changes in this folder, the best case scenario is nothing will happen. Webpack only watches for changes within the client/your-extensions folder. You will need to copy the widget into the client/your-extensions/widgets folder for webpack to do its job right.

Sidenote: You will not be able to make a functional copy of the Analysis Widget. As far as I know, all other widgets are modifiable.

Find the Search Widget folder in client/dist/widgets/custom and copy that entire folder (named "search") to client/your-extensions/widgets. Inside the search folder, you will find a src folder. This is where you will do your modifications. You will also find a dist and possibly a test folder. These folders are unnecessary. They can be deleted or just left alone. But if you do choose to delete, note that webpack will fail to compile if you have any folders without files, so you must delete the entire folder and not just it's contents.

Step Three: Rename Your New Widget

This is a surprisingly complicated, dangerous and important step.

Pick a name for your new widget. It must not be the same as any existing widget, either created by you or ESRI. It may be a good idea to include the word "custom" or the name of the project you are working on in the name to prevent any conflicts with any future ESRI developments. I had serious issues with upgrading to Experience Builder 1.12 because I had a custom basemap gallery widget and ESRI released their own version with the same name. I have seen issues from frustrating to build breaking trying to rename a custom widget after its first webpack compile, so consider your choice here as if it was permanent.

Now, that you have selected a beautiful new name for your widget. Rename the folder containing the widget. Then open manifest.json and change the name attribute. These two names must match exactly or webpack will fail to compile. Optionally, you may want to change the label. This is the name of the widget as it appears within Experience Builder. As with the name, you may find it difficult to change the label later.

Now that you have renamed your widget, you can safely run npm start on your client server and you should see your copied ESRI widget in the custom widgets section in Experience Builder.

Step Four: Modify The Search Widget

At this point, we have a copy of the Search Widget within the your-extension folder and it can be modified just like any other custom widget. 

To make the modification promised in the introduction open result-list.tsx in the /src/runtime/component folder. Find the onSelectRecord function and add onShowResultButtonclick() (Yes, with that capitalization.) to its last line. This should call the same function that is called when the user clicks the carrot to close the search results and thus when the user selects a search result the menu should also collapse. (For the record, I have made a very heavily modified Search Widget and almost all of my modifications are triggered by the onSelectRecord function.) 

Save your file and, as with any other custom widget, webpack should notice your change. You should now have Search Widget functionally the same as the default ESRI widget, but with a little UX improvement.

In my last post, I made some cryptic comment about more hidden widget tricks. As it turns out, one of the tricks I was thinking of can easily be done without just the Section Widget. Let's build a scrolling marquee.

1. Add a Section Widget. And put a Text Widget inside. Write some text.
2. Hit the Duplicate button and change the text. Repeat as many times as needed.
3. Turn on Autoplay and Loop.

    

In the Style Tab, go to Animation > Transition, then Push and Horizontal. (These Animation options are pretty new. I don't think they are in any form of Enterprise at time of writing.)

And done! It's a scrolling text ticker!

I still think there is potential for an uncontrollable, invisible Timeline Widget, but unfortunately I don't have any convenient time-enabled data lying around for testing.

When Near Me came out last summer, I was pretty excited. At the time I was working on a public facing application where people could filter a list of parks by their amenities to figure out which one they should go to. And it would be so nice, if they could put in their address and get the list sorted by their location. But, I was very disappointed by the actual implementation of the Near Me Widget. I wrote up my complaints on the ideas board here, but to summarize I just don't like the user interface of Near Me, especially for a public facing application, and I don't want to give up more screen space to Near Me when I already have a well-designed List Widget. I ended my rant on the Ideas board with this:

For my application, the ideal Near Me widget would just be a search bar with a current location button next to it. The user could enter an address or press the button and see the results in the list widget.

Well, since the October 2023 ArcGIS Online update, it is now possible to build that (or something pretty close to it). Here's how...

Step One: Triggering Near Me From Search

For this recipe, we will need a Map Widget, a Search Widget, a Near Me Widget and a List Widget. Let's drag them all into our Experience now and we'll set them up as we go. Start with your Map Widget and select the webmap you want to use. Then, go the Search Widget and pick a locator source. You'll also want to open the Search Suggestion options and check the Use Current Location option.

In the Action Tab, add a Record Selection Changes > Near Me > Set Location Action. (A Map > Zoom To Action is not necessary, but you'll probably want it, too.)

Step Two: Set Up Near Me

First, I select my Map Widget. At this point, Near Me will display this scary and confusing warning.

This is normal. Near Me is asking you to click on the name of your map again to open up the Analysis settings menu.

In the Analysis settings menu, pick Specify a location, set some sort of buffer distance (I went with 5 miles.) and the click the Add Analysis button. 

In the next window, I picked Analysis Type > Proximity and Sort features > Distance. (I also turned off Highlight results on map.)

I also opened the General Settings and set the Sketch Color to rgba(255,255,255,0). (Translation: transparent white.) In testing, I found that the default transparent option made a dark grey circle that was actually still very noticable, but by using transparent white there was just a faint dimming of the map and a barely visible edge of the circle.

Step Three: Send Near Me Results To A List Widget

In the List Widget, click Select Data > Outputs > Near Me > Whatever I Named My Near Me Output. (I'm also going to add a No data message to tell the user to use the Search Widget.) 

And there we go, when I search in the search bar the data will be transferred to this List. Style up your List Widget as you see fit. (Here's a post about all the various List Widget options.)

But, why? What was the point of all of this?

1. A well designed List Widget just looks better and is easier to use than the Near Me Widget interface.
2. Now that the data is in a List Widget, I can do all the stuff that the List Widget can do including, but not limited to, searching, sorting and filtering within the list, sending to a table, and exporting as CSV, JSON or geoJSON. Near Me can only do one of those things: download as a CSV.

Step Four: Hiding Near Me (Hiding The Widget, Not Hiding Close To Me. That's Creepy. Don't Do That.)

At this point, we have a Search Widget that automatically fills Near Me results into a List Widget. We don't need to look at the Near Me Widget anymore. So what can we do with it? Delete it? Send it to the Pending List? Stick it in a Section or Widget Controller? No, doing any of those things would break this build. We are going to do something far stupider. We are going to make it tiny. In the Style Tab of the Near Me settings, set the Width and Height to 0px. Experience Builder won't truly honor my 0 x 0px request. It seems that the true minimum widget size is 16 x 16px.

See that tiny box I circled in red. That's my Near Me Widget. It will happily do its job even if the user can't read anything in it. Should I need to alter any of my Near Me options later, I can click my little box and the settings panel will appear.

If I was on Developer Edition right now, I'd add this to my CSS to make that little box vanish completely.

.widget-near-me {
   display: none;
}

But we all know using Developer Edition is cheating, what can we do in ArcGIS Online?

Well, we could be happy with our tiny box taking up some unimportant part of the screen, but if you really want it hidden. You can use a Sidebar Widget.

I've put my tiny Near Me Widget in the collapsable side of a Sidebar Widget. Set its size to 0px, Default state to Collapsed and turned off the Collapse Button.

Tiny Near Me will happily keep doing its job banished to an undefinably thin, unopenable Sidebar Widget and your users will never know exists (unless they inspect your page with their browser's Dev Tools).

I have found hidden custom widgets to be very useful before, but this is my first time hiding a default widget. I've had a flood of ideas during the writing of this post (including that unopenable Sidebar trick) and I think there may be some sequels to this post coming soon. What could you do with a hidden Views Navigation or Timeline Widget? 

I am making my demo app publicly available, so you can decide if a Near Me-free Near Me is right for you. The big downside is that I can't find a way to make my List Widget a list of all parks in absence of a Near Me search. (I attempted using the Filter Layers To Only Show Results option within Near Me, but did not get the results I wanted.) Another potential downside is reducing the end user's Near Me options. This demo still doesn't work well enough to have been used in my original park application, but in my opinion, it is a lot closer.

In the October 2023 ArcGIS Online release, ESRI added one of the most commonly requested enhancements to Experience Builder, the option to trigger a pop-up from the search bar. Unfortunately, the option to do this is a bit hard to find. In the settings for the Map Widget, scroll all the way to the bottom of the Content tab. (It's a long way down.) Now, select Show pop-up on feature selection. Turn off the built-in search bar on the map and add and configure a Search Widget. (The built-in search tool will also trigger a popup, but it will likely not be the popup you are looking for.)

That's it. Pop-ups should now activate from the search bar.

Note: At time of writing this option is only available in ArcGIS Online and Developer Edition 1.13. Expect it to be added to ArcGIS Enterprise in 11.3.

Our organization is using ArcGIS Enterprise 10.9.1. Maybe, we will upgrade to some flavor of 11 next year. And, that's still just a maybe. And, by the time we do upgrade, our next version of Enterprise will already be behind the ArcGIS Online version of Experience Builder. And then, we won't upgrade our Enterprise again for another 2-5 years.

Today, our Enterprise version of Experience Builder is a full two and a half years behind the Online version. A two and a half year period in which Experience Builder has gone through some major improvements. And, our users are getting envious. They want to play with all the new toys, too. Well, what if they could? What if they could be using all features in the Online version today without upgrading our entire Enterprise set up? And, what if they could even do more than the Online version? What if you didn't need to be a developer to use Developer Edition?

But, I Don't Know How To Code, What Benefit Is Developer Edition?

• The new version of Developer Edition always comes out about a month after an Online update, so you get all the cool new toys and updates.
• There are custom widgets online that require no coding skills to set up. For example, if you want a Draw widget that can add text to your map. Drop this folder into client/your-extensions/widgets in your copy of Developer Edition and you've got it.
• Maybe you have someone in your organization with the coding skills to make custom themes and widgets, but they don't have the time or subject matter knowledge to build your whole Experience. Or you're not on Enterprise 11, so they have no way to share their widgets.
• Maybe you want your final product to be located at mycompany.com, rather than experience.arcgis.com/randomLetterAndNumberSalad.

Ok, I'll Give It A Try. What Do I Need?

• Direct access to your C drive.
• Someone with the tech skills and Administrator rights on your computer for the setup. (I'm not going to cover the setup process in this post. It's not super easy, but it's not that hard either.)
• Three console commands.
• The hardware/budget/tech skills to deploy your finished project to a web server. (I'm not going to cover deployment either, but it is also not super hard. Maybe ask that person that helped you set up? They may also need to get involved in downloading your files. I find it works better using Admin rights.)

Wait, Did You Say Console Commands? Like, That Scary Black Box The Hackers Use?

Yeah, you need to use the scary black box. It's ok. I will teach you and you only need to learn three things. Learning three things isn't too much to ask. And, you will only need to us the scary black box twice a day, to start and stop working on your project.

If you don't know what scary black box I'm talking about, it's this one...

This is the Windows Command Prompt. (Some users report better performance with Windows PowerShell. I do not notice a difference. I will use Command Prompt below, but these commands should all work in PowerShell as well.) This is what you will use to start and stop Experience Builder Developer Edition. 

In the text below, red text indicates what you should type in the console.

cd:  This stands for change directory. It should then be followed by the name of the folder you wish to navigate to. This can be used to navigate one folder down by using cd folderName, it can be used to go down multiple levels at once with cd folderName\nextFolderDown, jump anywhere your computer’s file structure with cd C:\All\The\Folders\You\Want, or jump directly to the root of the C drive with cd \.

Tip- Save cd C:\full\file\path to your directories to a text file. And use Ctrl+V to paste the command into your Command Prompt.

npm start: This is what you will use to start Experience Builder. Use the cd command to navigate to the ArcGISExperienceBuilder\server folder and type npm start. Then open a second Command Prompt and use the cd command to navigate to ArcGISExperienceBuilder\client and type npm start. Experience Builder should now be running in your browser at https:\\localhost:3001. You will need to keep both of these Command Prompts open and running the entire time you are using Experience Builder.

Crtl+C: That is pressing the control key and the C key at the same time. This is how you will stop Experience Builder. Failure to properly shut down your console could cause potential errors in your project or prevent you from starting a new Experience Builder session. Such issues are rare, but it is still best practice to end your session properly to prevent them. When you are done with your work in the browser, return to the Command Prompt and type Crtl+C. You will get a prompt saying “Terminate batch job (Y/N)?” It is just asking “are you sure you want to quit Experience Builder?” You can type y or just hit Ctrl+C again. Do this for both the server and the client Command Prompts.

Is That All I Need To Know?

Pretty much, all that's left is what website you need to visit to use Experience Builder. 

Open up a browser and type https:\\localhost:3001 in the navigation bar. The first time you visit (and periodically on other sessions) you will see a warning that this site is unsafe. localhost is your own computer and it is actually perfectly safe. In Microsoft Edge, the warning screen looks like this. (The warnings from Chrome are virtually identical.)

Hit the Advanced button and then say that you want to continue unsafely to localhost.

Developer Edition can be configured to work with ArcGIS Enterprise, ArcGIS Online or both. The first screen you should see when opening it asks you to choose which environment you wish to work in and sign in.

After getting through the sign-in screen, working in Experience Builder Developer Edition should be the same as in the Online/Enterprise versions. When you have completed building your project, you will need to press the Publish button, then open the three dot menu and select Download. This will create a zip file of your project that can be deployed on a web server. (It helps to run your Command Prompt in Administrator mode for this step.)

That's it, you the person with zero coding skills, now know enough to use Experience Builder Developer Edition. Ready to give it a try?

This is an updated version of the post I made last year.

Hope it's still useful.

Many of the more advanced options for the Editor Widget are handled indirectly through the Smart Forms functionality in the Web Map Viewer. Smart Forms can be used to add Arcade expressions, extract data from other layers, set a priority level for different layers, populate features with default values, fetch location attributes, and setting fields to be editable, required or hidden.

See the official ESRI blog post for more information.

Here's an article describing how to override calculated values. 

The following is copied from this post by @Shen_Zhang. This is my quick summary of the method.

1. Create an Experience that does whatever you want it to do.
2. Create a second Experience that is just an Embed widget.
3. Stuff the first Experience into the second Experience.

Filters set in the data source tab in experience builder will be applied automatically, any further filters made from URL parameters will not replace but added to the current filter. However, it is possible to embed app URL with data_filter parameter to an embed widget. Users can neither see filters applied nor modify them. 

If you would like to make the embedded app to be more flexible, try a dynamic URL - you can replace any value you were using and pass URL parameters from the app URL to the Embed widget at run time to control what appears in the embedded contents. Here's what I tried to do with my configuration:

1. Create a new app and add an Embed widget with a map and a table

2. Copy and paste my app with a filter (here I use dsId:OID<20 as an example). Save the new app, append &exampleParam= to the end of app URL, and refresh the app

3. From Embed widget setting, you will see exampleParam in URL info. It can be added to the embedded URL by clicking on it. You can replace any content with {appURL.search.exampleParam}. Let's say we replace value "20" - now the filter changes to 

data_filter=dataSource_3-Feature_NAD1983_8510:OID%3C{appURL.search.exampleParam}

 4. Now save the app, publish and view the app. The app launches with no data in it (as the SQL expression in the Embed widget is incomplete and invalid)

5. Add ?exampleParam=20 to the URL. Now the app displays with the corresponding filter applied. 

I think this might be helpful as you could customize the parameter name (add multiple parameters if you want), also it gives you the flexibility to control what appears in the app to save some trouble. When deleting the parameter the users will only get an empty app - but if they managed to figure out what it is for (like setting a huge value in my case above), they may still able to see the whole dataset.