Configuring Multiple Controllers

Question

Has anyone successfully created a Web AppBuilder app that uses multiple controllers?  It appears to be part of the design, but the documentation is extremely thin.  It looks like you have to set the attributes controlledGroups and controlledWidgets in the widget controller configs, however, I am not sure what to do with the panels.  The widget pool has a panel property, but I have two panels, one for each controller.  Do I need to put the widgets for each controller into their own groups with their own panels?

NathanHeickLACSD · Accepted Answer

I was able to get multiple widget controllers working in a single app.  The basic process is as follows:

1.  Add the widget controllers to a theme.  The first step is to add the widget controller folders to the widgets folder of the theme.  Next, add the widget controllers to the widgets section of the manifest.json file of the theme.  Lastly, add the widget controllers to the theme layouts.

2.  At this point, if you open up the Builder, it will recognize the widget controllers and you can start to configure the widgets they control.  All widgets that can be managed by widget controllers are stored in the widget pool in the app config.  By default, the Builder adds the Layer List widget and the Legend widget to the widget pool and both controllers display all widgets in the widget pool.  If you remove all the widgets from both controllers in the Builder and start adding new ones from scratch, the widgets will just be managed by the specific controller you added them to.  Also, the app config will display two new attributes, specifically controlledWidgets and controlledGroups under each controller.  These are arrays of widgets and widget groups that each controller manages.  If you are working from the Builder, the attributes get populated automatically.  To do more advanced configuration, you will eventually end up editing the app config manually.  In that case, you just have to add the widgets to be controlled to the widget pool and add the widgets and widget groups to the controlledWidgets and controlledGroups attributes of each widget controller in the app config.  Without those attributes, each widget controller will just display all widgets in the pool.

3.  If you need to add panels, copy the panels to the panels folder of the theme and add them to the theme's manifest.json file.

4.  To specify in which panel each widget is displayed, there are a few options.  See config-readme.txt in the app root folder.  In general, widgets stored in different parts of the config have their own default panel, which you can override.  That's fine if you only have one panel, but if you want to use multiple panels, you have to use widget groups.  If you add just one widget to a widget group, it behaves very similarly to a single widget, but the config allows you to specify the panel for the widget group, unlike widgets by themselves.  I wanted two controllers, each with their own panel.  Therefore, I made widget groups, one for each widget, and specified the panel in which each widget should display.  Then, I added the groups to the appropriate controlledGroups attribute of the widget controllers and everything worked.  I left the controlledWidgets attribute as an empty array.

I hope this helps someone.