PowerSchool Parent Portal Printable UnOfficial Transcripts :) Using some DATs

Submitted by melinda on Wed, 12/04/2019 - 12:24

Project Description: Allow parents to print out their student's unofficial transcript from the parent portal. Included a forced "Unofficial" watermark that the browser is forced to print.

What I used: DATs, CSS, HTML and Javascript.

The Code

<!DOCTYPE html>
<html>
<head>
    <style>
 

#bg-text
{
    color:lightgrey;
    opacity: 0.1;
    font-size:120px;
    transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
}
    
    
        #printDiv:before {
    position: absolute;
    content: '';
    background:  url(location of the image you wish to use for the background) center center;
    opacity: .1;
     width: 100%;
    height: 100%;
    pointer-events: none;
   
}    

    </style>
<title>Unofficial Student Transcript</title>
~[wc:guardian_header]
<script language="javascript">
function formHandler(form){
 var URL = document.navigation.storecode.options[document.navigation.storecode.selectedIndex].value;
 window.location.href = URL;
 } 
</script>
<body>
     
<div id="printDiv">
     <div id="background">
  <p id="bg-text">Unofficial</p>
    </div>
    
  <div class="print-but">  <button onclick="myFunction()">Print Unofficial Transcript</button></div>

<!-- title -->
<div style="background-color:white;color:black; width: 600px; float: left;">
    <p style="width: 45%; float: left; padding:20px 0 20px 30px; font-size: 1.5em;font-weight: 900;">
        Unofficial Transcript for: ~(studentname)<br>
DOB: ~(dob;dateformat=MMMM D, YYYY)<br>
Grade: ~(grade_level)<br>
</p>

<table border="0" cellspacing="0" cellpadding="4" align="center" width="100%">
<tr bgcolor="#f6f6f6">~[x:transcript]
<td class="bold">Year/Term</td>
<td class="bold">Grd Lvl</td>
<td class="bold">Course</td>
<td class="bold">Earned Credit</td>
<td class="bold">[storecode]</td>
</tr>
<tr bgcolor="#fff">
<td>~(abbryearterm)</td>
<td align="center">~(grade_level)</td>
<td>~(course_name)</td>
<td align="center">[totalearnedcredit]</td>
<td>[lettergrade]</td>
</tr>
</table>
</div>
    <div style="margin-left: 620px; padding-left: 30px">
        <div>
<img src="Locations of your schools logo" alt=" Logo" width="80"
         height="80" align="left" padding-right: 10px;>~(Schoolname)<br>
         I hard coded the schools street.<br>
         I hard coded the city, state and zip<br>
         I hard coded the phone number</div>

 

   
        <h2>Credited Hours</h2>

         <br>
         09 Crs: ~(*credit_hours;09)<br>
         10 Crs: ~(*credit_hours;10)<br>
         11 Crs: ~(*credit_hours;11)<br>
         12 Crs: ~(*credit_hours;12)<br>
         Total Crs: ~(*credit_hours)<br>
    <h2>GPA Summary</h2>

    <br>Simple GPA: ~(*gpa method="Simple")<br>
    Weighted GPA: ~(*gpa method="Weighted")
<br>
~(*class_rank_out_of;gpa) <br>
In the top ~(*gpa.percent)%
</div>

</div>

<script>
function myFunction() {
  window.print();
}
</script>
</body>

 

The Output