How to launch a custom widget on mouse click

Question

Hi

I have created a custom widget in ArcGIS Experience builder. This widget takes a selected feature from the map and show the attribute information of the selected feature. The widget is working fine. However I want to use it as follows.

I don't want to place this widget in the map, instead I want to launch the widget on mouse click. Like use selects the feature and my widget should popup with the selected feature as a an input property. At the moment when i select a feature, the feature info dialog gets popped up and then i click my widget that is placed on the map. I want to directly launch the custom widget on mouse click and also i don't want feature info window gets opened.

Any help will be highly appreciated.

thanks

sidd · Answer

Hi FredericPoliart_EsriAU

Thanks for your reply, but there is too much into if for me 🙂. I will try to understand this and will see.

Thanks again

FredericPoliart_EsriAU · Answer

To clone and modify a sidebar widget in Esri's Experience Builder Developer Edition, and then add a configuration setting to link it to an out-of-the-box (OOTB) map widget for controlling its collapse and expand state, follow these steps:

1. Clone the Sidebar Widget

First, you've already identified the steps to clone the widget from its original location to your extensions directory. Ensure you copy the entire folder to your target directory:

* Source: C:\ArcGISExperienceBuilder\client\dist\widgets\layout\sidebar
* Destination: C:\ArcGISExperienceBuilder\client\your-extensions\widgets\mySideBar2\

2. Modify the Widget for Configuration

To add a configuration setting that allows the sidebar to be linked with a map widget, you'll need to make modifications in several files within your cloned widget. These modifications typically involve:

a. config.json

Add a new property in the config.json file of your mySideBar2 widget to hold the reference to the map widget. This could be an identifier or a name that matches the map widget you want to interact with.

json

{ "linkedMapWidgetId": "" }b. widget.tsx or widget.js

In your main widget file (which might be a TypeScript .tsx file or a JavaScript .js file, depending on your development environment), add the logic to read this configuration and implement the communication with the map widget.

* Import necessary modules for messaging or state management, if not already imported.
* Read the configuration in your widget's code to get the linkedMapWidgetId.
* Implement functionality to listen for commands from the map widget. This could involve using the Experience Builder's messaging framework to listen for messages/events sent by the map widget.

c. Implement Collapse and Expand Functionality

You'll need to ensure your sidebar widget can programmatically collapse and expand. This might involve manipulating the widget's state or CSS classes to show or hide the sidebar. For example, in React, you might use state to toggle a class:

jsx// Example state toggle in React component this.state = { isCollapsed: false, }; toggleSidebar = () => { this.setState({ isCollapsed: !this.state.isCollapsed }); }; // Use `isCollapsed` state to add a class that controls visibility or styling3. Communication Between Widgets

For the sidebar to receive commands from the map widget, you'll need to use the Experience Builder's messaging framework. You'll likely modify the map widget to send messages that your sidebar widget will listen for.

Sending a Message from the Map Widget

When a specific action occurs in the map widget that should collapse or expand the sidebar, send a message:

jsconst message = { action: 'toggleSidebar', data: {/* Additional data if needed */} }; this.props.dispatch({ type: 'WIDGET_COMMUNICATION', payload: message });Listening for the Message in mySideBar2

In your sidebar widget, listen for messages and react accordingly:

jscomponentDidMount() { window.appStore.subscribe(() => { const state = window.appStore.getState(); // Check for messages related to your widget and react }); }4. Test Your Implementation

After implementing the changes, test the sidebar and map widget interaction thoroughly. Ensure that the sidebar responds correctly to commands from the map widget to collapse or expand.

5. Update Widget Manifest

Finally, don't forget to update the manifest (manifest.json) of your mySideBar2 widget, if necessary, to reflect any new dependencies or capabilities introduced by your modifications.

This is a high-level overview, and the exact implementation details will depend on your specific requirements and the current codebase of the widgets you are working with. Familiarity with React (if using .tsx), the Experience Builder framework, and JavaScript will be essential throughout this process.

FredericPoliart_EsriAU · Answer

1. Create a properly formatted popup during the web-map creation process (use URL links, HTML , colours etc)

2. Drop a FeatureInfo widget inside a side-panel (for example)

3. Link the FeatureInfo widget to the selection of your map's layer (thus showing whatever is selected)

Make sure you pick "Selected features" (not Default)

4. In the FeatureInfo properties : select "respect the style" (that means use whtever design is coming from your popup in web-map, as-is)

5. Run and select a polygon with simple click.

now if you want to auto-open the side panel when 1 or more features are clicked and auto-hide it when nothing is selected on the map,  you will need to create a custom widget, and probably clone the side panel widget (callit sidePanel2) and make it listen to your open/close commands.

a. Copy the whole widget from C:\ArcGISExperienceBuilder\client\dist\widgets\layout\sidebar

b. rename the folder to nasir_sidebar : and copy to C:\ArcGISExperienceBuilder\client\your-extensions\widgets\

c. edit the file C:\ArcGISExperienceBuilder\client\your-extensions\widgets
asir_sidebar\manifest.json
modify the name to match exactly the foldername : "nasir_sidebar" & save

d. restart server and clientsin separate CMD prompt windows  with npm start

e. you should now have a new nasir_sidebar component, and you can modify its code freely.

f. first thing is to add a config parameter to a map widget,  so your side panel is somehow "linked" to a map (and its behaviour): 
YOur sidepanel will have a new option , something like this :

g. Once you have that, you will be able to get the status of the map and perhaps get the status of changes/selected items

e. Another thing you need to do is to find out how they (esri) expand/collapse the side panel

^^ observe what happens in your nasir_sidebar, when the user opens/closes the sidebar.

Let us know how you go 🙂