Edit Popup Message Background Color

F_bio Gon_alves
Tera Expert

Hi SNC,

I am developing a platform using Service Portal and one of the requirements is to, after update a record on a table,the user returns to the previous page and a message is exhibited on th   screen with the text 'XXXXX Updated'.
I achieved this by adding the line 'sessionStorage.message = 'XXXXX Updated'' in the Client side of the Form widget after I click the Update UI Action and it works as intended.

But now I would like to know how can I change the color of this green message box by a, for instance, red message box (see the attachment image).

Any ideas? Is there a system property to control this?
I start thinking about replace 'sessionStorage.message' by an error message, since it is usually red by default. Could that be a workaround? If yes, how do I call an error message instead?

Thanks in advance.

Fábio Gonçalves

Untitled.png

1 ACCEPTED SOLUTION

Hi Fabio



If you want to see how the messages work...here's a real life example.



HTML code



<div>


  <button name="error" ng-click="errorOnSubmit()" class="btn btn-alert">Error</button>


  <button name="message" ng-click="messageOnSubmit()" class="btn btn-success">Message</button>


      <button name="trivial" ng-click="trivialOnSubmit()" class="btn btn-info">Trivial</button>


</div>



Server Script



(function() {



  var m = data.msgs = {};


  m.errorMsg = gs.getMessage("This is an error man!");


  m.messageMsg = gs.getMessage("This is a message bro!");


  m.triviaMsg = gs.getMessage("This is a trivial sista!");



})();



Client controller



function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce) {



  var c = this;


  $scope.m = $scope.data.msgs;



  $scope.errorOnSubmit = function(){


    spUtil.addErrorMessage($scope.m.errorMsg);


  };



  $scope.messageOnSubmit = function(){


    spUtil.addInfoMessage($scope.m.messageMsg);


  };



  $scope.trivialOnSubmit = function(){


    spUtil.addTrivialMessage($scope.m.triviaMsg);


  };



}



Here's the result


Customer_Service_Portal_-_Angular_Playground.png



Clicking the first button



Customer_Service_Portal_-_Angular_Playground.png



Clicking the second


Customer_Service_Portal_-_Angular_Playground.png



I hope this will help.


Cheers



R0b0


View solution in original post

8 REPLIES 8

Ivano B
ServiceNow Employee
ServiceNow Employee

Hi Fabio



If you are executing code on client controller you can try this one



spUtil.addErrorMessage('Your message goes here');



just remember to include spUtil in the function



function (...., spUtil, ...) {


        ...


        spUtil.addErrorMessage('Your message goes here');


        ..


}



More information can be found here



documentation/widget_client_script_apis.md at master · service-portal/documentation · GitHub



I hope this will help/answer your question and if it does please mark it



Cheers


R0b0


Hi r0b0_d3vil,



Thanks for your quick reply.


Unfortunately this did not work.



This is the code (part of it) that I have in my Form Widget's Client Script:



"


function ($scope, $rootScope, $timeout, spUtil, $location, $window, nowAttachmentHandler) {



$timeout(function(spUtil){



  var arrayL = document.getElementsByTagName("button2").length;



  for (var i = 0; i < arrayL; i++){



  if(document.getElementsByTagName("button2")[i].innerText == 'Update'){


  document.getElementsByTagName("button2")[i].addEventListener("click",function(spUtil){


  window.location.href = window.history.back(1);


  sessionStorage.message = 'Demand Updated.';


  spUtil.addErrorMessage('Demand Updated.');


  })


  }else{


  document.getElementsByTagName("button2")[i].addEventListener("click",function(){


  location.reload();


  })


  }


  }


  },0)


"



The line 'sessionStorage.message = 'Demand Updated.';' works and creates the green message on the top of the screen that I was talking about above.


But your suggestion, ' spUtil.addErrorMessage('Demand Updated.');' does not 😞



I have some doubts about in which function I must add the 'spUtil', as you said. Please see in bold in the code lines above.




Any suggestions?




Thanks in advance.




Fábio Gonçalves


Hi Fabio



Let me ask you a question. If i'm not wrong you have some buttons on your custom widget right ?


For instance a button to execute an update from the look of your client controller.


Could you please show me the code you are using for your button.



Cheers


R0b0


Hi Fabio



If you want to see how the messages work...here's a real life example.



HTML code



<div>


  <button name="error" ng-click="errorOnSubmit()" class="btn btn-alert">Error</button>


  <button name="message" ng-click="messageOnSubmit()" class="btn btn-success">Message</button>


      <button name="trivial" ng-click="trivialOnSubmit()" class="btn btn-info">Trivial</button>


</div>



Server Script



(function() {



  var m = data.msgs = {};


  m.errorMsg = gs.getMessage("This is an error man!");


  m.messageMsg = gs.getMessage("This is a message bro!");


  m.triviaMsg = gs.getMessage("This is a trivial sista!");



})();



Client controller



function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce) {



  var c = this;


  $scope.m = $scope.data.msgs;



  $scope.errorOnSubmit = function(){


    spUtil.addErrorMessage($scope.m.errorMsg);


  };



  $scope.messageOnSubmit = function(){


    spUtil.addInfoMessage($scope.m.messageMsg);


  };



  $scope.trivialOnSubmit = function(){


    spUtil.addTrivialMessage($scope.m.triviaMsg);


  };



}



Here's the result


Customer_Service_Portal_-_Angular_Playground.png



Clicking the first button



Customer_Service_Portal_-_Angular_Playground.png



Clicking the second


Customer_Service_Portal_-_Angular_Playground.png



I hope this will help.


Cheers



R0b0