Category Archives: Quick & easy PowerSchool customizations

Summary/count of logged in users by type

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.

Did I ever mentioned to you that I love statistics? Probably not. I’m really fascinated with grouping, ordering and analyzing raw data and I can’t be the only one out there. That’s why, when I look to the Current Users page (home.html found in /admin/logins) I get all sorts of ideas.

For example, I wanted to know how many parents and students were logged in to our system after the release of the Report Cards or the Online Forms on our Parent Portal. So I asked myself: why not, rather than having to eye-ball through the whole table/list on the page (that could reach up to 300 entries on some occasions), have a one-line summary at the top, listing the totals by type/category?

Summary of logged in users by type/category

Summary of logged in users by type/category

And here is what I answered back:

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).

  1. Open the file in a text editor and locate the closing head tag (</head>).
  2. The entire customization is based on JavaScript/jQuery code, so just before the </head> tag add a pair of script tags (<script></script>). All the code to follow on this page will be placed in between those <script> tags.
  3. Let’s define our variables first.
    //get the text in all first columns from each row with the exception of the first one and remove the “.” at the end
    var totalUsers = $j(“table tbody tr:last”).find(“td:eq(0)”).text().slice(0,-1);
    //a 2-dimensional array that containing the category/type name and the respective default total value (zero)
    var typeRows = [[“Faculty”,0],[“Teacher”,0],[“Parent”,0],[“Student”,0]];
    //the string (holding the summary) that will be added after the default text at the top (within the H1 tag)
    var myString = “”;
    //total number of defined/identified entries
    var totalIdentified = 0;
    //total number of non-defined/non-identified entries
    var totalOthers = 0;
    //get all second columns from each row with the exception of the first one
    var myTDs = $j(“table tbody tr:gt(0)”).find(“td:eq(1)”);
  4. Inside the “on document ready” jQuery function $j(document).ready(function() { …… } (if there isn’t one, add it) add the following piece of code:
    //iterating through the text in all second columns from each row with the exception of the first one
    myTDs.each(function(){
      for (var i = 0; i < typeRows.length; i++){
          //check if there is a match
        if ($j(this).text() == typeRows[i][0]){
            //no of matches for that particular type/category is incremented
            typeRows[i][1]++;
            //total no of matches is incremented
            totalIdentified++;
        }
      }
    });
    //start building the string that will be displayed at the top
    for (var i = 0; i < typeRows.length; i++){
        if (typeRows[i][1] > 0) myString += typeRows[i][1] + ” ” + typeRows[i][0] + “, “;
    }
    //get all “others” (no match found for them)
    totalOthers = totalUsers – totalIdentified;
    //if there really are “others” (value > 0) put their number at the and of the string
    if (totalOthers > 0) myString += totalOthers + ” others”;
    //if not, leave the string as it is (removing the two characters – “,” and the ” ” – at the end)
    else myString = myString.slice(0,-2);
    //add the total number of users at the beginning of the string
    myString = totalUsers + ” users (” + myString + “)”;
    //add the string above to the text that is already found in the H1 tag
    $j(“h1”).html($j(“h1”).html() + “&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;” + myString);

Not too complicated, is it?

Show/hide characters in password fiels on the “Access Accounts” student page

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 a pair of (preferably square and less or about 32×32 pixels) images – one for the “show password” state and the other for the “hide password” state).

About two years ago the secretaries at my school asked me how they could check students’ passwords in case a student shows up in their office complaining about not being able to log in to PowerSchool. They also wanted to quickly find out the students’ Access ID and Access Password codes the parents were asking them all the time when they wanted to add a kid to their parent accounts.
Oh, don’t worry, they didn’t want to handle any massive spreadsheet or go through the process of exporting based on a template (done for the whole division, most probably). No, they wanted a way to see the data on a student page, just like any other piece of demographic data. What, another custom page just for that? Really?!?!

