19 Replies · Latest reply on Jun 20, 2017 1:19 PM by Juliana Mendo

    How to get a watch list in widget in Service Portal ?

      Hi Team,

       

      How to get watch list for a particular ticket opened in service portal.

      How to create a widget for this?

      Any suggestions or ideas will help me a lot.

       

       

      Thanks.

      PlatformDeveloper Community

        • Re: How to get a watch list in widget in Service Portal ?
          Laurent Chicoine

          Hi,

           

          You can simply use a List collector variable referencing the user table. In the Service Portal that field will allow to enter an existing user or an email address. You probably should add a help text to indicate to your users that they can input an email address as it is not obvious otherwise.

            • Re: How to get a watch list in widget in Service Portal ?
              Nithin g

              Hi Laurent,

               

              Thanks for your suggestion.

              I want to get the watch list for a particular ticket who are already added to the that record .

              I want to see this watch list in service portal with the help of a widget.

              any idea or suggestion ?

              Thanks

                • Re: How to get a watch list in widget in Service Portal ?
                  Laurent Chicoine

                  Hi Nithin,

                   

                  Here is a quick widget I made, however it does not have any save functionality so you would have to add that. Also the sn-record-picker does not allow to add an email address as the usual watch list field does. If your goal is only to display a read of what was set on creation than this would do the job by simply setting sn-disabled="true".

                   

                  HTML:

                  <div ng-if="data.canRead" class="panel panel-primary b">
                    <div class="panel-heading">
                      <h4 class="panel-title pull-left">
                        ${Watch list}
                      </h4>
                      <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <div class="text-center text-italic text-muted">
                          <sn-record-picker field="watch_list" sn-disabled="!data.canWrite" table="'sys_user'" display-field="'name'" search-fields="'name'" value-field="'sys_id'" default-query="'active=true'" multiple="true"></sn-record-picker>
                        </div>
                    </div>
                  </div>
                  

                   

                  Client script:

                  function($scope, spUtil) {
                      var c = this;
                      
                      $scope.watch_list = {  
                          displayValue: c.data.displayValue,  
                          value: c.data.value,
                          name: 'watch_list'  
                    }; 
                  }
                  

                   

                  Server script:

                  (function() {
                      
                      var table = $sp.getParameter('table')
                      var sys_id = $sp.getParameter('sys_id')
                      var gr = new GlideRecord(table);
                      if(gr.get(sys_id)){
                          data.canRead = gr.watch_list.canRead();
                          data.canWrite = gr.watch_list.canWrite();
                          if(data.canRead){
                              data.displayValue = gr.getDisplayValue('watch_list');
                              data.value = gr.getValue('watch_list');
                          }
                      }
                  })();
                  

                   

                  I know this is incomplete but I hope it helps.

                  4 of 4 people found this helpful
              • Re: How to get a watch list in widget in Service Portal ?
                Sean Doone

                Laurent,

                 

                I'm trying to add the aforementioned watch list functionality (multiple user selection on the record picker) in the Service Portal. Any idea why I'm getting an uncaught type error with the scoped attribute multiple="true"? When I remove that attribute and revert to single selection, it works. Is there something I'm missing when declaring displayValue and value in the scoped watch_list object?

                 

                Error reads: Cannot ready property of 'split' of null

                 

                Further debugging shows that it's coming from the onSelecting() function with the following line:

                var values = scope.field.value == ' ' ? [] : scope.field.value.split(',');

                 

                Any help would be greatly appreciated. I'd really like to avoid a workaround for this.

                  • Re: How to get a watch list in widget in Service Portal ?
                    Warren Shekyls

                    Hi Sean,

                     

                    This is being caused by one line of code in the server side portion of the widget:

                     

                    data.value = gr.getValue('watch_list')

                     

                    When you use getValue and there is nothing in that field, getValue returns 'null', this means the clinet side see's the javascript value null and cant deal with it.

                     

                    I suggest replacing the 2 lines:

                     

                    data.displayValue = gr.getDisplayValue('watch_list');  
                    data.value = gr.getValue('watch_list');

                     

                    with these lines:

                     

                    var dV = gr.getDisplayValue('watch_list');
                    var sV = gr.getValue('watch_list');
                    data.displayValue = dV == '' ? [] : dV;
                    data.value = sV == null ? [] : sV;

                     

                    This will ensure at least a blank array is sent, which can be split.

                     

                    Edit: I don't know how to do the fancy code blocks sorry if it's tough to read

                  • Re: How to get a watch list in widget in Service Portal ?
                    Siladitya Mishra

                    Hi Guys,

                    Does any one figured out how to add save functionality, so that it will update added watch list user to the incident record?

                    I am struggling to get it done from last few days.

                     

                    Any suggestions or ideas will help me a lot.

                     

                      • Re: How to get a watch list in widget in Service Portal ?
                        Laurent Chicoine

                        Hi Siladitya,

                         

                        How do you which to update the watch list? On save (another button on your page, that is probably in another widget), as soon as a user is added/removed or a dedicated button in the watch list widget?

                         

                        Having an idea of which widgets you want to combine this with would help (especially if they are default widgets).

                          • Re: How to get a watch list in widget in Service Portal ?
                            Siladitya Mishra

                            Hi Laurent,

                             

                            I have just used your above code to get watch list on the service portal page. As of now when a user is added to the watch list in the back end in ServiceNow the user is visible in the portal page while opening the incident.

                            However now I want the user should be able to add a person in the watch list from the Service portal page, and the same should reflect in the back end of ServiceNow now.

                             

                            I have added a button on the page, so that the user should be able to save the watch list after adding user(s) to it.

                             

                            HTML:-

                            -----------------

                            <div ng-if="data.canRead" class="panel panel-primary b">
                              <div class="panel-heading">
                                <h4 class="panel-title pull-left">
                                  ${Watch list}
                                </h4>
                                <div class="clearfix"></div>
                              </div>
                              <div class="panel-body">
                                  <div class="text-center text-italic text-muted">
                                  <sn-record-picker on-change="getWatchlists(watch_list)" field="watch_list" sn-disabled="!data.canWrite" table="'sys_user'" display-field="'name'" search-fields="'name'" value-field="'sys_id'" default-query="'active=true^web_service_access_only=false^user_nameISNOTEMPTY'" multiple="true"></sn-record-picker>
                                    <input type="button" value = "Apply"/>
                                 
                                </div>
                              </div>
                            </div>
                            

                             

                            Client script:-

                            ---------------------------

                            function($scope, spUtil, $http) { 
                                var c = this; 
                                 
                                $scope.watch_list = {   
                                    displayValue: c.data.displayValue,   
                                    value: c.data.value, 
                                    name: 'watch_list'   
                              };
                            $scope.getWatchlists = function (cObj) { 
                              var value = document.getElementById(cObj).value;
                              console.log("Value: "+value);
                            
                              }
                            }
                            

                             

                            Server side script:-

                            ---------------------------------

                            (function() {  
                                  
                                var table = $sp.getParameter('table'); 
                                var sys_id = $sp.getParameter('sys_id');
                              var gr = new GlideRecord('task');
                              if(gr.get(sys_id)){  
                                    data.canRead = gr.watch_list.canRead();  
                                    data.canWrite = gr.watch_list.canWrite();  
                                    if(data.canRead){  
                                        var dV = gr.getDisplayValue('watch_list'); 
                              var sV = gr.getValue('watch_list'); 
                              data.displayValue = dV == '' ? [] : dV;
                              data.value = sV == null ? [] : sV;
                                    }
                              } 
                            
                            })(); 
                            

                             

                            Please let me know if you need any more details.

                          • Re: How to get a watch list in widget in Service Portal ?
                            Laurent Chicoine

                            Hi,

                             

                            I did assume that your onchange function was just for testing so I removed it in my code, here you go (I also added a record watcher to allow the watch list to be updated in real time to avoid potential conflicts).

                             

                            I haven't played much with the service portal, so my code might not be optimal, feel free to improve it.

                             

                            HTML

                            <div ng-if="data.canRead" class="panel panel-primary b">  
                              <div class="panel-heading">  
                                <h4 class="panel-title pull-left">  
                                  ${Watch list}  
                                </h4>  
                                <div class="clearfix"></div>  
                              </div>  
                              <div class="panel-body">
                                <form ng-submit="save()">
                                    <div class="text-center text-italic text-muted">
                                      <div>
                                          <sn-record-picker field="watch_list" sn-disabled="!data.canWrite" table="'sys_user'" display-field="'name'" search-fields="'name'" value-field="'sys_id'" default-query="'active=true^web_service_access_only=false^user_nameISNOTEMPTY'" multiple="true"></sn-record-picker>  
                                      </div>
                                      <div style="float:right; margin-top:15px;">
                                        <button type="submit" class="btn btn-primary">
                                          ${Apply}
                                          </button>
                                      </div>
                                    </div>
                                </form>  
                              </div>  
                            </div> 
                            

                             

                            Client controller

                            function($scope, spUtil, $http) {
                                var c = this;
                                
                                $scope.watch_list = {
                                    displayValue: c.data.displayValue,
                                    value: c.data.value,
                                    name: 'watch_list'
                                };
                                $scope.save = function(){
                                    c.data.watchList = $scope.watch_list.value;
                                    c.server.update().then(function(){
                                    });
                                };
                                spUtil.recordWatch($scope, c.data.table, "sys_id=" + c.data.sys_id, function(name, data) {
                                    if(name.name == 'record.updated' && data.operation == 'update'){
                                        $scope.watch_list.value = data.record.watch_list.value;
                                        $scope.watch_list.displayValue = data.record.watch_list.display_value;
                                        $scope.$apply();
                                    }
                                });
                            }
                            

                             

                            Server script

                            (function() {
                                var gr;
                                if(input && input.watchList){
                                    gr = new GlideRecord(input.table);
                                    if(gr.get(input.sys_id)){
                                        if(gr.watch_list.canWrite()){
                                            gr.watch_list = input.watchList;
                                            gr.update();
                                            gs.addInfoMessage('Updated');
                                        }
                                        else{
                                            gs.addErrorMessage("Update failed, you don't have the required access");
                                        }
                                    }
                                }
                                else{
                                    var table = $sp.getParameter('table');
                                    var sys_id = $sp.getParameter('sys_id');
                                    gr = new GlideRecord(table);
                                    if(gr.get(sys_id)){
                                        data.table = table;
                                        data.sys_id = sys_id;
                                        data.canRead = gr.watch_list.canRead();
                                        data.canWrite = gr.watch_list.canWrite();
                                        if(data.canRead){
                                            var dV = gr.getDisplayValue('watch_list');
                                            var sV = gr.getValue('watch_list');
                                            data.displayValue = dV == '' ? [] : dV;
                                            data.value = sV == null ? [] : sV;
                                        }
                                    }
                                }
                                
                            })();
                            
                            1 of 1 people found this helpful