How to define angular js filter in Custom widget in UI designer.

Q&A
1

Hello,

I need to create a simple custom widget with Angular Js.

I define the app controller inside the controller

app.filter('startFrom', function() {

return function(input, start) {
    start = +start;
    return input.slice(start);
}    
})

to

var startFrom= $filter('filter');

    startFrom([],  function(input, start) {
        	if (input) {
        start = +start;
       return input.slice(start);
    }
	return [];
    }
);

However, it seems not working.

The template code is

<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
  <ul>
    <li ng-repeat="item in data | filter:q |startFrom:currentPage*pageSize | limitTo:pageSize">    
     <div>{{item.firstname}}</div>
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> 
Previous </button> 
   {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
  Next
  </button>`

the controller is
`

function sds($scope, $filter) {
    var ctrl = this;
     
    $scope.startFrom=0;
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data =  [
  {
    "firstname": "Studio",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.905",
    "userName": "studio",
    "title": "",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "",
    "last_connection": "",
    "password": "",
    "manager_id": "0",
    "id": "22",
    "job_title": "Studio technical user for preview",
    "last_update_date": "2018-08-13 11:27:39.599"
  },
  {
    "firstname": "Giovanna",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.905",
    "userName": "giovanna.almeida",
    "title": "Mrs",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Almeida",
    "last_connection": "",
    "password": "",
    "manager_id": "17",
    "id": "21",
    "job_title": "Account manager",
    "last_update_date": "2018-06-27 13:16:04.905"
  },
  {
    "firstname": "Daniela",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.889",
    "userName": "daniela.angelo",
    "title": "Mrs",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Angelo",
    "last_connection": "",
    "password": "",
    "manager_id": "1",
    "id": "17",
    "job_title": "Vice President of Sales",
    "last_update_date": "2018-06-27 13:16:04.889"
  }, 
  {
    "firstname": "Walter",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.827",
    "userName": "walter.bates",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Bates",
    "last_connection": "2018-12-13 09:31:35.004",
    "password": "",
    "manager_id": "3",
    "id": "4",
    "job_title": "Human resources benefits",
    "last_update_date": "2018-06-27 13:16:04.827"
  },
  {
    "firstname": "Isabel",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.858",
    "userName": "isabel.bleasdale",
    "title": "Mrs",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Bleasdale",
    "last_connection": "",
    "password": "",
    "manager_id": "11",
    "id": "10",
    "job_title": "Product marketing manager",
    "last_update_date": "2018-06-27 13:16:04.858"
  },
  {
    "firstname": "Jan",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.858",
    "userName": "jan.fisher",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Fisher",
    "last_connection": "",
    "password": "",
    "manager_id": "11",
    "id": "9",
    "job_title": "Infrastucture specialist",
    "last_update_date": "2018-06-27 13:16:04.858"
  },
  {
    "firstname": "Patrick",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.842",
    "userName": "patrick.gardenier",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Gardenier",
    "last_connection": "",
    "password": "",
    "manager_id": "5",
    "id": "6",
    "job_title": "Financial controller",
    "last_update_date": "2018-06-27 13:16:04.842"
  },
  {
    "firstname": "Thorsten",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.842",
    "userName": "thorsten.hartmann",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Hartmann",
    "last_connection": "",
    "password": "",
    "manager_id": "5",
    "id": "8",
    "job_title": "Financial planning manager",
    "last_update_date": "2018-06-27 13:16:04.842"
  },
  {
    "firstname": "Joseph",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.874",
    "userName": "joseph.hovell",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Hovell",
    "last_connection": "",
    "password": "",
    "manager_id": "12",
    "id": "14",
    "job_title": "Engineer",
    "last_update_date": "2018-06-27 13:16:04.874"
  },
  {
    "firstname": "William",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.795",
    "userName": "william.jobs",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Jobs",
    "last_connection": "",
    "password": "",
    "manager_id": "0",
    "id": "1",
    "job_title": "Chief Executive Officer",
    "last_update_date": "2018-06-27 13:16:04.795"
  },
  {
    "firstname": "Virgine",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.842",
    "userName": "virginie.jomphe",
    "title": "Mrs",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Jomphe",
    "last_connection": "",
    "password": "",
    "manager_id": "5",
    "id": "7",
    "job_title": "Accountant",
    "last_update_date": "2018-06-27 13:16:04.842"
  },
  {
    "firstname": "Helen",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.827",
    "userName": "helen.kelly",
    "title": "Mrs",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Kelly",
    "last_connection": "2018-07-26 15:41:40.803",
    "password": "",
    "manager_id": "1",
    "id": "3",
    "job_title": "Human resource manager",
    "last_update_date": "2018-06-27 13:16:04.827"
  },
  {
    "firstname": "Misa",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.905",
    "userName": "misa.kumagai",
    "title": "Mrs",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Kumagai",
    "last_connection": "",
    "password": "",
    "manager_id": "17",
    "id": "19",
    "job_title": "Account manager",
    "last_update_date": "2018-06-27 13:16:04.905"
  },
  {
    "firstname": "Marc",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.874",
    "userName": "marc.marseau",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Marseau",
    "last_connection": "",
    "password": "",
    "manager_id": "12",
    "id": "13",
    "job_title": "Engineer",
    "last_update_date": "2018-06-27 13:16:04.874"
  },
  {
    "firstname": "Michael",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.874",
    "userName": "michael.morrison",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Morrison",
    "last_connection": "",
    "password": "",
    "manager_id": "1",
    "id": "12",
    "job_title": "Chief Technical Officer",
    "last_update_date": "2018-06-27 13:16:04.874"
  },
  {
    "firstname": "Anthony",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.889",
    "userName": "anthony.nichols",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Nichols",
    "last_connection": "",
    "password": "",
    "manager_id": "17",
    "id": "18",
    "job_title": "Account manager",
    "last_update_date": "2018-06-27 13:16:04.889"
  },
  {
    "firstname": "Favio",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.858",
    "userName": "favio.riviera",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Riviera",
    "last_connection": "",
    "password": "",
    "manager_id": "1",
    "id": "11",
    "job_title": "Vice President of Marketing",
    "last_update_date": "2018-06-27 13:16:04.858"
  },
  {
    "firstname": "April",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.811",
    "userName": "april.sanchez",
    "title": "Mrs",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Sanchez",
    "last_connection": "",
    "password": "",
    "manager_id": "3",
    "id": "2",
    "job_title": "Compensation specialist",
    "last_update_date": "2018-06-27 13:16:04.811"
  },
  {
    "firstname": "Thomas",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.889",
    "userName": "thomas.wallis",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Wallis",
    "last_connection": "",
    "password": "",
    "manager_id": "12",
    "id": "16",
    "job_title": "Consultant",
    "last_update_date": "2018-06-27 13:16:04.889"
  },
  {
    "firstname": "Zachary",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.827",
    "userName": "zachary.williamson",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Williamson",
    "last_connection": "",
    "password": "",
    "manager_id": "1",
    "id": "5",
    "job_title": "Chief Financial Officer",
    "last_update_date": "2018-06-27 13:16:04.827"
  },
  {
    "firstname": "Norio",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.905",
    "userName": "norio.yamazaki",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Yamazaki",
    "last_connection": "",
    "password": "",
    "manager_id": "17",
    "id": "20",
    "job_title": "Account manager",
    "last_update_date": "2018-06-27 13:16:04.905"
  },
  {
    "firstname": "Mauro",
    "icon": "icons/default/icon_user.png",
    "creation_date": "2018-06-27 13:16:04.874",
    "userName": "mauro.zetticci",
    "title": "Mr",
    "created_by_user_id": "-1",
    "enabled": "true",
    "lastname": "Zetticci",
    "last_connection": "",
    "password": "",
    "manager_id": "12",
    "id": "15",
    "job_title": "Consultant",
    "last_update_date": "2018-06-27 13:16:04.874"
  }
]
    $scope.q = '';
    
    $scope.getData = function () {
      return $filter('filter')($scope.data, $scope.q)
    }
    
    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);
    }
    
    for (var i=0; i<65; i++) {
       // $scope.data.push("Item "+i);
    }

    $scope.$watch('q', function(newValue,oldValue){                      
        if(oldValue!=newValue){
        $scope.currentPage = 0;
      }
    },
 
 ;r
 
 e); 
 
var startFrom= $filter('filter');

    startFrom([],  function(input, start) {
        	if (input) {
        start = +start;
       return input.slice(start);
    }
	return [];
    }
); 

/*
var myApp2=angular.module('bonitasoft.ui.services',[]);
myApp2.filter('startFrom', function() {
	return function(input, start) {
		if (input) {
			start = +start;	// parse to int
			return input.slice(start);
		}
		return [];
	}
});*/
/*

 

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start;
        return input.slice(start);
    }
    
})*/

}
2

Hello,
add this filter code as an asset in js file. Then add required angular modules to “angular.filter”, delete “startForm” from your controller. This should work.

! function (a, b, c) {
    "use strict";

b.module('startFrom', [])
  .filter('startFrom', function () {
      return function (input, offset) {
          return (input instanceof Array) 
            ? input.slice(+offset) 
            : input
      }
  }),
  
  b.module("angular.filter", ["startFrom"])
}(window, window.angular);
3

Thanks a lot!
It works perfectly.
I appreciate your help. :slight_smile: