Embedded widget doesn't refresh after first retrieval

[prussrobin]

Hi Guys,

In our service portal we are trying to dynamically show a different widget based on a click event.

We loaded an 'sp-widget' DOM object in a 'container' widget:

<div id="tabcontainer">
       <sp-widget widget="data.currentWidget"></sp-widget>
</div>

After a click event on a specific widget we broadcast an event and a widget ID and get the broadcasted widget using spUtil

Client script:

function($scope, spUtil, $rootScope) {
   /* widget controller */
   var c = this;
   $rootScope.$on('widgetselected', function(event,selectedWidget) {
   console.log("selected widget: " + selectedWidget);
   spUtil.get(selectedWidget).then(function(response) {
   c.data.currentWidget = response;
   });
   });
}

This first widget is loading fine. So far so good.

Now, after we click on a second widget (using the same broadcast function as the first widget, but with a different widget ID broadcasted), the second widget is retrieved using the spUtil. Logging the response we can see the correct HTML etc. for the requested widget being pushed into 'response', but the first loaded widget is not replaced by the second widget.

Thanks in advance!

Note: we do not wish to load all widgets on page load and hiding/showing the correct widget...

EDIT:

implementation of correct answer for future reference:

Using the solution provided by Luc Raeskin it was possible:

HTML:

<div id="tabcontainer" ng-repeat="i in data.widgets">
       <sp-widget widget="i.currentWidget"></sp-widget>
</div>

Client:

function($scope, spUtil, $rootScope) {
   /* widget controller */
   var c = this;
   $rootScope.$on('widgetselected', function(event,selectedWidget) {
   var widget = {};
     c.data.widgets = [];
     spUtil.get(selectedWidget).then(function(response) {
         widget.currentWidget = response;
         widget.name = selectedWidget;
         c.data.widgets.push(widget);
     });
   });
}

[lucr · Accepted solution]

As a workarround we did wrap arround the sp-widget in a ng-repeat. So it recompiles when the boadcast event happens. It looks like the sp-widget is not binded to the variable. As the content changes the sp-widget does not respond to it.

[ChrisBurks]

Hello Robin,

A couple of ways that I think can accomplish what you need. Some of it may depend on what you need the embedded widget to do but I'm just going by what you have posted.

1) One way uses the ng-if directive. When using this directive the elements don't load until the condition is true. And if the condition becomes false the html markup will be removed too.

2) Another way is to use ng-include controlled dynamically. This one might meet your needs better because it uses just one element for the setup and it that element's inside gets updated with which widget you want displayed.

Please look at the video demo:

switching_widgets

[prussrobin]

Hi Chris,

thanks for your reply. We also had this solution in mind and this works nicely if a limited number of widget need to be used.

Our problem with this solution is that we can't load a dynamic number of widgets. So a single sp-widget needs to be changed.

As a clarrification this is what we wanted to build:

We are building a dashboard of sorts for Server CI's. In here our customers can see the current status of a server. This information differs per server type and some other parameters. For this we used:

- Multiple widgets (with some data in them) acting as tabs (unknown number of widgets since some details are server specific)

- A seperate widget as the container for widgets with detailed data for each tab

Using the solution provided by Luc Raeskin it was possible:

HTML:

<div id="tabcontainer" ng-repeat="i in data.widgets">
       <sp-widget widget="i.currentWidget"></sp-widget>
</div>

Client:

function($scope, spUtil, $rootScope) {
   /* widget controller */
   var c = this;

   $rootScope.$on('widgetselected', function(event,selectedWidget) {
   var widget = {};
     c.data.widgets =[];
     spUtil.get(selectedWidget).then(function(response) {
             widget.currentWidget = response;
             widget.name = selectedWidget;
             c.data.widgets.push(widget);
         });
   });
}