Modifying the look snRecordPicker directive

[yundlu316]

Our team built a tabbed form in a mdDialog using Angularjs Material. We are having issues building out reference input fields, but stumbled across the directive called snRecordPicker that does exactly what we want. The only problem is the drop down's look and feel is drastically different from the drop down's in Angular Material:

We want it to look like this:

Instead of this:

From another community post, we also located the code for snRecordPicker (/scripts/js_includes_sp.jsx) and are wondering if there's a way to modify the code so that it can look like the Material drop down?

[Matthew Glenn]

You can always create your own directive

If you'd like to use the snRecordPicker as a template, copy the code from /scripts/sn/common/controls/directive.snRecordPicker.js

To create the new directive:

1. Service Portal -> Angular Providers
2. Fill out the form, setting the type as 'Directive' and placing your code in the Client Script field
3. Add the directive as an Angular Provider to your widget (you may need to add the Angular Providers related list if it's not already there)
4. Add the directive to your widget html

We needed to make some adjustments to the snRecordPicker directive for our portal shopping cart and ended up creating our own to accomplish this, using the OOB as a template

[yundlu316]

Hi Matt, thanks for this!   I was thinking the same thing and got the snippet of code for snRecordPicker, but how would i change the css behind it?   There's a line in the code that says containerCssClass : 'select2-reference ng-form-element',   Would I just create another container css class and then define what that is in the CSS portion of the widget editor?   Thanks!

[Mwatkins]

Thanks Matt Glen for the tip!

If you want to create your own version of the sn-record-picker directive it is easier than I thought. I recently tested this for a performance improvement for a customer.

The below steps change the default search behavior to use a Startswith query (much more efficient for MySQL than the default Contains behavior) and also adds a 5 character minimum (configurable) before an auto-complete request will be sent.

1. Create a new "Angular Provider" of type "Directive" and name it in camel case. (e.g. myRecordPicker, acmeRecordPicker, youGetTheIdea...)
2. Copy paste the entire directive.snRecordPicker code from /scripts/js_includes_sp.jsx into the Client Script field of your new Angular Provider
3. Remove the below outer function call but keep everything else that is inside. And give the function a name so that "function(" becomes "function myRecordPicker("

angular.module('sn.common.controls').directive('snRecordPicker',
...keep everything in here...
)

4. Now make two minor changes:
- in the "scope" object (around lines 13-27) add a line as follows:

minimumInputLength: '=?',

- in the "config" object (around lines 94-98) add a line as follows (defaults to 3 if nothing set in HTML tag):

minimumInputLength: scope.minimumInputLength ? parseInt(scope.minimumInputLength, 10) : 3,

5. Add the new provider to your widget via the related list to "Angular Providers"
6. In the template (sp_widget HTML Template field or sp_ng_template) where you used to reference "sn-record-picker" you replace that with "my-record-picker" (or the equivalent depending on the name you picked in step #1) - Angular will convert it to the equivalent camel case name you selected in step #1 automatically.
7. Add two new parameters inside the <my-record-picker...> tag in your template, startswith="true" and minimum-input-length="5". It should end up looking something like this:

<my-record-picker
field="c.requestedForUserList"
default-query='c.data.requestedForFilter'
table="'sys_user'"
startswith="true",
minimum-input-length="5",
style="margin-top: 5px;"
display-field="'name'"
display-fields="'user_name,title'"
value-field="'sys_id'"
search-fields="'name,user_name,title'"
page-size="100"
multiple="true">
</my-record-picker>

8. As a final touch, in Orlando the Table REST API supports bypassing the COUNT(*) query. In the "search" method add "&sysparm_no_count=true" to the url as shown below:

var url = '/api/now/table/' + scope.table + '?' + urlTools.encodeURIParameters(queryParams.data) + "&sysparm_no_count=true";

See KB0817996 - Orlando Performance Improvement - Remove Pagination Count 

While you're at it, ask your customer to consider raising the value of glide.xmlhttp.ac_wait_time to reduce the frequency of hitting the database with auto-complete requests. Bumping it up to 1000ms doesn't feel too bad and it saves a lot of processing on the database.

[Jyoti Gaikwad]

Hello Team,

I also need to modify data picker like above ,instead of 

 this using sn-record-picker  . please suggest some solution.