Customizations 501:

PowerSchool Customizations Academy

Trainer Name
Trainer/Consultant

PowerSchool University
2014

Warning

PowerSchool Academy is intended for advanced PowerSchool

users with solid customization skills including HTML, CSS, and
JavaScript (jQuery). The pace of the class will also be faster than
other customization courses.
If you are not comfortable with any of these topics, and you have
not taken the self assessment, please take a few minutes to take
the self assessment to make sure you are ready for this course.
You may take the self assessment here:

Objectives
Learn how to plan large projects that involve many tables and
custom screens to avoid pitfalls
Learn how to create advanced database extensions with oneto-one, one-to-many, and standalone tables
Learn how to use tlist_child and tlist_standalone to create a
user interface for adding, deleting, and modifying records
See how page fragments can improve scalability and reusability
of customizations
Use jQuery to insert data into pages
Create a plugin to take home

Custom Fields - A
Little History

Legacy Custom Fields

Legacy Custom fields are created inside a Character Large Object
(CLOB). When data is stored this way, it:
Is harder to access
Cannot be obtained through direct SQL
Impacts performance
In addition, legacy custom fields had other issues:
Datatypes not defined
One-to-many records not supported

Database Extensions Benefits

Supports one-to-one, one-to-many. and standalone tables
Allows fields to have defined datatypes
Can be based on most existing tables
Allows direct access to tables and fields from SQL
Improves performance
Includes enhanced customization features

Database
Extensions

Types of Database Extensions

One-to-One Table Extensions

Can only have a single one-to-one table per extension group
Must have a maximum of one record in the child table for each
record in the parent table
Are most similar to legacy custom fields

One-to-One Field

Students

Room

dcid
student_number
Last_name
First_name

dcid
room_number
Name
Department

Students_Demographics

Students_ID_Numbers

Room_Equipment

studentsdcid
Shoe Size
Shirt Size
Backpack Color

studentsdcid
District ID
Library Card Number
Selective Ser vice Number

roomdcid
Desks
Screen
Projector

10

One-to-Many Table Extensions

Can have multiple one-to-many tables per extension group
Each child table can have zero or more records for each record
in the parent table
Similar to tables such as Stored_Grades, CC,
Special_Programs, Sections

11

One-to-Many Table (Child)

For a given child table, one row in the parent table is related to
zero or more rows in the child table
Similar tables Stored_Grades, CC, Special_Programs, Sections
Students

Courses

dcid
student_number
Last_name
First_name

dcid
Course_number
Course_name
Credit_Hours

AthleticAwards

AcademicAwards

Courses_Textbooks

studentsdcid
Award_Name
Date_Given

studentsdcid
Award_Name
Date_Given

AthleticTeams

AcademicTeams

coursesdcid
Title
Author
Publisher
Copyright
Version

studentsdcid
Team
Year

studentsdcid
Team
Year

12

Standalone Table Extensions

Can have multiple standalone tables per extension group
No database level relation to any other table
Asset Management, Values for fields in other tables

13

Standalone Table (Independent)

No database-level relationship to any PowerSchool table
Useful for tracking assets
Useful for creating user-manageable lists

14

Laptops

Textbooks

dcid
ID_Tag
Brand
Model
Serial_Number
OS
RAM
HDD

dcid
Title
Author
Publisher
Copyright
Version

LaptopOS
dcid
Name
Company
Version

Standalone Table (Independent)

No database-level relationship to any PowerSchool table
Useful for tracking assets
Useful for creating user-manageable lists

Textbooks

Laptops
dcid
ID_Tag
Brand
Model
Serial_Number
OS
RAM
HDD

15

dcid
Title
Author
Publisher
Copyright
Version

Courses
LaptopOS
dcid
Name
Company
Version

dcid
Course_number
Course_name
Credit_Hours

Students

Students_Laptops

Courses_Textbooks

dcid
student_number
Last_name
First_name

studentsdcid
Laptopsdcid

coursesdcid
textbooksdcid

Extension Groups
Groups are structural
One-to-one table must be first table created
There can be only a single one-to-one table in any group
Many one-to-many and standalone tables are allowed

16

Grouping Tables into Extension Groups

Determine what makes logical sense for the circumstance
Athletics

Academics

Students
dcid
student_number
Last_name
First_name

17

AthleticAwards

AcademicAwards

studentsdcid
Award_Name
Date_Given

