Widgets Not Synchronized when Added to Multiple Custom Layouts in Experience Builder App

583
2
Jump to solution
07-06-2022 01:54 PM
JamesMadden1
Occasional Contributor

I've developed an app in ArcGIS Experience Builder using the developer edition 1.8.  I configured a custom layer list widget and added it to the custom layouts I defined for medium and small screen devices.  I run into an issue with the default layer settings in the input checkboxes being restored when the app is resized.  For example, I toggle a layer off and then resize the map to small screen and the toggle button is turned back on.  The layer in the map is correctly turned off but the input checkboxes get restored to the default configuration every time the layout is switched.

Is there anyway to keep the custom layer list widgets synchronized in each layout or is it possible to use the widget only once and have it display in the custom layouts?  I'm able to get it working using the AUTO layout option for medium and small screen devices but that causes display issues.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
Grant-S-Carroll
Esri Contributor

I faced a similar problem recently, the issue is that when resizing the page the widget gets destroyed and recreated. In my case I only had to worry about two variables, so I cheated and pushed this up to the window as variables and when the widget is being constructed I do a check to see if the vairables exist in the window. This may or may not work in your instance. The other solution may be to push the current state of the widget in to the redux store and then check that when your widget is being reconstructed. See the details here. I have used this pattern to share state between widgets, I've not tried it in this instance, but it might work for what you need to do.

View solution in original post

0 Kudos
2 Replies
Grant-S-Carroll
Esri Contributor

I faced a similar problem recently, the issue is that when resizing the page the widget gets destroyed and recreated. In my case I only had to worry about two variables, so I cheated and pushed this up to the window as variables and when the widget is being constructed I do a check to see if the vairables exist in the window. This may or may not work in your instance. The other solution may be to push the current state of the widget in to the redux store and then check that when your widget is being reconstructed. See the details here. I have used this pattern to share state between widgets, I've not tried it in this instance, but it might work for what you need to do.

0 Kudos
JamesMadden1
Occasional Contributor

Grant,

 

Thank you very much for the helpful feedback.  I was able to resolve the issue by using global variables stored in the window.  It's not the most ideal solution and I will investigate the state manager in the redux store, but the global var approach is sufficient for our simple use case.  Thank you again.

0 Kudos