JSAPI Search Widget in Custom ExBuilder Widget

3224
10
11-30-2020 09:38 AM
DaveFullerton
Occasional Contributor III

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.

Capture.PNG

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:

image.png

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

10 Replies
MarkSteger
New Contributor III

Kudos

0 Kudos
MarkSteger
New Contributor III

Kudos Brah!

 

0 Kudos
Grant-S-Carroll
Esri Contributor

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.

Grant-S-Carroll_0-1607476271310.png

 

DaveFullerton
Occasional Contributor III

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?

image.png

Line 477

image.png

Line 519

image.png

Line 536

image.png

0 Kudos
Grant-S-Carroll
Esri Contributor

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.

Grant-S-Carroll_1-1607541979146.png

 

Which refers to these methods.

Grant-S-Carroll_2-1607542005578.png

 

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

 

Cheers

 

DaveFullerton
Occasional Contributor III

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

image.png 

image.png

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?

 

0 Kudos
Grant-S-Carroll
Esri Contributor

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

DaveFullerton
Occasional Contributor III

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?

0 Kudos
Grant-S-Carroll
Esri Contributor

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