studentsdcid
Award_Name
Date_Given

AthleticTeams

AcademicTeams

studentsdcid
Team
Year

studentsdcid
Team
Year

Grouping Tables into Extension Groups

Determine what makes logical sense for the circumstance
Awards
Students
dcid
student_number
Last_name
First_name

AthleticAwards

AcademicAwards

studentsdcid
Award_Name
Date_Given

studentsdcid
Award_Name
Date_Given

Teams

18

AthleticTeams

AcademicTeams

studentsdcid
Team
Year

studentsdcid
Team
Year

Grouping Tables into Extension Groups

Determine what makes logical sense for the circumstance
Extra-curricular
Students
dcid
student_number
Last_name
First_name

AthleticAwards

AcademicAwards

studentsdcid
Award_Name
Date_Given

studentsdcid
Award_Name
Date_Given

AthleticTeams

AcademicTeams

studentsdcid
Team
Year

studentsdcid
Team
Year
Students_Demographics
studentsdcid
Shoe Size
Shirt Size
Backpack Color

19

Datatypes
String
Integer
Date
Double
Boolean
CLOB (Character Large Object)
BLOB (Binary Large Object)

20

A Small, Healthy
Dose of Database
Design Concepts

21

Database Design

Build It Right!

22

Basic Design Concepts

Start on paper
Create a naming standard
Create on a test server
Test, test, test
Only install when correct
Cant delete, so get it right

23

Basic Design Concepts

Dont duplicate data, link to it
Standalone tables = consistent data
Read a database design book

24

Using Database
Extensions in
Page Customization

25

Including One-to-One fields in Custom Pages

Similar to including core fields or legacy custom fields
Minor Difference the table designation
- No more table numbers
- Use PrimaryTable.ExtensionGroupName

[PrimaryTable.ExtensionGroupName]Field_Name

26

Including One-To-Many Tables in Custom Pages

A brand new function: tlist_child
Will auto-generate an HTML table to display rows of records
from the designated child table
Includes an Add button and Delete buttons for each row that
has been created
~[tlist_child:
<CoreTableName>.<ExtensionGroup>.<ExtensionTable>;
displaycols:<List of Fields>;
fieldNames:<List of Column Headers>;
type:<FormatName>]

27

Including Standalone Tables in Custom Pages

A brand new function: tlist_standalone
Will auto-generate an HTML table to display rows of records
from the designated independent table
Includes an Add button and Delete buttons for each row that
has been created
~[tlist_standalone:
<ExtensionGroup>.<ExtensionTable>;
displaycols:<List of Fields>;
fieldNames:<List of Column Headers>;
type:<FormatName>]

28

Improving the Usability

of Tlist_child and
Tlist_standalone

29

Improving the Usability of Tlist_child and

Tlist_standalone

Date fields PS Date Picker

Boolean fields check box
All others input boxes, approximately 20 characters wide
Other input types can be defined
Needs a JavaScript file and some basic scripting

30

Menu
Insert JavaScript call in head

~[wc:commonscripts]
<script language="JavaScript" src="/scripts/
tlistCustomization.js" type="text/javascript"></script> "
Directly after the tlist_ function, add a script that defines the
options, and then links the list of options to a specific field

<script type="text/javascript">
var ValName = [];
ValName.push(['','Select a Value']);
ValName.push(['Value 1','Label 1']);
ValName.push(['Value 2','Label 2']);
tlistText2DropDown('Field_Name',ValName);
</script>

31

Radio Buttons
Insert JavaScript call in head

~[wc:commonscripts]
<script language="JavaScript" src="/scripts/
tlistCustomization.js" type="text/javascript"></script> "
Directly after the tlist_ function, add a script that defines the
options, and then links the list of options to a specific field

<script type="text/javascript">
var ValName = {};
ValName.push(['F','Female']);
ValName.push(['M','Male']);
tlistText2RadioButton('Field_Name',ValName);
</script>

32

Text Area
Insert JavaScript call in head

~[wc:commonscripts]
<script language="JavaScript" src="/scripts/
tlistCustomization.js" type="text/javascript"></script> "
Directly after the tlist_ function, add a script that defines the
options, and then links the list of options to a specific field

<script type="text/javascript">
tlistText2TextArea('Field_Name',Rows,Columns);
</script>

33

Static/Read-Only Text
Insert JavaScript call in head

