DOM Manipulation the Service Portal way

[nathanfirth]

One of the amazing features of Service Portal is how it encapsulates each widget into a self-contained component. This encapsulation greatly increases the maintainability and reduces code complexity by breaking the portal or application down into many smaller units of functionality (widgets). However, if you start using jQuery or performing DOM manipulation directly within the controller, you can quickly cause problems in your application.

Officially, this is not a good practice. According to the AngularJS Documentation:

Do not use controllers to manipulate the DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. AngularJS has databinding for most cases and directives to encapsulate manual DOM manipulation.

The Link Function to the rescue!

In AngularJS, DOM manipulation is typically only performed inside of the Link Function of a Directive, and in Service Portal, this is available via the "Link Function" field of the widget. By using the "element" object, you get access to the DOM of the widget.

Consider the following example:

Here is another quick example calling a jQuery Plugin

If you're using jQuery plugins, you may wish to create a custom directive to make it reusable across multiple widgets.

By using the Link Function and "element" object, you're staying within the confines of the current widget, and won't accidentally impact other widgets or elements on the page.

Further reading:

jQuery Plugins as Angular Directives
DOM Manipulation in AngularJS
Creating a Directive that Manipulates the DOM
DOM Manipulation the AngularJS way

Find many similar articles and tutorials at: https://serviceportal.io

[sndangibbard]

I've found the Link Function most useful in modifying the behavior of Service Portal components that are embedded in the platform, for example changing the behavior of a Form/Record Producer - all that layout and functionality is embedded in the sp-model (and sp-variable-layout) directives which are not exposed to us as developers. Here is an example of using the Link Function to make Help/More Info elements on Record producers collapsible

Re: Service Portal view of more information is expanded , unlike the servicen catalogue view

[jpierce_cerna]

Any idea why we can't use $timeout in a link function?

I would expect that if I injected it into my controller it would be available in the Link Function.

[nathanfirth]

Hi jpierce.cerna,

There are a couple examples in the out-of-box widgets that show how to use timeout in the link function.

You can look at the "Portal config" widget which pulls in $timeout using $injector:

Or you can also look at "Cool Clock" which uses the standard "setTimeout" method which is already available from the Link function.

[jasonalldridge]

Is anybody able to indicate how you can get hold of the container that holds the image behind homepage search widget? I would like to make this image dynamic (according to a a specified data value) but am unable to located this in the DOM to provide the relevant css.