How to use the service portal "data" object in a HTML <script> tag

Micael Marinho1 · ‎01-29-2020

Hi guys

I am implementing the google maps API on the portal, however to call it, it is necessary to place the code inside a <script> tag in HTML instead of using the common client script. The problem is that I need to pull information from tables in the servicenow to put on the map, so ideally I would be able to access the data object, from the <script> tag. I tried to use UI script with GlideAjax and the client's GlideRecord, but this type of call just doesn't work from the service portal.

Can someone help me?

I thank you for your attention, have a good day !!!

Community Alums · ‎01-29-2020

If you are coding inside a widget this will be a useful reference for you.

https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/c_...

It shows you examples of how the data object gets passed from Server to Client, which you should then be able to access inside your <script> tag.

Micael Marinho1 · ‎01-29-2020

when I pass the "data" object inside the <script> tag the browser console displays the following error:

"data is not defined at eval"

when I pass the "c" object inside the <script> tag the browser console displays the following error:

"c is not defined at eval"

Community Alums · ‎01-29-2020

Please share your code so we can assist debugging.

Micael Marinho1 · ‎01-29-2020

<div>
  <h2 style="text-align: center;">Projetos em execução</h2>
    <div id="map"></div>
    <script>
      console.log("test: " + data.server);
      function initMap(){
      // Map options
      var options = {
        zoom:11,
        center:{lat:-12.9704,lng:-38.5124}
      }
			
      // New map
      var map = new google.maps.Map(document.getElementById('map'), options);

      // Listen for click on map
      google.maps.event.addListener(map, 'click', function(event){
        // Add marker
        addMarker({coords:event.latLng});
      });
      
      // Array of markers
      var markers = [
        {
          coords:{lat:-12.9704,lng:-38.5124},
          iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
          content:'<h3>Projeto 1</h3><h5>Infraestrutura Social </h5>'
        },
        {
          coords:{lat:-12.894,lng:-38.3279},
          iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
          content:'<h3>Projeto 2</h3><h5>Mobilidade Urbana</h5>'
        },
        {
          coords:{lat:-12.9056952,lng:-38.3991471},
          iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
          content:'<h3>Projeto 3</h3><h5>Agronegócio</h5>'
        }
      ];

      // Loop through markers
      for(var i = 0;i < markers.length;i++){
        // Add marker
        addMarker(markers[i]);
      }

      // Add Marker Function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props.coords,
          map:map
          //icon:props.iconImage
        });

        // Check for customicon
        if(props.iconImage){
          // Set icon image
          marker.setIcon(props.iconImage);
        }

        // Check content
        if(props.content){
          var infoWindow = new google.maps.InfoWindow({
            content:props.content
          });

          marker.addListener('click', function(){
            infoWindow.open(map, marker);
          });
        }
      }
    }
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap" async defer></script>
</div>

//Server script
data.server = "test";