Client Scripting in Search Sources

[Kieran King-Kal]

Greetings all, I have an incident table widget with a modal pop-up when you select an incident and when you search for an incident in the widget a new table forms based on the search source page template html.  Is there any way for a client script to be applied to the search source for the modal pop-up to appear once you click on the search result in the search result table.

This is the client script:

c.openPopUp = function(event,item){
		$mdDialog.show({
			controller: function (){
				var ctrl = this;
				this.item = item;
				this.close = function(){
					$mdDialog.hide();
				};
				
				this.createChildInc = function(createInc,incidentId){
				if(createInc){
				c.data.incId = incidentId;
				c.server.update().then(function(r){
					ctrl.childIncMsg = c.data.childIncNumber +" has been logged.";			
					});
				}else{
					ctrl.childIncMsg = "Thank you for your info."
				}
				}
			},
			templateUrl: 'ep-news-ticker-popup2.html',
			clickOutsideToClose:false,
			fullscreen: true, // Only for -xs, -sm breakpoints.
			locals:{

			},
			targetEvent: event,
			controllerAs:'ctrl'

		})
			.then(function(){
			//close dialog callback. not used.
		},function(){
			//cancel dialog callback. not used.
		})
	}

This is the angular-ng template for the modal pop-up:

<md-dialog style="width:40vw">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2 style="color:#fff">{{ctrl.item.type}}</h2>
      <span flex></span>

      <span  ng-click="ctrl.close()"><i class="fa  fa-2x fa-times" aria-hidden="true"></i></span>
    </div>
  </md-toolbar>
  
  <div style="padding:1em 2em 0" >

    <div ng-if="ctrl.item.template == 'incident'">
      <div class="row">

        <div class="form-group">
          <label class="col-sm-5 control-label">${Number} :</label>
          <div class="col-sm-7">
            <p class="form-control-static">{{ctrl.item.number}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-5 control-label">${Message} :</label>
          <div class="col-sm-7">
            <p class="form-control-static">{{ctrl.item.title}}</p>
          </div>
        </div>
        <div class="form-group" ng-if="!ctrl.childIncMsg">
          <label class="col-sm-5 control-label">${Are you also effected?*}</label>
          <div class="col-sm-7">
            <p class="form-control-static">
              <button type="button" class="btn btn-success" ng-click="ctrl.createChildInc(true,ctrl.item.sys_id)">Yes</button>
              <button type="button" class="btn btn-danger" ng-click="ctrl.createChildInc(false,ctrl.item.sys_id)">No</button>
            </p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-12 control-label response">
            <center><p>{{ctrl.childIncMsg}}</p></center>
          </label>
        </div>

      </div>
    </div>
<label style="color:red"><b>${*This popup opens for couple of Seconds till Incident creation. Please don't hit the "Yes" button multiple times.}</b></label>
    
    <div ng-if="ctrl.item.template == 'announcement'">
      <div class="row">

        <div class="form-group">
          <label class="col-sm-5 control-label">${Message} :</label>
          <div class="col-sm-7">
            <p class="form-control-static">{{ctrl.item.title}}</p>
          </div>
        </div>

      </div>
    </div>
  </div>
      
</md-dialog>

<style>
  hr{
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .form-group {
    clear: both;
    font-size: 1.3em;
  }
  .control-label {
    text-align: left;
  }
  .form-control-static {
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    min-height: 18px;
  }
  .ep-title{
    margin-top: 1em;
    margin-bottom: .2em;
    font-size: 1.2em;
  }
  .ep-btn{
    margin-bottom: .5em;
  }
  .ep-margin{
    margin-left: .5em;
    margin-right: .5em;
  }
  
  .btn{
    line-height: 1;
  }
  .response{
    color : #2196f3;
  }
</style>

[-O-]

Is this about AI Search in Portal?

[Amit Gujarathi]

HI @Kieran King-Kal ,
I trust you are doing great.

Here's an example of how you might modify your client script to include an event listener for search results:

// Existing function
c.openPopUp = function(event, item) {
    // ... existing code ...
}

// New function to handle search result click
c.handleSearchResultClick = function() {
    // Assuming your search results are in a table with the class 'search-results'
    angular.element(document).getElementsByClassName('search-results')[0].addEventListener('click', function(event) {
        var clickedItem = /* logic to retrieve clicked item data */;
        c.openPopUp(event, clickedItem);
    });
};

// Call this function when the search results are rendered
c.handleSearchResultClick();