Modifying ESRI Widgets And Making The Search Results Collapse After A Search
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.