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

Yaraslau · ‎09-20-2021

Need to change:

<g:requires name="angular_includes_1.4.js" includes="true" />
<g:requires name="sn/common/js_includes_common.js" includes="true" />

Also it is impossible using in UI Action. sn-record-picker uses angular_1.4 but UI Action works with angular_1.5.11. So we got error and cannot use both version of angular in one page.

Jeffrey Siegel · ‎12-18-2023

Has anyone figured out how to use it in a UI Action? i really need it to work there.