sn-record-picker Service Portal for multiselect widget (interface like backend). create watchlist on portal.

[Maroof Ali]

I have created a front-end watch-list for service portal. if you want to add the email field you can just create a text  field and send the input.text to the object to add in the watchlist.

I have attached the images to upload in the platform in .jpg

<!--HTML-->

<span class="watchlist">
<h4 class="light field field-label">${Watchlist}</h4>
<div class="text-muted light field">
<div class="picker">
<sn-record-picker id="testing"
field="customer"
table="'customer_contact'"
display-field="'name'"
value-field="'sys_id'"
search-fields="'name'"
page-size="100"
multiple="true"
default-query="active=true"> <!-- for dynamic default-query use ( default-query="data.myquery" ) -->

</sn-record-picker>
</div>

<span><img src="lock.jpg" class="lock" ng-click="lock();" width="44" height="44"><span aria-hidden="true"><img src="unlock.jpg" class="unlock" ng-click="unlock(data.sys);" width="44" height="44" aria-hidden="true"> <span class="watchlist1 ng-binding">{{data.watch}}</span> <span class="watchlist2" ></span></span>
</span>
</div></span>

--Client Script-- I have used Jquery but you can use Javascript or angulerJS

function ($scope, spUtil) {
c = this;

c.data.customer = "";
$scope.customer={
displayValue:c.data.name,
value : c.data.sys_id,
name : 'customer'
};

$scope.$on("field.change", function(evt, params){
c.data.customer = $scope.customer.value;

});

$(".watchlist2").hide();
$(".picker").hide();
$(".unlock").hide();

$scope.lock = function(){
$(".watchlist2").show();
$(".picker").show();
$(".unlock").show();
$(".lock").hide();
};

$scope.unlock = function(id){
c.data.sys_id = id;

var text = $('.select2-search-choice').map(function(){  // comma seperated display values
return $(this).text();
}).get().join(',');

$(".lock").show();
$(".unlock").hide();
$(".picker").hide();
$(".watchlist1").hide();
$(".watchlist2").text(text);
$(".watchlist2").show();
c.server.update().then(function(response) {
spUtil.update($scope);
});
};

};

--Server Script--

if (input) {  // when you send the input from client side
var customer = input.customer;
var Case = new GlideRecord(data.table);
Case.addQuery('sys_id', input.sys_id);
Case.query();
if (Case.next()) {
Case.setValue('watch_list', customer);
Case.update();
}
}

// Get the values from backend to front end onLoad

var gr = new GlideRecord(data.table);
gr.addQuery('sys_id', data.sys_id);
gr.query();
if (gr.next()) {

var sys= $sp.getField(gr, 'sys_id');
if (sys!= null)
data.sys= sys.display_value;

var watchlist = $sp.getField(gr, 'watch_list');
if (watchlist != null)
data.watch = watchlist.display_value;

// Send dynamic query

var myquery = "your_query";

data.myquery = myquery ;

}

[Mwatkins]

Hello @maroofali , 

Very interesting enhancement, thanks for sharing. By the way, I have posted some customizations that can be made to improve performance of the sn-record-picker directive itself. Since your solution leverages that directive (called an Angular Provider in ServiceNow speak) I thought I'd post a link to my article here:

Reference field snRecordPicker: Performance Tips for ServicePortal/Angular Directive

All the best,

Please 👍 if Helpful

[Maroof Ali]

Hi @Mwatkins 

Great article 🙂

[Mwatkins]

Thanks, Maroof! Sorry to be petty, but, if you wouldn't mind, can you mark my comment and the article as helpful? Thanks so much!

Please 👍 if Helpful

[Danish Anwar1]

Ground-Breaking Article 100 Likes (y)

[Maroof Ali]

Thanks

[GoBucks]

@Maroof AliI have a couple of questions. I see you have this developed for Cases.  It would appear that with modifications this could also work for INCs and RITMs? I'm looking for a watch list solution that works on the Standard Ticket page within /esc.

With your client script in jquery, is there any additional configuration needed to run jquery in portal or should this also run fine OOTB?  (I ask because I know one can include other javascript libraries if/when needed).

I'm basically wanting to know how to reengineer this per what I mentioned above.  Plus, have a field for entering an email address string would be nice too.

[Dennis17]

Hi @Maroof Ali,

I really like you development but it doesn't work on my instance. I have copied your code, without any change but searching is infinitely loading.

Should I change something? I have installed on my personal instance CSM plugin, with DEMO data.

Thanks in advance.

Denis.

[Sails]

Hi @GoBucks : did you try this solution? It doesn't seem to be as precise as @Maroof Ali did, but accepts email as string

Thanks

[shagun137]

Hi @Dennis17 , Were you able to solve the problem? I am also facing the same issue. The list just keeps on loading.

[Dennis17]

Hi @shagun137 ,

Finally I followed the best ServiceNow practices and I created the tables in the instance to allow using List Collector variable.

Good luck!

Dennis.

[shagun137]

@Dennis17 - Thanks for the quick response.

But what all changes you made in the code after table creation?

[Maroof Ali]

@Dennis17 @shagun137 @Sails  Hope you have define your value in tag properly. please check.

 <sn-record-picker id="testing"    //Just a name
field="customer"  // Table field you want to see
table="'customer_contact'" // Table name from you want to fetch data
display-field="'name'"   // field which is dotwalk to reference field i.e. cutomer
value-field="'sys_id'"   // Use it as it is
search-fields="'name'"   // field which is dotwalk to reference field i.e. cutomer
page-size="100"
multiple="true"
default-query="active=true"   // this works as reference qualifier

>

Also in Server script please defined your tables correctly.

Thank you

[shagun137]

@Maroof Ali  - Thankyou for the response. But in the client script, 'customer' that is used , Is it the variable or field that is mentioned in HTML?

[Maroof Ali]

@shagun137  That is a Json variable only,

c.data.customer in client script is tied to input.customer in Server Script.

If you are changing client script you have to change in server script as well. 

Please mark helpful.

[Johnnie1231]

Hi @Maroof Ali ,

I tried your code but get an error message: GlideRecord.addQuery() - invalid table name: null

Any ideas why? I tried to read from sys_user table.

field="user_name" 
table="'sys_user'"

I also tried hardcoding:
var gr = new GlideRecord(data.table);

to

var gr = new GlideRecord("sys_user");

No errors but the search just stuck at loading like what the others have said. Am I missing something?

[shagun137]

@Johnnie1231  - List keeps on loading because of too many records in user table. Try to modify the default query in html. For example, I used -

default-query="'active=true^web_service_access_only=false^user_nameISNOTEMPTY^emailISNOTEMPTY'"

with this list was giving the data but still did quite a many changes in code to get the desired result.

[rafas_2703]

Hi @Maroof Ali ,

This is great! I was wondering if you could help me with something.

Imagine the scenario: I go to the esc portal and create an HR Case. I type in the watchlist variable for example 4 users. In the backend I have a field in the HR Case with the name 'watch_list'. How can I, auto-populate that field, with the users I selected in the widget when submitting the case?

Hopefully I explained myself well..

Thanks!