Auto close widget when another widget is opened (JS 4.x)

762
1
Jump to solution
12-21-2022 09:25 AM
moremeowbell
New Contributor III

I am looking for a way to add some script to my current application that will make widgets close when another widget is opened. The issue I am trying to avoid is having multiple widgets overlapping each other like this:

moremeowbell_0-1671643422449.png

 

I found this post that has a solution, but it's using the JS 3.x library.

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/automatically-close-a-widget-when... 

UPDATE:

I have created this code. With only one reactiveUtils it works, but when I add in all of the reactiveUtils it does work. Any suggestions?

    // configure auto close for widgets
    function closeWidget(esriWidget){
      esriWidget.expanded = false
    }

    reactiveUtils.when(
      () => measureExpand.expanded,
      () => {
        closeWidget(eyeExpand)
        closeWidget(legendExpand)
        closeWidget(btnExpand)
      });

    reactiveUtils.when(
      () => eyeExpand.expanded,
      () => {
        closeWidget(measureExpand)
        closeWidget(legendExpand)
        closeWidget(btnExpand)
      });

    reactiveUtils.when(
      () => btnExpand.expanded,
      () => {
        closeWidget(measureExpand)
        closeWidget(legendExpand)
        closeWidget(eyeExpand)
      });

    reactiveUtils.when(
      () => legendExpand.expanded,
      () => {
        closeWidget(eyeExpand)
        closeWidget(measureExpand)
        closeWidget(btnExpand)
      });

Thanks in advance!

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor
1 Reply
ReneRubalcava
Frequent Contributor

The Expand widget has a group property that will handle this for you.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html#group