Using external jquery library in service portal

[AnnMarieC]

I'm trying to add a library I've used as a scroller in CMS, but I'm having trouble figuring out how to get it to work in Service Portal. Here is a link to the jquery plugin:

GitHub - wmh/jquery-scrollbox: A simple, lightweight jQuery plugin to scroll a list like carousel or...

Previously in CMS I would add the plugin as a UI script, call the UI script in a dynamic content block, and add one line of code in a script block to start the scrolling on a div with a ul element in it.

I have tried these steps in Service Portal:

1. Create a widget which will hold a Knowledge base scroller
2. Added the jquery-scrollbox as a dependency in the widget
3. Added a div which holds the knowledge base articles to be scrolled (pulled from a server lookup):

<div id="demo" class="scroll-text">
     <ul>
           <div ng-repeat="article in c.data.news_articles">
               <li>{{::article.desc}}</li>
           </div>
     </ul>
</div>

4. Tried to add code to the link function to start the scrolling, but that part isn't working

function(scope, elm){
   var el = $(elm[0]).find('#demo');
   el.scrollbox({
   startDelay: 2, // Start delay (in seconds)
   delay: 2, // Delay after each scroll event (in seconds)
   linear: true,
   step: 1,
   speed: 50
   });
}

I've tried many variations of the code in the link function, but can't get the scrollbox function to work. There are not any console errors.

Any help would be appreciated.

Thanks,

Ann Marie

[ian_cox]

vinamra Can you help?

[Vinamra Misra · Accepted solution]

Hi Ann,

Try the below code in the link.

// This goes in link

function(scope, elem, attr) {

        elem.find('#demo').scrollbox({

        // set properties here

        });

}

I created a quick POC to test and it works fine. See the below screenshot for code snippets.

If still, it does not work, see if you can run the below code in the console to see if it works, if not then there is some issue with how you have added the js as dependencies.

$('#demo').scrollbox({ linear: true, step: 1, delay: 0, speed: 100 });

Let me know how did it go.

Thanks,

Vinamra

PS: Hit like, Helpful or Correct depending on the impact of the response.

[AnnMarieC]

Hi Vinamra,

Thanks for the reply. I tried the code in the Link function and running in the console and doesn't work. Other jquery methods do, so it may be the dependency portion as you mention. I have it linked as a dependency to the widget. The widget dependency is then linked to the JS Include which is set to UI Script, with the jquery scrollbox in a UI script. Its setup the same way as for example the Google Analytics OOB dependency is setup.

[Ivano B]

Hi Ann

I was looking to your post because i had a similar issue. I think the problem is the ng-repeat.

Probably I'm wrong but your link function will apply to a list that is empty if executed directly.

This is the reason why the example provided by vinamra works, because the list is directly provided.

Try to wait till the page is completely rendered and then find the element you need and see if it works.

function(scope, element) {

  var $timeout = $injector.get('$timeout');

  $timeout(function(){

            /* -- YOUR CODE GOES HERE -- */

  }

}

I hope this helps.

Cheers

R0bo