Well, my secretaries’ requests, combined with my natural aversion towards creating unnecessary files in my already clogged web_root folder, gave me the idea of reusing a page that’s “already there” – the Access Accounts student page. I was pretty sure that by slightly transforming (enriching would be a better word) the this page (accessaccounts.html found in the /admin/students folder) I’ll be able to help them out but still keeping the mess at a (historical) minimum. 😉
OK, so let’s see if I succeeded or not, shall we?

Starting from this:

Student Access Accounts page (password fields detail) - before

Student Access Accounts page (password fields detail) – before

I want to get something like this:

Student Access Accounts page (password fields detail) - after

Student Access Accounts page (password fields detail) – after

I’ll start from the assumption that you already have a copy of the needed file (accessaccounts.html in /admin/students ) in your PowerSchool customization folder.

  1. Open the file in a text editor and locate the closing head tag (</head>).
  2. The customization is based on JavaScript/jQuery code but has some CSS added to it too. We’ll start with the latter first.
  3. Add the following piece of CSS code just above you </head> tag.
    <style>
    /* for the image to be placed next to the password fields */
    img.imgLock{
        /* set the image to the desired size */
        width: 16px;
        height: 16px;
        /* no border */
        border: 0px;
        vertical-align: text-top;
        /* make the hand cursor show when hovering over the image (to emulate a link) */
        cursor:pointer;
        cursor:hand;
    }
    </style>
  4. 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.
  5. After the entire page has loaded in the browser show a lock image next to any password field (there are only two) that is not empty. Upon clicking on the image show/hide the characters inside the password field next to it.
    $j(document).ready(function(){
    //define the student password and student access password fields (as HTML Objects)
        var studPass = $j(“input[type=password]:first”);
        var studAccPass = $j(“input[type=password]:last”);
        //define the image files used when showing and hiding the passwords
        var imgShow = “accessacountsopen.png”;
        var imgHide = “accessacountslock.png”;
        //if the student password is not blank add the lock image next to the password field
        if (studPass.val() != “”) studPass.after(” <img src='” + imgShow + “‘ class=’imgLock’ title=’Show ” + studPass.parent().prev().text() + “‘ /></a>”);
        //if the student access password is not blank add the lock image next to the access password field
        if (studAccPass.val() != “”) studAccPass.after(” <img src='” + imgShow + “‘ class=’imgLock’ title=’Show ” + studAccPass.parent().prev().text() + “‘ /></a>”);
        //fire function upon clicking on the lock image
        $j(“.imgLock”).on(“click”,function(){
            //get the password field (as HTML Object)
            var fieldObj = $j(this).prev();
            //check what image is currently displayed
            //if current image is “open”
            if ($j(this).attr(“src”) == imgShow){
                //change image to “locked”
                $j(this).attr(“src”,imgHide);
                //change the title of the image to say “hide … password”
                $j(this).attr(“title”,”Hide ” + $j(this).parent().prev().text());
                //check the name attribute of the password field (to check whether it is the Student or the Access Password)
                //if this is the Student Password field
                if (fieldObj[0] == studPass[0]){
                    //change type to TEXT
                    fieldObj.attr(“type”,”text”);
                    //set the value to “Student_Web_Password” (PS tag)
                    fieldObj.val(“~(Student_Web_Password)”);
                }
                //if not then this must be the Guradian Web Password field
                //just change type to TEXT
                else fieldObj.attr(“type”,”text”);
            }
            //if current image is “locked”
            else{
                //change image to “open”
                $j(this).attr(“src”,imgShow);
                //change the title of the image to say “show … password”
                $j(this).attr(“title”,”Show ” + $j(this).parent().prev().text());
                //check the name attribute of the password field (to check whether it is the Student or the Access Password)
                //if Student Password
                if (fieldObj.attr(“name”) == studPass.attr(“name”)){
                    //change type back to PASSWORD
                    fieldObj.attr(“type”,”password”);
                    //set the value back to “*****”
                    fieldObj.val(“*****”);
                }
                //if Guradian Web Password
                //just change type to back to PASSSWORD
                else fieldObj.attr(“type”,”password”);
            }
        });
    });

How did I do?