~[wc:commonscripts]
<script language="JavaScript" src="/scripts/
tlistCustomization.js" type="text/javascript"></script> "
Directly after the tlist_ function, add a script that defines the
options, and then links the list of options to a specific field

<script type="text/javascript">
tlistText2StaticText('Field_Name');
</script>

34

Multiple Formats in One Table

Multiple formats in one script
Must have unique variable names

<script type="text/javascript">
var ValName1 = [];
ValName1.push(['','Select a Value']);
ValName1.push(['Value 1','Label 1']);
ValName1.push(['Value 2','Label 2']);
tlistText2DropDown('Field_Name',ValName1);
var ValName2 = {};
ValName2.push(['F','Female']);
ValName2.push(['M','Male']);
tlistText2RadioButton('Field_Name',ValName2);
tlistText2TextArea('Field_Name3',Rows,Columns);
</script>
35

Creating Values for a Drop-down Menu

Use tlist_sql to create menu values
Query any table Stock, Standalone, etc.
Stock tables made just for this: States, CountryISOCodeLU,
LanguageISOCodeLU

<script type="text/javascript">
var StateValues = [];
StateValues.push(['','Select a Value']);
~[tlist_sql;
SELECT state
FROM states
WHERE country = USA'
ORDER BY state]
StateValues.push([~(state),~(state)]);
[/tlist_sql]
tlistText2DropDown('State',StateValues);
</script>
36

Adjusting Widths of Input Boxes

CSS is the key
Each input box has a class equal to its field name
In HTML, input box size can be controlled with size=
In CSS, use width and define it in pixels (px)

<style>
.Zip {width:55px;}
.Phone {width:140px;}
.StartDate {width:90px;}
.EndDate {width:90px;}
</style>

37

Insertion Points

38

Insertion Points and Page Fragments

Used to customize existing pages in PowerSchool
Code is kept in separate file from page being customized
New code is inserted into existing page
Multiple insertion points exist
PowerSchool still allows for page customization, insertion
points are just another option

39

Insertion Points and Page Fragments

PowerSchool Page
<html>!
<head>!
<title> This is my page</title>!
</head>!
<body>!
<div>!
<p>Some Information</p>!
</div>
INSERTION POINT HERE
<body>!
</html>

40

Page Fragment
Insert

<div>!
<p>This is some inserted code<p>!
</div>

Why Use Insertion Points

The code is in a separate file and the page is not actually
customized, page updates will be seen after upgrades
They can be packaged into a plugin and easily installed on
other servers
Multiple insertion points can be used on a single page, allowing
for separation of customizations

41

Insertion Points Where Are They

admin_header_css.txt The standard admin portal header
for unframed pages
admin_header_frame_css.txt The standard admin portal
header
admin_footer_css.txt The standard admin portal footer for
unframed pages
admin_footer_frame_css.txt The standard admin portal
footer

42

Insertion Points Where Are They

teachers_nav_css.txt PowerTeacher portal left navigation
frame
guardian_footer_yui.txt The standard parent/student
portal footer
/admin/students/more2.html Admin portal left
navigation frame for student pages
/admin/faculty/more2.html Admin portal left navigation
frame for staff pages

43

admin_footer_css.txt
" " <div id="cust-contentfooter">~[cust.insertion_point:content.footer]</div>"
" " <div id="legend" style="display:none;">"
" " " <h3>~[text:psx.txt.wildcards.admin_footer_css.legend]</h3>"
" " " <p
id="validationIcons"><strong>~[text:psx.txt.wildcards.admin_footer_c
ss.page_icons] </strong></p>"
" " </div>"
" " </div><!--end content-main-->"
" </div><!--end content-->"
</div><!--end container-->"

!
<div id="master-drawer-content-div">"
~[pluginnavlinks:admin.drawer]"
</div>" "

!
<div id="footer">"
" ~[wc:report_issue]"
" ~[wc:legal_copyright]"
</div>"

!
~[wc:ux_analytics]
44

admin_footer_css.txt
" " <div id="cust-contentfooter">~[cust.insertion_point:content.footer]</div>"
" " <div id="legend" style="display:none;">"
" " " <h3>~[text:psx.txt.wildcards.admin_footer_css.legend]</h3>"
" " " <p
id="validationIcons"><strong>~[text:psx.txt.wildcards.admin_footer_c
ss.page_icons] </strong></p>"
" " </div>"
" " </div><!--end content-main-->"
This will be referred to
" </div><!--end content-->"
as content.footer
</div><!--end container-->"

