Buttons That Change Their Own Function and A DIY Widget Controller

[JeffreyThompson2]

I've done something rather silly, but also possibly useful. I'm just going to put this idea out into the world and you can decide if you want to do something with it. I did this more to see if it was possible than being convinced it would be helpful. Combining a Sidebar Widget with multiple Section and Button Widgets, you can build your own version of a Widget Controller.

This method relies on several new features from the ArcGIS Online June 2024 Update, so it is not currently possible in any version of Enterprise. It's a little bit of a brain-melter to set-up. Certainly more of a hassle than using the OOTB Widget Controller. But, I do see the following potential advantages:

• Placing your widgets in a Sidebar might be more aesthetically pleasing in your design than the Panel options provided by the standard Widget Controller.
• Far greater design and placement options for your buttons than the Widget Controller provides. That ugly thing that some of you really seem to like from WAB where all the buttons are different colors, you could do that. Don't do it. But you could do it.
• The ability to open/close multiple related Widgets simultaneously. For instance, the user might want to view both the Map Layers and Legend Widgets at the same time.
• The last ArcGIS Online update brought us an Action to open a Widget in a Widget Controller, but not a Close Widget Action. This method could simulate that missing function.

Some key concepts behind this build:

• A Button Widget placed in a Section Widget can control the Section Widget it is placed in.
• The Set Link Option can control multiple Section Widgets at the same time.
• The Button Widget (and only the Button Widget) has access to both the Set Link Option and the Button Click Action. It can do both simultaneously. 

With all that preamble, let's get into this stupid, maybe useful build.

Step Zero: Add a Sidebar and Map Widget

Add a Sidebar Widget. Set the Default State to Collapsed and turn off the Collapse Button.  You could set the Default State of your Sidebar to Expanded, but you would have to configure the Sections later on so that the default widget is set up to close itself. (That sentence should make sense later.) Removing the Collapse Button is important so that your Actions will not fall out of sync, as they would if the user clicked the Collapse Button. I will also add a Map Widget to the always open side of the Sidebar and connect it to a webmap. The map isn't really part of this build, it and the Widgets in the Sidebar are just here for the aesthetics.

Step One: Make A Button That Can Change Itself

For my demo, I will make a controller for three Sections in the Sidebar: one with a Map Layers and Legend Widget, another with a Basemap Gallery and the last with a Bookmark Widget. I will also make some stylistic choices I wouldn't do in an actual application. I will make my Buttons considerably smaller than the Sections they are in. I will make the backgrounds of the open sidebar views white and the close sidebar views black. (In an actual application, I would make the Buttons fill the Sections and the background colors would be irrelevant.)  I will also make the open widget buttons blue and the close widget buttons red with different text for each. (In an actual application, I would make the color variation much more subtle and no text variation.) I would recommend using some clear visual difference like color or text while you are making and testing this build and then changing the style after you have made sure this works. This will get confusing if you don't leave yourself some obvious hints.

1. Add a Section Widget and make its Fill color white.
2. Add a Button Widget inside the Section Widget and give it the blue Quick Style.
3. Use the Duplicate View Button to copy this View with the Button. Rename View to Open Layers and View 2 to Close Layers.
4. In the Close Layers View, change the Fill color to black and apply the red Quick Style to the Button.
5. In the Content Tab of the red Button, Set Link to a View then select the Open Layers View and change its Text to Close Layer Information. 
6. In the Action Tab of this red Button, add a Button Click > Sidebar > Toggle Sidebar Action.
7. Go back to the Open Layers View and select the blue Button.
8. In the Content Tab, change the Text to Open Layer Information and Set Link to View > Close Layers.
9. In the Action Tab, add a Button Click > Sidebar > Open Sidebar Action.

So that was a bunch of steps and what did we get out of it? A Toggle Sidebar Button that changes its color and text. Worth it on its own? Probably not. What else could you do with a Button that changes its own function?

• Guide users through a specific workflow.
• Guide users through an interactive slideshow, StoryMap-type experience.

Let's keep going and finish making our own widget controller.

Step Two: Add Some Stuff In the Sidebar

1. In the collapsible side of the Sidebar, add a Section Widget and make it Full Size.
2. Make two new Views and rename our Views, Layers, Basemaps, and Bookmarks.
3. In the Layers View, add a Column Widget (for neatness) then put Map Layers and Legend Widgets inside the Column.
4. Add a Basemap Gallery Widget to the Basemaps View and a Bookmark Widget to the Bookmarks View. (I selected the third bookmark template and switched its Direction to vertical.)

We now have some Widgets to control. Now we need to make the buttons.

Step Three: Make The Buttons

1. On the Section Widget, hit the Duplicate button twice. This should make two additional copies of the Section Widget, including all the Views, Buttons and Actions we have already made. 
2. In the new Section Widgets, rename the Views to Open/Close Basemaps and Open/Close Bookmarks.
3. In the Section Widget with the Buttons for controlling the Map Layers and Legend Widget, click on the blue Open Layers Button.
4. Click Set Link and set it with Close Layers, Open Basemaps, Open Bookmarks, and Layers. This set of links should switch the Layer Button to the close Action, get the Bookmarks and Basemaps ready to be opened, and open the Sidebar to the Section containing the Map Layers and Legend Widgets.
5. In the same Section Widget, go to the other View and click on the red Close Layers Button. Ensure that the Set Link is set to Open Layers and all the other Sections are blank. Note: If you have followed along, you shouldn't actually have to do anything on this step. This link should already be made for this View.
6. In the Section Widget for the Basemap Buttons, go to the blue open Button and change the Text to Open Basemaps.
7. Change the Set Link Options to this pattern: the Sidebar Section to the widget you want to open, the Section containing the Open Button to the Close Button View, and the other Button Sections to the Open Button Views.
8. Switch to the Close View and click on the red Close Button. Change the Text to Close Basemaps. In the Set Link Options, set it so that its own Section goes to the Open View and all other Sections are blank.
9. Repeat steps 6-8 for the Bookmarks Buttons.
10. Save. Go to Preview Mode and test. You should be able to click any of these Buttons in any arbitrary order and get a logical response. At any given time, you should see the Sidebar closed with three blue, open Buttons or the Sidebar open with the selected Button in the red close Button state, the correct Widget open, and the other two Buttons in the blue open state.
11. Fix up your presentation. I'm leaving out the details here, but here's how it looks after a little re-design.

I'm sorry if that is the most confusing thing you have ever read. I tried my best. Let me know if you try this out in a real application or one of the other suggestions for a self-controlling Button. Do you have any other uses for a self-controlling Button?