topic JSAPI Search Widget in Custom ExBuilder Widget in ArcGIS Experience Builder Questions

JSAPI Search Widget in Custom ExBuilder Widget

DaveFullerton — Mon, 30 Nov 2020 17:41:10 GMT

I used the Esri sample widgets 'editor' and 'js-api-widget' as starting points to create a simple custom Search widget. It simply embeds the JSAPI Search widget in the ExB widget (the code is attached for v 1.1). I got a reasonable result except for one thing. The dropdown list of search candidates does not overflow the parent div (class="widget-content"). This is demonstrated in the picture below where the ExBuilder widget has a red outline - the 3rd address candidate in the dropdown list is cut off.

This is a problem when this custom widget is placed above a map. Either it has to be placed way above the map to leave room for the dropdown, or it has to be placed partly in front of the map. The problem with having part of the widget in front of the map is that it prevents that part of the map from being clicked on.

The code is attached. Can anyone tell me if there is a solution for this?

Another thing I ran into was a problem migrating it to ExB 1.2. The arrow keys work to navigate the dropdown list of search candidates in 1.1 but not in 1.2. With 1.2 I get an error on InputKeyup:

And here is a link to the ArcGIS Idea for a Search widget in ExBuilder in case you want to vote it up:
https://community.esri.com/t5/arcgis-experience-builder-ideas/search-widget-for-experience-builder/idi-p/931318

Re: JSAPI Search Widget in Custom ExBuilder Widget

MarkSteger — Tue, 08 Dec 2020 22:21:06 GMT

Kudos

Re: JSAPI Search Widget in Custom ExBuilder Widget

MarkSteger — Tue, 08 Dec 2020 22:21:36 GMT

Kudos Brah!

Re: JSAPI Search Widget in Custom ExBuilder Widget

Grant-S-Carroll — Wed, 09 Dec 2020 01:11:44 GMT

Hi Dave

I experienced the same issue, I have put in some listeners to change the size of the widget to allow the dropdowns and and the suggestions to display properly. Its seems to work ok, i have also pushed my search source out in to a seperate file. See the attached and what it looks like in a map below.

Re: JSAPI Search Widget in Custom ExBuilder Widget

DaveFullerton — Wed, 09 Dec 2020 18:56:33 GMT

Thanks, Grant. I tried unzipping the folder in my "your-extensions" folder. In VS Code I am seeing a few error warnings. I encountered 1 less in ExB 1.2, but manifest.json says exbVersion 1.1. Am I missing something?

Line 477

Line 519

Line 536

Re: JSAPI Search Widget in Custom ExBuilder Widget

Grant-S-Carroll — Wed, 09 Dec 2020 19:30:13 GMT

Hi Dave

Ok a couple of things, in your folder structure, it looks like the search has been nested under YourExtensions\search\localmaps-search it will need to be YoruExtensions\localmaps-search.

I was also using a custom search source in that example, so hence why there are is the extra search source I am creating. The important parts for what you are trying to achieve are the highlighted lines below. There are the listeners which will get triggered to grow the size of the widget to show all the suggestions.

Which refers to these methods.

I have update the code I gave you to remove some of the extra bits that I was doing.

Cheers

Re: JSAPI Search Widget in Custom ExBuilder Widget

DaveFullerton — Fri, 11 Dec 2020 03:54:47 GMT

Thanks, Grant. I had tried the folder structure both ways before with the same result. This version is better, but I still get one error in ExB v1.2 (two errors in v.1.1).

Everything is green in the console, so all is good there. I just can't find anything on

_sourceMenuButtonNode.

Are you using VS Code? Which version of ExB?

Re: JSAPI Search Widget in Custom ExBuilder Widget

Grant-S-Carroll — Sun, 13 Dec 2020 17:36:40 GMT

Hi Dave, the _sourceMenuButtonNode is a private property on the Search Widget, when you are debugging, you can inspect the properties of the SearchWidget and find it. This is the dropdown button which lets you select which search source you want to use.

Is the error preventing webpack from packing the .tsx files? I'm using Visual Studio 2019, I get the same warning, but it does not prevent the files from compiling. I am also using ExB 1.2, however, i built this widget in 1.1.

If you are not concerned with letting people chose a search source, then you can remove the code related to the search source drop down.

Cheers

Re: JSAPI Search Widget in Custom ExBuilder Widget

DaveFullerton — Tue, 15 Dec 2020 05:43:54 GMT

Thanks, Grant. I have seen no errors from webpack. There was an error in Chrome's developer tools, and I was looking for the _sourceMenuButtonNode but couldn't find it. It turns out that when there is only one source, there is no dropdown button for selecting which source you want to use. I added a second source and it now works without errors.

Could you confirm that your local-search widget only works when it is on (or actually in) a map widget?

Re: JSAPI Search Widget in Custom ExBuilder Widget

Grant-S-Carroll — Thu, 17 Dec 2020 17:43:17 GMT

HI Dave,

I've not had time to test if it works outside a map, my use case was to mimic the kind of thing we see in Web AppBuilder with the search widget. So the purpose for it was to exist within a map only. If it was operating outside of a map, then what ever it was put in to, would have to have a space for the suggestions dropdown to expand in to, it may get hidden otherwise.

Cheers

Re: JSAPI Search Widget in Custom ExBuilder Widget

DaveFullerton1 — Thu, 17 Dec 2020 18:23:32 GMT

Good to know. I didn't want to try to make that work if you had already found it couldn't be done. It may be some time before I can look into it. Thanks for answering all of my questions.