docCustomization: Foundations
download 
Report Transcription
Customization: Foundations
Customization:
Foundations
Trainer Name
Trainer/Consultant
PowerSchool University
2012
Agenda
• Languages of PowerSchool Customization
• Custom Page Manager
• HTML
• CSS
• JavaScript
• PowerSchool Codes
• Object and Page Templates - Quick Look
The “Cost” of Modifying
PowerSchool Pages
Considerations
•
How will product updates affect
the modified page?
•
How much effort is required to recustomize the page?
•
Will customizations interfere with
the functions on the page?
Languages of
PowerSchool
Customization
Customizing PowerSchool
• HTML
• Cascading Style Sheets (CSS)
• JavaScript
• PowerSchool Codes
And
don
’t fo
rget
SQL
!
Viewing the Code
<!DOCTYPE html>
<html>
<head>
<title>~[text:psx.html.guardian.home.grades_and_attendance_]</title>
~[wc:guardian_header_yui]
~[SetPostValue:selectedTab=GradesAndAttendance]
~[if.prefschool.sgshowpa=1]~[SetPostValue:showSGFGradebook=false][else]~
[SetPostValue:showSGFGradebook=true][/if.prefschool.sgshowpa=1]
~[brij_render:common-ps;:GuardianHomeTabs]
<h1>~[text:psx.html.guardian.home.grades_and_attendance] ~(studentname)</
h1>!
<!-- start student content -->
<div id="quickLookup">
~[if.prefschool.sgshowpa=1]
[else]
[/if.prefschool.sgshowpa=1]
~[SetPostValue:skipDontPrintFilter=1]
~[if#G.isguardian]
! ~[if.pref.ATT_QuickLookupHide-100=1]
! !
~[SetPostValue:att_quicklookuphide_t=1]
! [else]
! !
~[SetPostValue:att_quicklookuphide_t=]
! [/if.pref.ATT_QuickLookupHide-100=1]
[else#G]
HyperText Markup Language (HTML)
<html>
<head>
<title>Window Title Here</title>
Scripts, styles and other preface info here
</head>
<body>
Page Content Here
</body>
</html>
Cascading Style Sheets (CSS)
Selector
Declaration
body{color: #333333;}
Property
Value
JavaScript
<script type="text/javascript">
function reloadPage()
{
window.location.reload()
}
</script>
PowerSchool Code
Tag
Type
Function
~[wc:commonscripts]
Wildcard
Inserts into a page common
JavaScript files needed by
PowerSchool pages
~[wc:admin_header_css]
Wildcard
Inserts into a page the CSS
that builds the header for
PowerSchool admin pages
~[submitbutton]
Function
Inserts the code needed for a
submit button
~[x:userid]
X code
Returns the current user’s ID
~[text:psx.html.admin.
home.browse_students]
Text tag
(localization)
Text tag on the Admin/Home
page (Browse Students)
~([01]lastfirst)
Field tag
Inserts the name of the
current student (Last, First)
JavaScript
HTML
CSS
PS Code
More
Interactive
Proprietary
Commands
Structure
Page Style
CSS
JavaScript
More
Interactive
PS Code
Proprietary
Commands
HTML
Structure
Page Style
Custom Page Manager
Custom Page Manager
Custom Page Manager
Custom Page Manager
Now It’s
Your Turn
Complete hands-on
activity 1:
Your First
PowerSchool Page
More About HTML Tag, You’re It!
Common HTML Tags
<h1></h1> through <h6></h6>
<p></p>
<div></div>
<span></span>
<ul></ul>, <ol></ol>
<li></li>
<br />
<a></a>
<img
Common HTML Tags
<input type="text" name="[01]first_name" value=""
size="25" maxlength="50" id="firstName">
<input type="checkbox" name="[01]family_rep" value="1">
<input class="psDateWidget" type="date" name="[01]dob"
size="11" value="" id="[01]dob" />
<textarea name="[01]Alert_Medical" rows="4" cols="40">
</textarea>
Common HTML Tags
<input type="radio" name="[01]FedEthnicity" value="1">Yes
<input type="radio" name="[01]FedEthnicity" value="0">No
<input type="radio" name="[01]FedEthnicity"
value="2">Decline
<select name="[01]gender">
<option value=""></option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
HTML Tables
<table>
<thead>
<tr>
<th>Column 1 Head</th>
<th>Column 2 Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Column 1 Data</td>
<td>Row 1 Column 2 Data</td>
</tr>
</tbody>
</table>
Now It’s
Your Turn
Complete hands-on
activity 2:
Add Some Tags
CSS - Make It Stylish
Why Are Styles Important?
• Make better pages
• Update quicker - just like PowerSchool is doing
• Get ready to use JavaScript
What Is Style?
• Styles define fonts, color, weights, and more
• Style is defined in the HTML page, in a style sheet, or in the
browser
Style Definitions
1. Inline style - Defined inline with the HTML
2. Internal style - Defined inside the page, usually in the <head>
3. External style - Defined externally in a style sheet
4. Browser default - Default settings in the browser
Inline Style
Inline style is used to define the formatting for single line of
HTML. This takes precedence over all other styles.
Example:
<p style="font-size:35px">My text</p>
Internal Style
Internal style is defined in the <head> of the html document and
applies to any style that is not defined inline.
Example:
<STYLE type=”text/css”>
H1 {font-size:21px;}
</STYLE>
External Style
External style is defined outside of the HTML document, in a
separate file and applies to any style that is not defined inline or
internally.
Example:
<link href=”/images/css/screen.css rel=”stylesheet”>
Browser Default
The last style is the browser default. When no other styles are
defined, then the settings that are defined in the browser are
applied.
Cascading Explained
body
Color
Size
Weight
#333333
14px
Normal
p
BG Color
Inherit
bold
Bold
matrix_7
SteelBlue
<body>
<p class=”bold matrix_7>My Text</p>
</body>
My Text
Defining Style
CSS syntax has two parts:
• Selector - HTML element being defined
• Declaration(s) - Each made up of:
- Property - the attribute you wish to change
- Value - the value you are setting the attribute to
(always followed by a semicolon)
Example:
body {color:#333333;}
Multiple Styles
To define multiple declarations for a single selector, all elements
are inside the curly {} brackets separated by a semicolon (;)
Example:
p {
color:#333333;
text-align:center;
font-family:”Arial Narrow”;
}
Class Selectors
• Include a period “.” in the name
• Define multiple classes for a single element
• May include an element before the “.” or it may be omitted,
which indicates it applies to all elements
Class Selectors Examples
CSS h1.black{color: #000000;}
h1.blue {color: #000080;}
HTML <h1 class=”black”>
This is black text.
</h1>
<h1 class=”blue”>
This is blue text.
</h1>
This is black text.
This is blue text.
Class Selectors Examples
CSS h1.bold{font-weight:bold;}
h1.blue {color: #000080;}
HTML <h1 class=”bold blue”>
This is bold blue text.
</h1>
This is bold blue text.
Class Selectors Examples
CSS .body {font-size: 10px;}
HTML <p class=”body”>
This text is 10px.
</p>
<h1 class=”body”>
This text is 10px.
</h1>
Now It’s
Your Turn
Complete hands-on
activity 3:
Add some style
JavaScript More Than Ordering Coffee
What is JavaScript?
• Scripting Language
• Adds interactivity to a page
• PowerSchool uses the jQuery library for many features
• To learn more, sign up for JavaScript: Foundations
Now It’s
Your Turn
Complete hands-on
activity 4:
Pour Some JavaScript In
PowerSchool Codes Give Me Data!
Using PowerSchool Codes on Pages
• Field Information
• Functions and X codes
• Wildcards
• Text
Now It’s
Your Turn
Complete hands-on
activities 5 and 6:
Add a Wildcard
Modify a Student Page
Object and Page
Templates
Built-in Page Templates
Built-in Object Templates
Time
for
Review
Question 1
What type of code is used to change
complete pages of formatting?
A
HTML
B
PowerSchool Code
C
JavaScript
D
CSS
Answer 1
What type of code is used to change
complete pages of formatting?
A
HTML
B
PowerSchool Code
C
JavaScript
D
CSS
Question 2
What color are custom folders and pages?
Answer 2
What color are custom folders and pages?
Blue
Matching Questions
A CSS
1 Proprietary Commands
B PS Code
2 More Interactive
C
3 Page Style
HTML
D JavaScript
4 Page Structure
Matching Answers
A CSS
1 Proprietary Commands
B PS Code
2 More Interactive
C
3 Page Style
HTML
D JavaScript
4 Page Structure
Question and Answer
Don’t Forget!!
Navigate to
http://powerschooluniversity.com
and tell us what you think!
Copyright © 2012 Pearson Education, Inc., or its affiliates. All rights reserved.
Copy from Student Home Phone