!
<div id="master-drawer-content-div">"
~[pluginnavlinks:admin.drawer]"
</div>" "

!
<div id="footer">"
" ~[wc:report_issue]"
" ~[wc:legal_copyright]"
</div>"

!
~[wc:ux_analytics]
45

Page Fragments

Small snippets of code

Not intended as a standalone page
Code will be inserted into an existing PowerSchool page
Filename determines where it will be inserted
Generally mixed content (HTML, CSS, JavaScript)

46

Standard Insertion Points

content.header Right below the School and Term selection

content.footer Near the bottom of the page, above the
copyright bar in the content area
leftnav.footer Right below the left navigation but above any
PowerSource or Mobile App content

47

Standard Insertion Points

page.header The last line in the wildcard commonscripts.txt

report.tabs After the last </li>, before the </ul> in the
report tabs
student.alert After the ~[studentalert] tag in the file
title_student_end_css.txt

48

Special Note

On the Visual Scheduler and Seating Chart pages, the

content.footer will be hidden and unsupported

49

Inserting a Page Fragment

Page Fragments are inserted in the same fashion wildcards are
inserted
Filename of the page fragment will determine what file the
fragment is inserted into as well as the location in the file
Page fragments can be inserted into a page one of two ways:
- URL based The fragment is inserted into a single page
- Wildcard based The fragment will be rendered in every
page the wildcard is used on

50

URL-Based Insertion

Add emergency phone numbers

51

URL-Based Insertion
home.html rendered code

<div class="box-round">"
"

<h2>Whats New</h2>"

" <p>See whats new in the latest feature release of

PowerSchool. <a href="/admin/whatsnew/
currentreleaseoverview.html">Read more...</a></p>"
</div>" "
"

"

<div id="cust-content-footer"></div>"

"

"

<div id="legend" style="display:none;">"

"

"

"

<h3>Legend</h3>
Add emergency phone numbers

52

URL-Based Insertion
<div class=box-round>"
"

<table>"

"

"

<tr>"

"

"

"

"

"

</tr>"

"

"

<tr>"

"

"

"

<td> Police- 384-554-3876</td>"

"

"

"

<td>Fire - 384-554-2954</td>"

"

"

</tr>"

"

</table>"

<td>Emergency Phone Number</td>"

</div>

Filename: home.emergPhone.content.footer.txt
53

URL-Based Insertion
home.Emergency_Numbers.content.footer.txt

Page to apply fragment to

with no .html
Fragment name
Insertion point

54

Now Its
Your Turn

Complete hands-on
activity 1:
!
Creating a Page
Fragment

55

Wildcard Page Fragments

Inserted into a wildcard
Included on all pages the wildcard is used on
Must be in the wildcard folder
Naming convention is the same

56

Wildcard-Based Insertion
admin_footer_css.myInsert.content.footer.txt

Wildcard to apply fragment

to, with no .txt
Fragment name
Insertion point

57

Now Its
Your Turn

Complete hands-on
activity 2:
!
Creating a Wildcard
Page Fragment

58

Creating Custom Insertion Points

You can create a custom insertion point on any page
It will function like built-in PowerSchool insertion points
You must define a name for the insertion point to be used in the
page fragment name
Once you create an insertion point, the page will be customized

59

Creating Custom Insertion Points

~[cust.insertion_point:POINTNAME;DEFAULT_CONTENT]

Creates the insertion

point
Name used to reference
the insertion point
Default content
(usually blank)

60

Creating Custom Insertion Points

<tr>"
<td
class="bold">~[text:psx.html.admin_students.generaldemographics.
student_number]</td>"
<td><input type="text" id="fieldStuNum"
name="[01]student_number" value="" size="13"></td>"
</tr>
<!-- Start insert state specific section information -->"
~[cust.insertion_point:table.end]
~[x:insertfile;state/
demographics~[displaypref:districtstate].html]"
<!-- End insert state specific section information -->"
</table>

61

URL-Based Insertion
generaldemographics.myInsert.table.end.txt

This will insert the content into the insertion point that was
created on the previous slide

62

Now Its
Your Turn

Complete hands-on
activity 3:
!
Creating a Custom
Insertion Point

63

jQuery Selectors

64

jQuery Selectors
What if the content footer is not where you want your
new content?

65

