Modal dialog angular js

[amaradiswamy]

Hi All,

I am trying to change "approval info" widget as user's can reject the requests without providing comments in service portal.

So, i thought to display a model dialog to ask for the comments and send these comments back to the server to update in the record. I am struggling to get this done. Please help me to acheive this.

HTML template:

<div class="panel panel-{{::c.options.color}} b">
   <div class="panel-heading">
       <h4 class="panel-title" ng-if="c.data.state == 'requested'">${This {{c.data.label}} requires your approval}</h4>
       <h4 class="panel-title" ng-if="c.data.state == 'approved'">${Approved} <sn-time-ago timestamp="::c.data.sys_updated_on" /></h4>
       <h4 class="panel-title" ng-if="c.data.state == 'rejected'">${Rejected} <sn-time-ago timestamp="::c.data.sys_updated_on" /></h4>
   </div>   
   <div class="panel-body">
       <form ng-submit="$event.preventDefault()" class="form-horizontal">
           <div ng-if="c.data.fields.length > 0">
               <div ng-repeat="field in c.data.fields" class="m-b-xs" ng-if="field.value">
                   <label class="m-n">{{field.label}}</label>
                   <span ng-switch="field.type">
                       <div ng-switch-when="glide_date_time" title="{{field.display_value}}"><sn-time-ago timestamp="::field.value" /></div>
                       <div ng-switch-default >{{field.display_value}}</div>
                   </span>
               </div>
           </div>
           <div ng-if="c.data.state == 'requested'" class="question">
               <button type="button" name="approve" class="btn btn-success btn-question" ng-click="c.action('approved')">${Approve}</button>
               <div class="spacer"></div>
               <button type="button" name="reject" class="btn btn-default btn-question" ng-click="c.action('rejected')">${Reject}</button>
               <input   ng-model="myInput"   class="demo">
           </div>
       </form>
   </div>   

Client controller:

function ($scope, $uibModal) {
   var c = this;
   c.action = function(state) {
   c.modalInstance = $uibModal.open({
   templateUrl: 'modalTemplate',
   scope: $scope
   });
   c.closeModal = function() {
   c.modalInstance.close();
   }
   c.okay = function() {
   $modalInstance.close();
   c.data.op = state;
   c.data.state = state;
   if(state == 'rejected')
   {
   c.data.comments = c.data.sometext;
                         }
   c.server.update();
             }
   }
}

Server script:

var gr = $sp.getRecord();
if (input && input.op && gr) { 
   gr.state = input.op;
   gr.update();
}
var fields = $sp.getFields(gr, 'state,sys_created_on');
if (gr) {
   if (gr.sys_mod_count > 0)
   fields.push($sp.getField(gr, 'sys_updated_on'));
   data.fields = fields;
   data.state = gr.state.toString();
   data.sys_updated_on = gr.sys_updated_on.toString();
   data.sys_id = gr.getUniqueValue();
   data.table = gr.getTableName();
   data.label = getRecordBeingApproved(gr).getLabel();
   data.input = input.myInput;
   data.comments = gr.comments; 
}
function getRecordBeingApproved(gr) {
   if (!gr.sysapproval.nil())
   return gr.sysapproval.getRefRecord();
   return gr.document_id.getRefRecord();
}

Thanks and regards

Swamy

[Brad Tilton]

So what is the issue with what you're doing currently, where does it fail?

[amaradiswamy]

Hi Brad,

I am using the below script, but html is not getting rendered

Page id: approval

HTML:

<div class="panel panel-{{::c.options.color}} b">       
   <div class="panel-heading">       
       <h4 class="panel-title" ng-if="c.data.state == 'requested'">${This {{c.data.label}} requires your approval}</h4>       
       <h4 class="panel-title" ng-if="c.data.state == 'approved'">${Approved} <sn-time-ago timestamp="::c.data.sys_updated_on" /></h4>       
       <h4 class="panel-title" ng-if="c.data.state == 'rejected' &&   c.data.comment">${Rejected} <sn-time-ago timestamp="::c.data.sys_updated_on" /></h4>       
   </div>       
   <div class="panel-body">       
       <form ng-submit="$event.preventDefault()" class="form-horizontal">       
           <div ng-if="c.data.fields.length > 0">       
               <div ng-repeat="field in c.data.fields" class="m-b-xs" ng-if="field.value">       
                   <label class="m-n">{{field.label}}</label>       
                 <span ng-switch="field.type">       
                       <div ng-switch-when="glide_date_time" title="{{field.display_value}}"><sn-time-ago timestamp="::field.value" /></div>       
                       <div ng-switch-default >{{field.display_value}}</div>       
                 </span>       
               </div>       
           </div>       
           <div ng-if="c.data.state == 'requested'" class="question">       
               <button type="button" name="approve" class="btn btn-success btn-question" ng-click="c.action('approved')">${Approve}</button>       
               <div class="spacer"></div>       
               <button type="button" name="reject" class="btn btn-default btn-question" ng-click="c.action('rejected')">${Reject}</button>       
       </div>       
       </form>       
 <div ng-if="c.data.state == 'rejected'" ng-show="c.comment">       
             You answered <span>{{c.comment}}</span>       
       </div>       
 </div>       

Client controller:

function (spModal) {   
   var c = this;   
   c.action = function(state) {   
   c.data.op = state;   
   if(state == "rejected"){   
     c.onPrompt();   
   }   
   c.data.state = state;   
   c.server.update();   
   }   
   c.onPrompt = function() {   
                 spModal.open({   
                       title: 'Give me a comment',   
                       message: 'Your comment please?',   
                       input: true,   
                       value: c.comment   
               }).then(function(comment) {   
                       c.comment = comment;   
                       c.data.comment = comment;   
               })   
       }   
} 

Server script:

var gr = $sp.getRecord();   
if (input && input.op && gr && input.comment) {     
 gr.state = input.op;   
 gr.update();   
}   
var fields = $sp.getFields(gr, 'state,sys_created_on');   
if (gr) {   
 if (gr.sys_mod_count > 0)   
   fields.push($sp.getField(gr, 'sys_updated_on'));   
 data.fields = fields;   
 data.state = gr.state.toString();   
 data.sys_updated_on = gr.sys_updated_on.toString();   
 data.sys_id = gr.getUniqueValue();   
 data.table = gr.getTableName();   
 data.label = getRecordBeingApproved(gr).getLabel();   
}   
function getRecordBeingApproved(gr) {   
 if (!gr.sysapproval.nil())   
   return gr.sysapproval.getRefRecord();   
 return gr.document_id.getRefRecord();   
}     

Present output:

Expected output:

[Brad Tilton]

Have you checked the console to see if there are any errors? Also, try logging $scope.data to the log.

[ChrisBurks]

Hi Amaradi,

When you view the page to with id = approval, are you also passing the table and sys_id id as parameters in the url?

ie. //<your_instance>.service-now.com/sp?id=approval&table=sysapproval_approver&sys_id=<sys_id_of_an_approval_record>

EDIT:

Never mind the above. You probably are doing that since the right column is showing up.

However, I would check which version or update your instance is on for Helsinki. I believe spModal is provided in patch_5. Prior to that $uibModal is used instead of spModal.