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-->

${Watchlist}

--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 ;

}

Labels:

• Scripting and Coding
• Service Portal Development
• User Interface (UI)