jQuery Selectors
With jQuery, you can use not only IDs, but also CSS and element
types to select objects in the DOM.
Here are some examples:

66

$j(#someId)

Selects the element with an ID

of someId

$j(.someClass)

Selects the element with a class

of someClass

$j(p)

Selects all <p> elements

$j(tr:first)

Selects the first <tr> element

$j(tr:last)

Selects the last <tr> element

jQuery Selectors
With jQuery, you can use not only IDs, but also CSS and element
types to select objects in the DOM.
Here are some examples:

67

$j(#someId > p)

Selects all <p> elements that

are a child of the element with
an ID someId

$j(div tr)

All <tr> elements that are a

descendant of a <div> element

$j(#someId).closest(tr)

Travels up the DOM from the

element with ID someId to the
nearest <tr> element

jQuery Selectors
With jQuery methods, you can interact with the elements you
have selected.
Here are some examples:

68

.children()

Get the children of the selected

element

.next()

Get the immediately following

sibling of the selected element

.html()

Get the HTML contents of the

selected element

.val()

Get the current value of the

selected element

.append()

Insert content to the end of the

selected element

jQuery Selectors

69

jQuery Selectors
Displays information about the
object you are inspecting.

70

jQuery Selectors
http://api.jquery.com/category/selectors/

71

jQuery Selectors
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

72

Quick Code
Use jQuery selectors to return the value of the DOB
field from the un-framed Demographics page.
var myVal = $j('#fieldDOB').val();"
console.log(myVal);

73

Quick Code
Use jQuery selectors to return the HTML of the <td>
tag that contains the DOB field from the unframed
Demographics page.
var myVal=$j('#fieldDOB').parent().html();"
console.log(myVal);

74

Quick Code
Use jQuery selectors to return the value of the title of
the DOB field from the unframed Demographics page.
var myVal=$j('#fieldDOB').parent().prev('td').text();"
console.log(myVal);

75

Quick Code
Use jQuery selectors to change the title of the DOB
field to Date of Birth on the unframed Demographics
page.
$j('#fieldDOB').parent().prev('td').text('Date of Birth');

76

Quick Code
Use jQuery selectors to add a new table row after DOB
with a title and input for Country of Birth on the
unframed Demographics page.
var insertThis='<tr><td class="bold">Country of
Birth</td><td><input type="text" size="30" value=""
name="[01]birthcountry"</td></tr>';"
$j('#fieldDOB').closest('tr').after(insertThis);"

77

Now Its
Your Turn

Complete hands-on
activity 4:
!
Appending a Custom
Insertion Point

78

Creating and
Installing Plugins

79

PowerSchool Plugins
Plugins are used to combine all necessary files into a single
zipped file
The zipped file also contains a plugin definition
Plugins can be transferred to other servers very easily
Plugins are first installed on the server
Once installed, plugins can be enabled or disabled

80

Creating a Plugin
/admin/customization/CreatePackagePage.action

81

Acceptable File Types

Database extension definition
XML files
Custom pages
Page fragments
Page fragment meta files
Image files (GIF, PNG, JPEG, JPG) or PDF files (PDF)
CSS files
JavaScript files
Other web directory artifacts

82

Installing a Plugin

System > System Settings > Plugin Management Configuration

83

Important Notes
If database extensions are included, the PowerSchool and
ReportWorks services must be restarted for the extension(s) to
be created
If any of the asset files already exist on the server, the install
will fail (to avoid overwriting files)
When a plugin is disabled, all custom pages and insertion
points from that plugin will no longer be available
Deleting a plugin will delete all assets from the server but will
not remove data or database extensions
Plugins are disabled when customizations is turned off

84

Key Points from Todays Class

Database extensions Remember to plan and test thoroughly

One-to-One Table Extensions Add a new data element to a
parent table
One-to-Many Tables Create a child table that is designated
to a parent table
Standalone Tables Create a table that is not directly related
to another table

85

Key Points from Todays Class

Page Fragments are small snippets of code to be inserted into
insertion points
Insertion points are part of PowerSchool core, but may also
be created
Page Fragments are inserted into files based on the filename
of the fragment
jQuery makes insertion points much more flexible
Plugins allow for customizations to be packaged into a single
file for installation on other servers

86

Question and Answer

87

Dont Forget!!
!

Navigate to
http://powerschooluniversity.com
and tell us what you think!

Copyright 2014 Pearson Education, Inc., or its affiliates. All rights reserved.