Remember to always back up your data before making any changes to it.
Always try out your customizations on a test server first, NOT the live one.
The following customization was tested in PowerSchool 7.11.1, so it might not work in the newer versions.
The following customization was not tested in Internet Explorer.
For this customization you will also need an icon/image (preferably square and less or about 16×16 pixels) for the map pin to be placed after the IP address.
Here’s customization I did just to play around a little with Google Maps API.
The code you’re about to go through in a moment displays a map pin next to every public IP address found in the big table on the Current Users page. Using a free service like http://freegeoip.net we will, by supplying their page with a public IP address, retrieve all sorts of info on that particular IP address (like the latitude and longitude, city, region and country).
Display map pin next to every public IP address on the Current Users page
Upon clicking on the map pin we will pass the geographical coordinates (lat and long) to the Google Maps service and have it draw us a map centered on the coordinates above. Furthermore, we will tell Google Maps to have a small info window displaying the location’s details popping up from the said center of the map. Last but not least we will instruct the page to hide the map when we close the info window or when we click the map pin a second time (toggle).
Display map below the map pin when clicked
Let’s start by editing home.html file in /admin/logins (I assume that you already have a copy of it in your PowerSchool customization folder).
- Open the file in a text editor and locate the closing head tag (</head>).
- The customization is based on JavaScript/jQuery code but has some CSS added to it too. We’ll start with the latter first.
- Add the following piece of CSS code just above you </head> tag.
<style>
/* the map pin image */
img.myMapPin{
/* set the size */
width: 16px;
height: 16px;
/* no border */
border: 0px;
/* make it look like a link when hovered */
cursor: pointer;
cursor: hand;
}
/* the div that will hold the GMap instance */
div.GMapDiv{
position:absolute;
/* by default the div is not displayed */
display:none;
/* set the size */
width:340px;
height:240px;
/* slightly rounded grey border */
border:2px solid #CCCCCC;
border-radius:10px;
}
</style>
- Still inside the <head> tag and just below the closing </style> tag add the link to the Google API.
<script src=”http://maps.googleapis.com/maps/api/js”>
</script> - Just between the ending </style> and </head> tags add a pair of script tags (<script></script>). All the code to follow on this page will be placed in between those <script> tags.
- Define the function that initializes the Google Map instance and drop a pin on the point identified by “latit” and “longit” and add an info window with text “infoText”.
function initialize(latit,longit,myDiv,infoText){
//set the center of the map to the point identified by “latit” and “longit”
var myCenter = new google.maps.LatLng(latit,longit);
//map’s properties
var mapProp = {
center:myCenter, //center the map on “myCenter”
zoom:8, //zoom level
disableDefaultUI:true, //don’t show any controls
mapTypeId:google.maps.MapTypeId.ROADMAP //map type
};
//creates the new instance of the map
var map = new google.maps.Map(myDiv[0],mapProp);
//define a pin (marker) in the center of the map
var marker = new google.maps.Marker({
position:myCenter,
});
//put the pin on the map
marker.setMap(map);
//create a (GMap pop-up) window dispalying “infoText”
var infowindow = new google.maps.InfoWindow({
content:infoText
});
//make the window created above pop up from the marker itself (i.e. the center of the map) infowindow.open(map,marker);
//define what should happen in the event of clicking the close button (the “X”) on the pop-up (info) window
google.maps.event.addListener(infowindow, ‘closeclick’, function() {
//hide the layer that’s holding the map (hides the map too)
myDiv.hide();
});
} - Define the function that will show the Google Map right underneath the corresponding pin image.
function onClickGMapLink(latit,longit,myIPelem,infoText){
//listen for the event of clicking on the pin image
myIPelem.find(“img[class=’myMapPin’]”).on(‘click’, function(){
//position the div in relation to the position of the pin image
$j(this).next().css({
left: $j(this).position().left + Math.round(($j(this).outerWidth(false) – $j(this).next().outerWidth(false))/2),
top: $j(this).position().top + $j(this).outerHeight(false)
}).toggle();
//initialize the map
initialize(latit,longit,$j(this).next(),infoText);
});
} - Define the function that adds an image next to the public IP addresses and a (hidden) div to hold the Google Map.
function setGMapLink(latit,longit,city,region,country,myIPelem){
if (city != “”) city += “, “; //if “city” is not blank add a comma after it
if (region != “”) region += “, “; //if “region” is not blank add a comma after it
var infoText = city + region + country; //build the text that will be displayed in the pop-up window
infoText = infoText.replace(” “,” ”);
//after each IP address add an image (to display in case of public addresses) and a div (to hold the map)
myIPelem.append(” <img src=’map.png’ class=’myMapPin’ /><div class=’GMapDiv’></div>”);
//set the title of the image to display the coordinates
myIPelem.find(“img[class=’myMapPin’]”).prop(“title”,”(” + latit + “,” + longit + “)”);
//wait for the image next to the IP address to be clicked
onClickGMapLink(latit,longit,myIPelem,infoText);
} - Define the function that will get the details on the IP address from the free web service.
function getIPdetails(myIPelem){
//send a request to freegeoip.net for an IP address and get the results back in JSON format
$j.get(“http://freegeoip.net/json/” + myIPelem.text(), function(data){
//display the pin images next to the public IP addresses in the table setGMapLink(data.latitude,data.longitude,data.city,data.region_name,data.country_code,myIPelem);
});
} - Inside the “on document ready” jQuery function $j(document).ready(function() { …… } (if there isn’t one, add it) add the following piece of code:
//get all the 7th cells found on every row but the first one (table headers)
var myIPelem = $j(“table tbody tr:gt(0)”).find(“td:eq(6)”);
//for each and every one of them
myIPelem.each(function(){
//if the IP address is a public one
if (!/(^127\.)|(^192\.168\.)|(^10\.)|(^172\.1[6-9]\.)|(^172\.2[0-9]\.)|(^172\.3[0-1]\.)|(^::1$j)/.test($j(this).text()))
//get and display the details gathered from the IP address
getIPdetails($j(this));
Quite fun, isn’t it? And quite reliable too.
PS Help 911 