Service Portal Widget Passing Search Data To Server Script

Jordan_M · ‎03-09-2023

To make this easier to read / consume the part of each script that should be relevant is on the bottom of each code box.

I created a portal widget and am struggling to get the last bit of the way there. I have a working search function that queries services. (I still need to add on the functionality to check if the service is subscribed or not but that is not my ask here but I won't argue if that is thrown in).

When clicking subscribe it should fire off my script include in the server script and subscribe to the record. It instead creates empty records on the table. If I set the script include variable to gr2 (one of my earlier queries it will successfully subscribe to the last service on the list so I know the functionality works there and it recognizes the action part.) I can't seem to get it to actually pass the sys_id of the record I click the button next to. Here is my HTML, Client and Server script for reference.

<div id="{{p.id}}" class="widget-{{p.widget_type}}">
  <table class="tg">
    <thead>
      <tr>
        <th class="tg-header" colspan="5">My Subscriptions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="sub in data.sub">
        <td class="tg-columns">
          <a target="_blank" href="{{data.instance_name}}nav_to.do?uri=%2Fsys_notif_subscription.do%3Fsys_id%3D{{sub.sys_id}}%26sysparm_record_target%3Dsys_notif_subscription">{{sub.affected_record_name}}</a>
        </td>
      </tr>
    </tbody>
  </table>

  <form ng-submit="c.showModal()">
    <div class="input-group" style="width:100%">
      <input ng-model="c.data.searchText" class="form-control" style="width:100%" placeholder="{{data.filterMsg}}" aria-label="{{data.filterMsg}}">
      <span class="input-group-btn">
        <button class="btn btn-default align-icon" type="button" ng-click="c.showModal()" title="{{data.filterMsg}}" aria-label="{{data.filterMsg}}">
          <i class="fa fa-search"></i>
        </button>
      </span>
    </div><!-- /input-group -->
  </form>

  <div class="modal fade" id="servicesModal" tabindex="-1" role="dialog" aria-labelledby="servicesModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="servicesModalLabel">Subscribe To Additional Services</h4>
        </div>
        <div class="modal-body">
        <ul style="list-style-type: none; padding: 0;">
          <li ng-repeat="service in data.services">
            <button class="btn btn-default align-icon" type="button" ng-if="!service.subscribed" ng-click="c.subscribe(service.sys_id)">
              <i class="fa fa-plus"></i>
            </button>
            <button class="btn btn-default align-icon" type="button" ng-if="service.subscribed" ng-click="c.unsubscribe(service.sys_id)">
              <i class="fa fa-minus"></i>
            </button>
            <span ng-click="c.subscribe(service.sys_id)">{{ service.name }}</span>
          </li>
        </ul>
        </div>
      </div>
    </div>
  </div><!-- /servicesModal -->
</div>

function ($scope, spUtil, snRecordWatcher, $rootScope, $sce) {
  var c = this;

  $scope.server.get({}).then(function(response) {
    $scope.data.subscriptions = response.subscriptions;
  });

  $scope.trustAsHtml = function(html) {
    return $sce.trustAsHtml(html);
  };
	
  c.showModal = function() {
    c.search();
    $('#servicesModal').modal('show');
  };
  
c.search = function() {
  $scope.server.update().then(function(response) {
    if (response.services && response.services.length > 0) {
      c.data.showSubscribeButton = true;
    } else {
      c.data.showSubscribeButton = false;
    }
  });
};
	
	c.subscribe = function() {
		c.data.action = "subscribe";
		c.data.sys_id = "service.sys_id";
		c.server.update().then(function(){
			spAriaUtil.sendLiveMessage($scope.data.subscribeMessage);
		});
	}
	
	c.unsubscribe = function() {
		c.data.action = "unsubscribe";
		c.data.sys_id = "service.sys_id";
		c.server.update().then(function() {
		spAriaUtil.sendLiveMessage($scope.data.unsubscribeMessage);
		});
	}
}

data.subscribeMessage = gs.getMessage("You subscribed to receive updates for this service");
data.unsubscribeMessage = gs.getMessage("You unsubscribed receiving updates for this service");

if (input) {
  data.searchText = input.searchText;
} else {
  data.searchText = '';
}

data.filterMsg = 'Search for Services';
data.showAddButton = true;
data.showSubscribeButton = false;

if (data.searchText !== '') {
  var gr2 = new GlideRecord('cmdb_ci');
  gr2.addEncodedQuery('install_status!=7^sys_class_name=cmdb_ci_service^nameLIKE' + data.searchText);
  gr2.query();
  
  var services = [];
  while (gr2.next()) {
    var service = {
      sys_id: gr2.getUniqueValue(),
      name: gr2.getDisplayValue('name')
			
    };

    services.push(service);
		
		

  }
  
  data.services = services;
  data.showAddButton = true;
} else {
  data.showAddButton = false;
}


(function() {
    var gr = new GlideRecord('sys_notif_subscription');
    gr.addQuery('user', gs.getUserID());
    gr.query();
  
    var subscriptions = [];
    while (gr.next()) {
      var subscription = {
        sys_id: gr.getUniqueValue(),
        affected_record_name: gr.getDisplayValue('affected_record.name')
      };
      subscriptions.push(subscription);
    }

var subscriptionUtil = new SubscriptionUtil();

  // Loop through the subscriptions and check if the user is subscribed to each configuration item
  for (var i = 0; i < subscriptions.length; i++) {
    var nsubscription = subscriptions[i];
    var ci = new GlideRecord('cmdb_ci');
    if (ci.get(nsubscription.affected_record)) {
      // Check if the user is subscribed to this configuration item
      var isSubscribed = subscriptionUtil.isSubscribed(ci);
      nsubscription.subscribed = isSubscribed;
    }
  }

    data.sub = subscriptions;
    data.instance_name = gs.getProperty('glide.servlet.uri');
  })();

data.showServicesModal = function() {
  data.searchText = '';
  data.services = [];
  $('#subscriptionModal').modal('hide');
  $('#servicesModal').modal('show');
}

var sid = input.sys_id;
if (input.action == "subscribe"){
	var subutil = new SubscriptionUtil().subscribe(sid);}
if (input.action == "unsubscribe") {
	var subutil = new SubscriptionUtil().unsubscribe(sid);
}

Any help is tremendously appreciated. I have been beating my head against this for a couple days now.

John Palmer · ‎07-24-2024

your HTML section has the right thing: ng-click="c.subscribe(service.sys_id)"
but the Client Script definition of that function doesn't have a variable name for that:
c.subscribe = function() {...};
c.unsubscribe = function() {...};
should both have something like:
c.subscribe = function(mysys_id) {...};

Both of these functions should reference that name (without the quotes) in

c.data.sys_id = mysys_id;

the server script code looks like it would then work with these changes...