Service Portal widget onload DOM manipulation

[xiaix]

In a Service Portal Widget, how do I manipulate the DOM once the HTML template has rendered?   (onload)

Thanks!

[Brad Tilton]

Hi David,

Could you explain a little more about what you're trying to do here? Typically in a widget you would build it in a way that you can use angular variables as toggles rather than manipulating the dom.

[xiaix]

Actually, that's exactly what I ended up doing.  

I created a data.someVar, ran some server code to populate that var, than created an ng-if div to test data.someVar.

Worked great.

It's a lot better than an onLoad to do an ajax call to get some data then manipulate the DOM accordingly.

The question does remain, however, what would the code look like if one needed to run some code immediately and only after the html gets rendered?   I don't know how to build a proper "onload" observer in Angular through ServiceNow.

[richardwin]

David,

Angular works a bit differently and you run into a race condition.   OnLoad triggers after the page DOM is loaded.   This happens relatively early in angular and then you get additional rendering through angular so your onLoad will often try to reference something that has not yet been rendered.

Have you tried using $scope.on?

Something like this?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

[xiaix]

Yeah, I'm doing stuff like this:

$rootScope.$on('erc_edit', function(event, data) {
       c.data.whichOption = data;
       c.server.update().then(function(response) {
               c.data.whichOption = "";                       
               $scope.hideAllButThis('BCPO_erc_edit');
       });
});

$scope.adminOption = function(optn)
{
       var optDiv = document.getElementById('bcp_main_options');
       if (optDiv)
       {
               optDiv.style.cssText = 'width:250px; opacity:.08;';
               $scope.option_links_deactivated = true;
               $rootScope.$broadcast('main_area_deactivated','false');
       }
       var mDiv = document.getElementById('bcp_main_edit_area');
       if (mDiv)
       {
               mDiv.style.cssText = 'width:8.5in; opacity:1.0;';
       }

       switch (optn)
       {
               case 1: $rootScope.$broadcast('view_site_plan', optn);   break;
               case 2: $rootScope.$broadcast('admin_options', optn);     break;
               case 3: $rootScope.$broadcast('bcc_edit', optn);       break;
               case 4: $rootScope.$broadcast('erc_edit', optn);       break;
               case 5: $rootScope.$broadcast('dept_edit', optn);     break;
               case 6: $rootScope.$broadcast('bcc_edit_khaleesi', optn);     break;
               case 7: $rootScope.$broadcast('erc_edit_khaleesi', optn);     break;
               case 8: $rootScope.$broadcast('dept_edit_khaleesi', optn);   break;
               case 9: $rootScope.$broadcast('emergencies', optn); break;
               default:
                       break;
       }
};