Create Reference Field in Service Portal using ServiceNow predefine directive

HTML Code:

<sn-record-picker field=" nameGroup " table="sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" multiple="true">

Client Script:

$scope.nameGroup={"name":"nameGroup"};
$scope.$on("field.change", function(evt, parms) {
	if(parms.field.name=='nameGroup'){
		$scope.modal.nameGroup=parms.field.value;
	});

Create Date Picker in ServicePortal using predefine directive

<sp-date-picker field="fromdate" ng-model="c.userInputDate" sn-change=""></sp-date-picker>

$scope.fromdate = {
		displayValue: '',
		value: '',
		name: 'fromdate'
	};

Read or Interact with Catalog Item from Widget

$scope.page.g_form.setValue('terminated_user', c.data.user.value);

Service Catalog Field value changes event

$rootScope.$on("field.change", function(evt,parms){
		var field = parms.field.name;
		if(field == 'mrvs_container'){
			$scope.displayData = JSON.parse($scope.page.g_form.getValue('mrvs_container'));
			$scope.$apply();
		}
	});