Modifying Default Widgets In ArcGis Experience Builder SDK

[warddourji]

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.

[JeffreyThompson2]

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.

[warddourji]

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.

[JeffreyThompson2 · Accepted solution]

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.

[Vara_PrasadM_S]

Hi @JeffreyThompson2 ,

I have a requirement to filter out the list of GP tasks added to Analysis widget dynamically based on some action from another custom widget, like button-click. I tried below approach.

1. Cloned OOTB Analysis widget to 'your-extensions/widgets' folder

2. Added a message-action of ButtonClick Type 

3. Updated cloned Analysis widget's tsx to have state variable for list of tools and used it in html for in placed of toolList property

4. Updated that state variable using mutableStateProps and useEffect hook for the message

5. Published a message from the custom widget from where I want to control the list of gp tasks in updated Analysis widget

6. After that, when we run the" npm start" command in client folder, it has given lot many errors related to modules imported in Analysis widget.tsx file for eg., @arcgis/analysis-tool-app/ etc.

As an alternative, I did same changes in client>dist>widgets>arcgis>analysis widget directly, however, the changes are not reflected in to client>dist>widgets>arcgis>analysis > dist folder. So, the changes are not reflected.

Could you please guide me how can I proceed.

Thank you very much in advance

With Regards.

[JeffreyThompson2]

https://community.esri.com/t5/arcgis-experience-builder-questions/analysis-widget-developer-edition-...

The Analysis Widget contains private functions and cannot be copied.

[Vara_PrasadM_S]

Thank you for response @JeffreyThompson2 

If that is not a way of achieving this, could you please suggest if there is any other way which can be executed from custom widget and without having any changes in Analysis widget. I have tried below couple of ways with no luck, may be because the toolList property of Analysis - Config is not a state variable.

Thanks in advance.

1. Updating appConfig's - Layout - I have tried this to have multiple Analysis widgets with different tools configured and hide and show the icons of Analysis widgets in widget controller

const widgetControllerId = "widget_62";

      const analysisWidgetId = "widget_75"

      const layoutId = appConfig.widgets[widgetControllerId].layouts.controller.LARGE;

      const contentWidget = appConfig.layouts[layoutId].content;

      const contentOrder = appConfig.layouts[layoutId].order;

      const keyToRemove = Object.keys(contentWidget.asMutable()).filter(cw => contentWidget[cw].widgetId == analysisWidgetId)

      const orderKeyToRemove = Object.keys(contentOrder.asMutable()).filter(co => contentOrder[co] == keyToRemove)

      delete contentWidget.asMutable()[keyToRemove[0]]

      delete contentOrder.asMutable()[orderKeyToRemove[0]]

      appConfig.layouts[layoutId].content = contentWidget

      appConfig.layouts[layoutId].order = contentOrder

2.  Updating Analysis widget's config - toolList through MutableStoreManager, dispatch functions

const appConfig = getAppStore().getState().appConfig;

      const analysisWidget = ImmutableMap(appConfig.widgets).find(w => w.id == 'widget_75');

      const allTools = analysisWidget?.config?.toolList || [];

      MutableStoreManager.getInstance().updateStateValue('widget_75', 'config', {

        ...analysisWidget.config,

        toolList: []

      } );

      getAppStore().dispatch(appActions.widgetStatePropChange('widget_75', 'config', {

        ...analysisWidget.config,

        toolList: []

      }));

3. Also, tried updating the Analysis widget in client > dist folder. Added a Message Action. However, these additional code/custom changes are not recognized / built to Analysis > dist folder. So, In Builder, the changes are not visible

[JeffreyThompson2]

So your goal is to hide certain Analysis options sometimes? Here are my suggested options:

1. Try targeting the options you want to hide with CSS and adding display: none.
2. I believe it is possible to chose what Analysis options are available using the Build Mode. So use multiple Analysis Widgets and direct the user to the one they are supposed to use. Maybe you can put them in a Section Widget and open the correct View for the analysis.
3. Build your own Analysis Widget. Anything the Analysis Widget can do is possible using functions in the Javascript API. If you have the skills to ask these questions, you are capable of building a Custom Analysis Widget.

[Vara_PrasadM_S]

Thanks for the inputs @JeffreyThompson2 

To build a custom Analysis Widget, to have a list of geoprocessing services added, just like OOTB Analysis widget, do we have any Jimu UI or JS API widgets to get the GP tool UI and results automatically, just like GeoProcessing widget in ESRI Web AppBuilder.

I really appreciate you for your great help and suggestions. Thank you so much.

[JeffreyThompson2]

https://developers.arcgis.com/experience-builder/storybook/?path=/docs/welcome--docs

I think you will be on your own for building the UI, but you can always use Storybook components.