widgetmanager.triggerWidgetOpen does not show widget in tab theme

2507
13
Jump to solution
11-10-2016 03:37 PM
JadeFreeman
Occasional Contributor III

I'm developing a Feature Action for a custom widget.  Following the instructions at Create a feature action in your widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for De... , I have everything working except when I add my custom widget to an application using the Tab theme, my widget is not shown.

Here's the code for my onExecute method:

onExecute: function(featureSet){
    WidgetManager.getInstance().triggerWidgetOpen( this.widgetId )
        .then( lang.hitch( this, function ( myWidget ) {
            this.widget = myWidget;
            var feature = featureSet.features[0];
            this.showLinksForFeature( feature );
        }));
},

Am I doing something wrong?  I'm using Web AppBuilder 2.1.

0 Kudos
13 Replies
JadeFreeman
Occasional Contributor III

After a bit more testing, I think the problem occurs when a widget is opened by calling setOpenedIds, which calls _openLastTab, when that widget is NOT in positions 1-4 (i.e. it's in the more widgets group).  When the widget is not in positions 1-4, rather than calling selectTab, the _addGroupToMoreTab method is called.  It does not appear that this method updates the selected property of the other tabs so whichever tab was selected prior to calling this method still has it's selected property set to true.  Thus, a subsequent call to setOpenIds -> _openLastTab passing in the id of a widget exits the selectTab method early if that widget was previously selected.

0 Kudos
JadeFreeman
Occasional Contributor III

I abstracted the code for handling opening the widget in the sidebar into a separate method in a mixin (so that I can use it multiple feature actions).  If the widget being opened is not in tab position 1-4, adding some code to set the selected property of tabs 1 thru 4 to false and hide the indicator seems to do the trick.

showSidebarControllerTab: function () {
    var controller = WidgetManager.getInstance().getWidgetsByName( 'SidebarController' )[ 0 ];
    if ( !controller ) {
        return;
    }
    controller.setOpenedIds( [ this.widgetId ] );

    var configs = controller.getAllConfigs();
    var configIds = array.map(configs, function(g) {
        if (g && g.id) {
            return g.id;
        }
        return null;
    });

    var idx = configIds.indexOf( this.widgetId );
    if (idx > 3) {
        array.forEach( [0,1,2,3], function ( tabIndex ) {
            controller.tabs[ tabIndex ].selected = false;
            controller._hideIndicator( tabIndex );
        } );
    }
}

					
				
			
			
				
			
			
				
			
			
			
			
			
			
		
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jade,

   That works great on my end as well.

JadeFreeman
Occasional Contributor III

I wrapped this up in a mixin which has a showWidget method which internally calls methods to handle both the sidebar controller in the tab theme and the header controller in the foldable theme.  I haven't tested in other themes yet.  I found similar issues to my original question with the header controller in the foldable theme.  

In the feature action onExecute method you can call this.showWidget() to handle updating the sidebar or header controller, handling updating the highlight and selected tabs etc.

onExecute: function(featureSet){
    WidgetManager.getInstance().triggerWidgetOpen( this.widgetId )
        .then( lang.hitch( this, function ( myWidget ) {
            /* do something */
            this.showWidget();
        }));
}

Hope someone finds this useful!

0 Kudos