Select to view content in your preferred language

Modifying Default Widgets In ArcGis Experience Builder SDK

974
4
Jump to solution
07-25-2023 05:26 AM
Labels (2)
warddourji
New Contributor II

I need a way to modify the default widgets ex (map widget, bookmark widget etc...).

I tried to modify the tsx's files available in the SDK folders but no change was committed to the actual web app even after resetting the client and the server running locally given that other custom widgets are changing accordingly.

 

my main task is to try change the current loaded data source in the map default widget programmatically using the sdks and load the maps using an id fed from the url of the iframe containing the experience builder app.

 

thanks.

0 Kudos
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

To make your cloned copy of the map widget be the map for your experience, open up the builder mode and delete the default map widget then drag your custom map widget into the experience. Any interactions with other widgets will need to be reconnected to work with your custom widget in the builder mode as well. Ideally, you would make this switch before re-writing any code or changing any builder mode settings, so you know everything is working as ESRI designed it before you start making your modifications. If you have already made some changes and you aren't too far along in your overall project, you may want to consider re-installing Experience Builder and starting over from an unmodified copy.

GIS Developer
City of Arlington, Texas

View solution in original post

0 Kudos
4 Replies
JeffreyThompson2
MVP Regular Contributor

The proper way to edit default ESRI widgets is to first copy the widget's folder into your-extensions/widgets. (You can chose not to copy the dist folder.) The tsx code in a widget's src folder is never actually run. It is compiled to JavaScript and then copied to client/dist/widgets/widget-name/dist. This is the actual code that is used at runtime. Experience Builder watches the your-extensions folder for changes and webpack complies the code whenever the client server is refreshed. It's not designed to track changes outside this folder.

Also, by copying first, you maintain a clean copy of the ESRI widget in case something goes wrong in your customization or you want to use it later in another application.

GIS Developer
City of Arlington, Texas
warddourji
New Contributor II

I appreciate your answer

this solves the issue for the bookmark widget lookalikes for example. but the issue remains if i want to change the default map widget. is there a way for me to remove default widget and select the widget that i cloned earlier using your solution ? since i dont have the generated code thats available in dist folder. so i cant just select it in the config file widgets object.

thank you.

0 Kudos
JeffreyThompson2
MVP Regular Contributor

To make your cloned copy of the map widget be the map for your experience, open up the builder mode and delete the default map widget then drag your custom map widget into the experience. Any interactions with other widgets will need to be reconnected to work with your custom widget in the builder mode as well. Ideally, you would make this switch before re-writing any code or changing any builder mode settings, so you know everything is working as ESRI designed it before you start making your modifications. If you have already made some changes and you aren't too far along in your overall project, you may want to consider re-installing Experience Builder and starting over from an unmodified copy.

GIS Developer
City of Arlington, Texas
0 Kudos
bendre18
New Contributor

I see your problem is solved already but just wanted to add that you can further customize the edit widget in Experience Builder by configuring the Forms section on Map Viewer. Allows you to use conditional visibility, Arcade scripts, etc. Not a lot of documentation on that out there https://routerlogin.uno/.

 

 

0 Kudos