Professional Documents
Culture Documents
Custom 501 Pre So
Custom 501 Pre So
Trainer Name
Trainer/Consultant
PowerSchool University
2014
Warning
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
Database
Extensions
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
11
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
13
14
Laptops
Textbooks
dcid
ID_Tag
Brand
Model
Serial_Number
OS
RAM
HDD
dcid
Title
Author
Publisher
Copyright
Version
LaptopOS
dcid
Name
Company
Version
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
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
AthleticAwards
AcademicAwards
studentsdcid
Award_Name
Date_Given
studentsdcid
Award_Name
Date_Given
Teams
18
AthleticTeams
AcademicTeams
studentsdcid
Team
Year
studentsdcid
Team
Year
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
23
24
Using Database
Extensions in
Page Customization
25
[PrimaryTable.ExtensionGroupName]Field_Name
26
27
28
29
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
<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
<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
<style>
.Zip {width:55px;}
.Phone {width:140px;}
.StartDate {width:90px;}
.EndDate {width:90px;}
</style>
37
Insertion Points
38
39
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>
41
42
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
46
47
48
Special Note
49
50
URL-Based Insertion
URL-Based Insertion
home.html rendered code
<div class="box-round">"
"
<h2>Whats New</h2>"
"
<div id="cust-content-footer"></div>"
"
"
"
"
"
<h3>Legend</h3>
Add emergency phone numbers
52
URL-Based Insertion
<div class=box-round>"
"
<table>"
"
"
<tr>"
"
"
"
"
"
</tr>"
"
"
<tr>"
"
"
"
"
"
"
<td>Fire - 384-554-2954</td>"
"
"
</tr>"
"
</table>"
</div>
Filename: home.emergPhone.content.footer.txt
53
URL-Based Insertion
home.Emergency_Numbers.content.footer.txt
54
Now Its
Your Turn
Complete hands-on
activity 1:
!
Creating a Page
Fragment
55
56
Wildcard-Based Insertion
admin_footer_css.myInsert.content.footer.txt
57
Now Its
Your Turn
Complete hands-on
activity 2:
!
Creating a Wildcard
Page Fragment
58
59
60
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)
$j(.someClass)
$j(p)
$j(tr:first)
$j(tr:last)
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)
$j(div tr)
$j(#someId).closest(tr)
jQuery Selectors
With jQuery methods, you can interact with the elements you
have selected.
Here are some examples:
68
.children()
.next()
.html()
.val()
.append()
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
82
Installing a Plugin
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
85
86
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.