How to add directive to widget serviceportal

[sam1212]

Hi All,

I am trying my hands on serviceportal and new to angularjs.

I saw a video explaining how to include dependencies in widget. But it is not working.

So i am trying to pull data from table and display it and trying to do pagination using 3rd party "Pagination Directive"(angularUtils/src/directives/pagination at master · michaelbromley/angularUtils · GitHub ) . I have added the JS file under the dependency but not able to use it .

Can someone help on this. or let me know,do   i need to do any other steps.

working code

<table class="rwd-table" style="background-color: white;">

                              <div class="searchResult" >

                                      <tr ng-repeat="task in c.data.tasks">

                                              <td>{{task.number}}</td>

                                              <td>{{task.short_description}}</td>

                                              <tr>

                              </div>

                                      </table>

Added dependency

But when i tried the pagination it didnot .

<table class="rwd-table" style="background-color: white;">

                              <div class="searchResult" >

                                      <tr dir-paginate="task in c.data.tasks" | itemsPerPage:5>

                                              <td>{{task.number}}</td>

                                              <td>{{task.short_description}}</td>

                                              <tr>

                              </div>

  </table>

Do i need to add anything in client script .

Client script:

function($scope) {

      var c = this;      

      c.display = function() {                                              

              c.server.update().then(function(data) {              

              })              

      }

      c.display();

}

Any help is appreciated.

[larstange]

Hi

I have experimented a bit, and its easy to create a new template. In the HTML define the new tempalte you want to use to render the pagination controls:

<script>

<div class="range-label">Displaying {{ range.lower }} - {{ range.upper }} of {{ range.total }}</div>

<a href="" title="Previous page" ng-class="{ disabled : pagination.current == 1 }" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>

<a href="" title="Next page"   ng-class="{ disabled : pagination.current == pagination.last }" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>

</script>

Then add this template to the line where you declare the control:

<dir-pagination-controls max-size="20" template-url="paginationAlternative"></dir-pagination-controls>

[Nitin15]

You rock buddy. Thank you so much.

[balarangasamy]

Nitin,

I am new Service Portal. Can you please share client controller code, and html for this pagination?

Thank you so much.

[Mike Edmonds1]

Any idea how to add that to the Knowledge Categories - KBv3 widget? I'm not sure how the list of articles is called once you click the category....

[balarangasamy]

Anyone has done multiple instances of pagination with in the same HTML?