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

Hi again,



Still unable to make it work 😞



My button is a simple Update UI Action that I pull to the Service Portal Form Widget with the following html (I already add your suggestion here; see in bold😞



      <div class="panel-footer">


          <button2 name="error" ng-click="errorOnSubmit()" ng-mousedown="triggerUIAction(action)" ng-repeat="action in getUIActions('button')" class="btn btn-primary action-btn pull-right">{{action.name}}</button2>


          <span>{{status}}</span>


          <!--<button ng-if="getPrimaryAction()" type="submit" ng-mousedown="triggerUIAction(getPrimaryAction())" class="btn btn-success action-btn pull-right">${Save} <span ng-if="saveButtonSuffix">(${{{saveButtonSuffix}}})</span></button>-->


          <div style="clear: both;"></div>


          <div ng-if="mandatory.length" class="alert alert-danger" style="margin-top: .5em">


              <span ng-if="mandatory.length > 0">${Required information: } </span>


              <span ng-repeat="f in mandatory" class="label label-danger" style="margin-right: .5em; display: inline-block;">{{f.label}}</span>


          </div>


      </div>




My Client Controller includes the following. Is it possible to add the code you suggested inside my already in use function (please see in bold)?



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



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



$timeout(function(){



  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(){


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


  //sessionStorage.message = 'Demand Updated.';


var c = this;


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



            $scope.errorOnSubmit = function(){


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


            } ;


  })


  }else{


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


  location.reload();


  })


  }


  }


  },0)


   




Finally, the Server Script includes the following code:



(function($sp, input, data, options, gs) {




    var m = data.msgs = {};


  m.errorMsg = gs.getMessage("Demand Updated");


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


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



Any workaround?




Thanks in advance.




Fábio Gonçalves


Ivano B
ServiceNow Employee
ServiceNow Employee

Hi   Fabio



I would suggest to put some alert around in order to understand if the errorOnSubmit function is reached.


I would also suggest to put outside the $timeout(function() { ... }); the errorOnSubmit



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


var c = this;


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


$scope.errorOnSubmit = function(){


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


} ;



$timeout(function(){


      ...your code here....


});



});



Other thing you can try is to check if ng-mousedown is conflicting.


Let me know if there is any improvement



Cheers


R0b0


Hi r0b0_d3vil,



I added some alerts and the errorOnSubmit function is in fact reached.
I checked and the ng-mousedown is not confliting.



The problem was (and still is) the fact that I redirect the user to the previous page after pressing each button on the form and since the error message is exhibited still in the form page, it is "masked" when the page is redirected to the previous one. That is why I would really hoping to find a way to add the errorOnSubmit function inside my function and only after the user is redirected to the previous page, so that the error message is exhibited only then.



Additionaly, as you can imagine I have more than the simply the "Update" button, and for each specific button I would like to set a different error message. Unfortunately, with this approach to add the 'name="error" ng-click="errorOnSubmit()"'   on my HTML, that uses the 'ng-repeat="action in getUIActions('button')"'


in a single button element to pull multiple UI Actions, it will exhibit always the same message.


Do you understand this requirement?




Thanks in advance.




Fábio Gonçalves


Hi r0b0_d3vil,



I managed to get the background color and text color of my 'sessionStorage.message' customized by changing the Service Portal page specific CSS.


So now I can send a fully customized message.




Thank you so much for your guidance with this issue.




Best regards,



Fábio Gonçalves