Is it possible to use sn-record-picker on UI Pages?

rafael_merces2 · ‎04-03-2018

Hi all,

So, I saw this post showing how to use ths functionality on Service Portal:

https://community.servicenow.com/community?id=community_question&sys_id=d7698765db5cdbc01dcaf3231f961935

And I would like to know if it is also possible to user it on UI Pages.

Thanks!

Kapil Sutariya · ‎04-04-2018

Hi Rafael,

sn-record-picker is an angular directive so it is possible to use it in ui page once you include required js file and inject module for sn-record-picker directive. Here is the sample ui page html to use sn-record-picker.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<g:requires name="scripts/angular_includes_1.4.js" includes="true" />
	<g:requires name="scripts/sn/common/js_includes_common.js" includes="true" />
	<style>
		.select2-choice{
		    display: block !important;
		}
	</style>
	<script>
		angular.module('sn.test', ['sn.common']);
	</script>
	<html ng-app="sn.test">
		<head>
		</head>
		<body>
			<sn-record-picker field="'short_description'" table="'incident'" display-field="'short_description'" display-fields="'short_description'" value-field="'sys_id'" search-fields="'short_description'" page-size="100"></sn-record-picker>
		</body>
	</html>
</j:jelly>

Thanks,
Kapil

View solution in original post

Kapil Sutariya · ‎04-04-2018

Hi Rafael,

sn-record-picker is an angular directive so it is possible to use it in ui page once you include required js file and inject module for sn-record-picker directive. Here is the sample ui page html to use sn-record-picker.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<g:requires name="scripts/angular_includes_1.4.js" includes="true" />
	<g:requires name="scripts/sn/common/js_includes_common.js" includes="true" />
	<style>
		.select2-choice{
		    display: block !important;
		}
	</style>
	<script>
		angular.module('sn.test', ['sn.common']);
	</script>
	<html ng-app="sn.test">
		<head>
		</head>
		<body>
			<sn-record-picker field="'short_description'" table="'incident'" display-field="'short_description'" display-fields="'short_description'" value-field="'sys_id'" search-fields="'short_description'" page-size="100"></sn-record-picker>
		</body>
	</html>
</j:jelly>

Thanks,
Kapil

rafael_merces2 · ‎04-05-2018

Thank you Kapil! That is what I was looking for.

Greg45 · ‎07-19-2019

Thanks for the example. This almost got me up and running, but I was unsure how to get to the value. Below is a small edit to fill in the gap that I was having, in case others fall into the same.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<g:requires name="scripts/angular_includes_1.4.js" includes="true" />		
	<g:requires name="scripts/sn/common/js_includes_common.js" includes="true" />
	<style>
		.select2-choice{
		    display: block !important;
		}
	</style>
	
	<div ng-app="lookupTestApp" ng-controller="lookupTestController">	
		
		<sn-record-picker table="'cmn_location'" field="locationField" value-field="'sys_id'" display-field="'name'" search-fields="'name'" page-size="100"></sn-record-picker>
		{{locationField.value}}
	</div>
	
</j:jelly>

angular.module('lookupTestApp', ['sn.common'])
.controller('lookupTestController', function($scope ) {
	
	$scope.locationField = {
        displayValue:'displayStartingValue',
        value: 'staringValue',
        name: 'locationField'
	};
	
});

Notice now, you can reference into locationField.value to get the value. Replace the controller displayValue and value with the desired starting values.

Abhijit4 · ‎02-19-2020

Hi Kapil,

I copied your above into my UI page but still showing nothing.

Am i missing something?

Any help will be appreciated.

Thanks.

By marking my response as correct or helpful, you contribute to helping future readers with similar issues.
Regards,
Abhijit
ServiceNow MVP

ServiceNow Buddy Website LinkedIn