Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Get vaule from field to ui macro

Goran WitchDoc
ServiceNow Employee
ServiceNow Employee

Im doing a small UI macro. On change we want to have some extra text at the top of the change form. And depending on its a comprehensive or emergency change, we want different colors and text.

I got this to work if I declare the variable of type manually, but I can't figure out how to write so the macro fetches the "type" from the current ticket. I tried alot of combo but right now Im stuck in a dead end.

Here is my UI Macro which I then call on with a formatter into the change form.

I though that like 08 would work, but I guess I was wrong. and If I instead use line 07 and comment out 08 it works like a charm, but sadly not so dynamic.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:evaluate>

      var colors;

      var text;

              //var test = 'comprehensive';

              var test = current.type;

      if (test == 'comprehensive')

              {

              colors = '#FFFF99';

              text = "This is a Normal Change";

              }

      else if (test == 'emergency')

              {

              colors = '#FF8282';

              text = "This is an Emergency Change";

              }

</g:evaluate>

<style>

.infotext_change {

      margin: auto;

      width: 48%;

      padding: 3px;

      background-color: ${colors};

      border: 2px solid #668cff;

      text-align: center;

}

</style>

<div class="infotext_change">

${text}

</div>

</j:jelly>

1 ACCEPTED SOLUTION

For some reason it didnt want to show my code 😃



<html>


<style>  


.infotext_change {  


      margin: auto;  


      width: 48%;  


      padding: 3px;  


      border: 2px solid #000000;  


      text-align: center;  


}  


</style>  


<div class="infotext_change" id='info_change'>    


</div>




<script>


  function updateChangeInfo(changeType)


  {


  var getDiv = document.getElementById('info_change');


  if (changeType == 'Comprehensive')  


              {  


              getDiv.style.backgroundColor = '#FFFF99';  


              getDiv.innerHTML   = "This is a Normal Change";  


              }  


      else if (changeType == 'Emergency')  


              {  


              getDiv.style.backgroundColor = '#FF8282';  


              getDiv.innerHTML   = "This is an Emergency Change";  


              }


  }


</script>



  <script>


  addLoadEvent( function() {


  updateChangeInfo(g_form.getValue('type'));


  });


  </script>


</html>


View solution in original post

6 REPLIES 6

HV1
Mega Guru

Instead of 'Current',   try to access the field with Glide Form object:


g_form.getValue('type');



Regards,


Hardik Vora


Goran WitchDoc
ServiceNow Employee
ServiceNow Employee

Sorry, g_form.getValue didnt work there.


Kalaiarasan Pus
Giga Sage

New macro



<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">




<style>  


.infotext_change {  


      margin: auto;  


      width: 48%;  


      padding: 3px;  


      background-color: ${colors};  


      border: 2px solid #668cff;  


      text-align: center;  


}  


</style>  


<div class="infotext_change" id='info_change'>    


</div>




<script>


  function updateChangeInfo(changeType)


  {


  var getDiv = document.getElementById('info_change');


  if (changeType == 'Comprehensive')  


              {  


              getDiv.style.color = '#FFFF99';  


              getDiv.innerHTML   = "This is a Normal Change";  


              }  


      else if (changeType == 'Emergency')  


              {  


              getDiv.style.color = '#FF8282';  


              getDiv.innerHTML   = "This is an Emergency Change";  


              }


  }


</script>



  <script>


  addLoadEvent( function() {


  updateChangeInfo(g_form.getValue('type'));


  });


  </script>


</j:jelly>



For making it work on change as well, add the below function call to the onchange client script of 'type' field



updateChangeInfo(g_form.getValue('type'));


Thanks kalai,



I just tweaked your code abit. changed it from color to background and then I also realized that I didn't need to do this as a macro but I could throw it inside a html-annotation instead. So I removed the jelly stuff as well. Guess I was so into making it as jelly since I just started to learn about it 😃



This is what I putted inside my annotation.



<html>


<style>  


.infotext_change {  


      margin: auto;  


      width: 48%;  


      padding: 3px;  


      border: 2px solid #000000;  


      text-align: center;  


}  


</style>  


<div class="infotext_change" id='info_change'>    


</div>




<script>


  function updateChangeInfo(changeType)


  {


  var getDiv = document.getElementById('info_change');


  if (changeType == 'Comprehensive')  


              {  


              getDiv.style.backgroundColor = '#FFFF99';  


              getDiv.innerHTML   = "This is a Normal Change";  


              }  


      else if (changeType == 'Emergency')  


              {  


              getDiv.style.backgroundColor = '#FF8282';  


              getDiv.innerHTML   = "This is an Emergency Change";  


              }


  }


</script>



  <script>


  addLoadEvent( function() {


  updateChangeInfo(g_form.getValue('type'));


  });


  </script>


</html>