PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help:...
Transcript of PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help:...
![Page 1: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/1.jpg)
PowerSchool Customization#2 - Coding Basics
HTML, CSS, LTK, PSHTML and Tools
![Page 2: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/2.jpg)
About the Trainer● Roger Sprik
Technology [email protected]
● Valley Christian SchoolsSouthern California
● 1200+ students Preschool - 12PowerSchool since 2003
![Page 3: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/3.jpg)
Localization (LTK = Language Translation Toolkit)
English -> SpanishFather -> Padre
English -> EnglishFather -> Parent 1
![Page 4: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/4.jpg)
LTK Documentation
● search the built-in help: "Localization" or "Translation"● PowerSource KB 74801 (v9)● The Administrator User Guide combines many guides into
one large document. (over 2,700 pages!!!)○ v11 https://support.powerschool.com/article/79085 (Page 894)○ v12 https://support.powerschool.com/article/80644 (Page 856)
![Page 5: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/5.jpg)
Enabling Page Translation and Security
● Enable Individual Page Translation○ System – Page and Data Management – Localize
PowerSchool – Settings tab
● Group Security○ Enable the Language Translator checkbox○ Some issues with using roles, stick with Group
Security
![Page 6: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/6.jpg)
Translating in PowerTeacher & Parent/Student Portal
● Teachers portal○ login with a teacher account with appropriate group
security
● Parent/Student Portal○ add /public/home.html?translator=true
○ Must have a parent account AND admin account with translator permissions to do this
![Page 7: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/7.jpg)
Translating Parent/Student Portal/public/home.html?translator=true
Admin accountusername;password
Must have a parent account
![Page 8: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/8.jpg)
![Page 9: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/9.jpg)
![Page 10: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/10.jpg)
![Page 11: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/11.jpg)
![Page 12: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/12.jpg)
Enter the alternate text. Preserve any html, spacing, parameters, etc.
Use Search to easier find text, or sort the columns
Submit to save changes
![Page 13: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/13.jpg)
Translation Hints:
finds instances of this exact default text that have been translated before, and gives you the option to choose them.
Copy and Add:copies a translation to all the other rows in the grid with the same default text
![Page 14: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/14.jpg)
Leaving or changing to blank will revert to default text
![Page 15: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/15.jpg)
Useful English Translations
● Admin Home○ Browse Parents -> Browse Parent Accounts○ Staff -> Employees
● Student left menu○ Family -> Siblings○ Cumulative Info -> GPA/Credit Info
● PK3/PK4 Grade Level labels on Start Page○ must translate in both Text AND Data areas
● Parent/Student Portal○ Parent Portal Account Creation labels/text○ Class Registration -> Course Requests
● Silliness!
![Page 16: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/16.jpg)
Customization Tools
![Page 17: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/17.jpg)
Before version 12.1Start>PS Administrator>Custom Pages● Separate portal requiring separate account
12.1 and laterStart>System>Page and Data Management>Custom Page Management● Within admin portal, no separate account required.● Must setup permissions
NOT a folder! CPM stores custom pages in the database and there is a web interface for working with them.
CPM(Custom Page Management)
CPM
![Page 18: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/18.jpg)
CPM
● "What's New in PowerSchool 12.1" on PowerSource at https://support.powerschool.com/exchange/view.action?download.id=958
● Presented on the PowerSchool Insider Episode 54
The "What's New in PowerSchool 12.1" presentation has screenshots of how to enable the new CPM
![Page 19: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/19.jpg)
![Page 20: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/20.jpg)
![Page 21: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/21.jpg)
![Page 22: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/22.jpg)
![Page 23: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/23.jpg)
OLD
![Page 24: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/24.jpg)
![Page 25: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/25.jpg)
![Page 26: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/26.jpg)
![Page 27: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/27.jpg)
![Page 28: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/28.jpg)
![Page 29: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/29.jpg)
![Page 30: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/30.jpg)
![Page 31: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/31.jpg)
![Page 32: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/32.jpg)
![Page 33: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/33.jpg)
![Page 34: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/34.jpg)
![Page 35: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/35.jpg)
![Page 36: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/36.jpg)
![Page 37: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/37.jpg)
CPM AlternativeA great alternative CPM editor created by a power user:"Blue Steel CPM"(Exchange ID 749)- Upload multiple files- Search for files- Filter by plugin names
![Page 38: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/38.jpg)
Dissecting a PowerSchool Page
Special Page extensions
.htmlrRender the page in the browser but do not process special PowerSchool tags.
.htmlt View the unrendered (server-side) page code in the browser window
Right-click (Windows) or Control-click (Mac) on a PowerSchool page and choose "Inspect" or "View Page Source" to see the rendered (client-side) code.
Tip: Student pages are in "frames". To use these special extensions right-click (ctrl-click) on the link to them and "Open link in new tab"
![Page 39: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/39.jpg)
Additional Tools
A proper text editor
● Notepad++ for Windows - https://notepad-plus-plus.org/
● BBEdit for Mac - https://www.barebones.com/products/bbedit/
![Page 40: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/40.jpg)
Learning Resources
● CPM and Blue Steel CPM have PS templates● W3Schools
○ https://www.w3schools.com/● UI Examples - PowerSchool's UI Demo Page
○ /admin/ui_examples/home.html● HTML - CSS - JS: The Client-Side Of The Web
○ https://html-css-js.com/● PowerSchool HTML/CSS/JS Fiddle
○ https://jsfiddle.net/aplarsen/vtunbs8s/● Inspect PowerSchool pages (view source or "inspect")
![Page 41: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/41.jpg)
More Reference
● PSHTML Developer site https://support.powerschool.com/developer/
● Eric Schaitel's Customization Documentationhttps://support.powerschool.com/exchange/view.action?download.id=772
● The PowerSchool User Community○ PowerSource Forum: https://support.powerschool.com/forums/main.action○ PSUG Group: https://groups.io/g/PSUG
![Page 42: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/42.jpg)
Shared Customizations● PSUG California
○ https://www.psugcal.org/
● PowerDataSolutions○ https://powerdatasolutions.org/
● PowerSource Exchange○ https://support.powerschool.com/exchange/main.action
● Aurora Educational Technology○ https://auroraedtech.com/
● Marcia Brenner Associates○ https://mba-link.com/
![Page 43: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/43.jpg)
The Languages of Customization
HTML CSS
JavaScript/JQuery
PSHTML
SQL Angular
![Page 44: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/44.jpg)
HTML
![Page 45: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/45.jpg)
What is HTML?
● HyperText Markup Language● Developed in 1990s● Used to create elements that will be
interpreted visually by a web browser
![Page 46: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/46.jpg)
W3C StandardsMost browsers generally comply with the World Wide Web Consortium(W3C standards)
?Source: https://en.wikipedia.org/wiki/Browser_wars
![Page 47: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/47.jpg)
Browser Market Share
Source: https://en.wikipedia.org/wiki/Browser_wars
![Page 48: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/48.jpg)
Basic HTML Page
● The DOCTYPE declaration defines the document type● The text between <html> and </html> describes the web
document● The text between <head> and </head> contains meta-data
about the file as well as links to external resources● The text between <body> and </body> describes the visible
page content
![Page 49: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/49.jpg)
HTML TagsHTML tags are keywords (tag names) surrounded by angle brackets:<tagname>Content</tagname>
● HTML tags normally come in pairs like <p> and </p>● Self-closing or standalone tags have no closing tags
(<br/> <hr/> <img/>)● The first tag in a pair is the opening tag, the second
tag is the closing tag● The closing tag is written like the opening tag, but with
a slash before the tag name
![Page 50: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/50.jpg)
HTML Attributes
● Attributes provide additional information about an element
● Attributes are always specified in the start tag● Attributes come in name/value pairs like: name="value"● Tags may have multiple attributes
![Page 51: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/51.jpg)
HTML Attributes
id and class are common
● id is used by Javascript to uniquely identify an element to add functionality. No two elements should ever have the same id in one document
● The class attribute is mostly used to apply a CSS style. It can also be used by JavaScript to identify a group of elements. Many elements can share the same class.
![Page 52: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/52.jpg)
Heading TagsDefine headings with the <h1> to <h6> tags
![Page 53: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/53.jpg)
Paragraph and line break tags
● Define paragraphs with the <p> tag. Each paragraph element will typically be followed by a double-space.
● Define single line breaks with the <br> tag. It's one of the tags that doesn't need an end tag.
![Page 54: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/54.jpg)
Paragraph and line break tags
<h1>My Heading</h1><p>My first paragraph.I can have line breaks in the code but they will be ignored. There will be extra lines before and after the paragraph.</p><p>This is a new paragraph.<br>It has manual line breaks.<br>The new lines are "single-spaced".</p>
![Page 55: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/55.jpg)
Text formatting
● <b> or <strong>: Bolds text● <i> or <em>: Italicizes text
Note: These tags are "deprecated", which means you're really supposed to use CSS styles to comply with modern standards, but these "old school" text formatting tags are still pretty common.
![Page 56: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/56.jpg)
Links
Links are defined with the <a> ("Anchor") tag
![Page 57: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/57.jpg)
ImagesImages are defined with the <img> tag
Attributes● src - Relative path to image file.● alt - Specifies alternate text if image cannot be
displayed.● width - width in pixels● height - height in pixels
Only the src attribute is required.
Note: The image file must exist independently of the page in the location specified
![Page 58: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/58.jpg)
Comments
Use <!-- and --> to insert comments in HTML.
Comments are not displayed by the browser, but they can help document your HTML.
![Page 59: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/59.jpg)
Unordered Lists (Usually "bullets")
Start an unordered list with the <ul> tag. Each list item starts with the <li> tag
![Page 60: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/60.jpg)
Ordered Lists (Usually "numbers")
Start an ordered list with the <ol> tag. Each list item starts with the <li> tag
![Page 61: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/61.jpg)
2 types of elements: Block vs Inline
BLOCK
Start and end with a new line
Examples:
● <h1>● <p>● <ul>● <table>● <div>
INLINE
Usually displayed without line breaks
Examples:
● <b>● <td>● <a>● <img>
![Page 62: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/62.jpg)
![Page 63: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/63.jpg)
The <div> element
● The <div> element is a block level element that can be used as a container for other elements.
● The <div> element has no special meaning. It has no required attributes, but style and class are common.
● Because it is a block level element, the browser will display line breaks before and after it.
● When used together with CSS, the <div> element can be used to style blocks of content.
![Page 64: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/64.jpg)
A common use of <div> in PowerSchool
<!-- start of content and bounding box --><div class="box-round"> more code inside here</div>
![Page 65: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/65.jpg)
The <span> element
● The <span> element is an inline element that can be used as a container for text.
● The <span> element has no special meaning. It has no required attributes, but style and class are common.
● Unlike <div>, the <span> element does not generate a line break.
● When used together with CSS, the <span> element can be used to style parts of the text
![Page 66: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/66.jpg)
The <span> element
![Page 67: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/67.jpg)
CSSCascading Style Sheets
![Page 68: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/68.jpg)
Cascading Style Sheets (CSS)Styles define how to display HTML elements
● Styles are achieved by defining CSS declarations.● There are two parts to a CSS declaration:
○ Property - Identifies which feature will be styled○ Value - Describes how the feature will be styled
● Separate the two parts with a colon {color:red}
![Page 69: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/69.jpg)
CSS Declaration blocks
Declaration Blocks consist of multiple declarations contained within curly braces. Each declaration is separated by a semicolon.
![Page 70: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/70.jpg)
Where does CSS go?
● External stylesheets<link href="/images/css/screen.css" rel="stylesheet">
● Embedded in the <head> tag<style>p {font-size:12px;}</style>
● Inline<p style=“font-size:12px;”>Paragraph text</p>
* There are complex rules for which styling wins out. Google “CSS Specificity.”
![Page 71: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/71.jpg)
How does CSS know what to style?
● An inline style only applies to the element itself
● Otherwise HTML elements are matched through selectors○ * matches all tags○ p matches all paragraph <p> tags○ div matches all <div> tags○ .classname matches all elements with that class○ Combinations: div.box-round
will only match <div> tags that have class="box-round"
![Page 72: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/72.jpg)
CSS Selector Examples
h1 { font-size:180%; font-weight:bold; margin:25px 20px; line-height:1.5em}
.intro { background-color: yellow;}
Matches all <h1> elements
<h1>This is my header</h1>
Matches all elements with a class of "intro"
<div class="intro">This div will have a yellow background.</div>
![Page 73: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/73.jpg)
Embedded vs External● If you embed CSS in a page in the <head> area, it will
only apply to that page.
● External styles are written in a separate document and can be linked to multiple HTML documents. This is a great way to achieve consistency across an entire website
![Page 74: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/74.jpg)
CSS Beginner Tip
● See the Documentation Reference Plugin or W3Schools for more on CSS.
● CSS can be very daunting for the beginner.● Start by applying the CSS classes already
available in PowerSchool.○ Using existing PS CSS is good advice even for more
advanced users. It keeps your customizations looking like other PS screens, and consistency is good for your users.
![Page 75: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/75.jpg)
Using PowerSchool CSS styling
The default style sheet is referenced on existing pages and can be referenced in custom pages as follows.
![Page 76: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/76.jpg)
Using PowerSchool CSS styling
![Page 77: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/77.jpg)
<body><div id="container">
<div id="usercontext-bar" role="banner">Breadcrumbs</div><div id="content">
<div id="nav-main"><div id="nav-main" role="navigation">
<h3>Functions</h3></div>
</div><div id="content-main">
<h1>Page Name</h1><div class="box-round">
<h2>Box Header</h2><p>Content</p>
</div></div>
</div></div>
</body>
![Page 79: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/79.jpg)
Tables
![Page 80: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/80.jpg)
Tables
● Best and worst part of HTML● Should NOT be used for
layout of page sections○ This used to be the preferred way
of design…in the late 1990s
● CSS has rendered this obsolete● DO use <table> to display tabular data
![Page 81: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/81.jpg)
![Page 82: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/82.jpg)
Tables
● <table></table> defines a table● <tr></tr> defines a table row● <td></td> defines a table datum (cell)● <th></th> defines a table header (cell)
Works mostly the same as a <td>, but applies styling to make the headers stand out
● <thead>, <tbody>, and <tfoot> can be used to group content, but are not necessary
![Page 83: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/83.jpg)
Table styles in PowerSchool
See the UI examples or the Customization Reference plugin for how to style different types of tables in PowerSchool.
● UI Examples/admin/ui_examples/home.html
● Customization Reference Pluginhttps://support.powerschool.com/exchange/view.action?download.id=772
![Page 84: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/84.jpg)
<table class="linkDescList">
Automatic zebra striping!
![Page 85: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/85.jpg)
<table class="grid">
Gridlines!
![Page 86: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/86.jpg)
<table class="tableToGrid">
Sortable columns!
![Page 87: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/87.jpg)
<table class="linkDescList" data-pstablefilter="">
Lets users narrow down the table
![Page 88: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/88.jpg)
Forms
![Page 89: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/89.jpg)
Forms Intro
● Take inputs from users● Send content to a receiving page● Receiving page acts on content and displays
a result○ PowerSchool does all of the action on the back end.○ Receiving pages only need to display result
![Page 90: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/90.jpg)
Form Template<form action="/admin/changesrecorded.white.html" method="POST">
<table><tr>
<td>Input Label</td><td>
<input type="text" name="[students]first_name" value="" /></td>
</tr></table><div class="button-row">
<input type="hidden" name="ac" value="prim">~[submitbutton]
</div></form>
![Page 91: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/91.jpg)
Form Template<form action="/admin/changesrecorded.white.html" method="POST">
action
The page that will receive the form content and be displayed when the form is submitted
![Page 92: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/92.jpg)
Form Template<form action="/admin/changesrecorded.white.html" method="POST">
method
● GET○ Default○ Converts all form variables into querystring and submits to address
bar○ Limited in amount of content it can hold
● POST○ Puts all variables into body and sends to receiving page○ Much higher limit in amount of data
![Page 93: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/93.jpg)
Input Names
Each form input should have a name attribute<select name=“grade”>
<option selected value=“”>select a grade…</option><option value=“9”>Freshman</option><option value=“10”>Sophomore</option><option value=“11”>Junior</option><option value=“12”>Senior</option>
</select>
Selecting “Sophomore” and submitting the form via GET would take the browser to:
receiving_page.html?grade=10
![Page 94: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/94.jpg)
Form Inputs - Name<input type="text" name="[students]first_name" value="" />
If you want the input to save to the database….
Form inputs for core fields:<input type="text" name="[Table_Name]Field_Name" value=""/>
● Text Inputs - value="" is required to ensure that the current value will be retrieved from the database to display for existing records
● Checkboxes - use value="1" for boolean (true/false) fields
Form inputs for database extension fields (one-to-one)<input type="text" name="[PrimaryTable.ExtensionGroupName]Field_Name" value=""/>
![Page 95: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/95.jpg)
Input Types
● <input type="text">: one-line text box● <input type="password">: one-line text box that hides content● <input type="checkbox">: on/off seletion● <input type="radio">: like a checkbox, but only one can be selected● <input type="button">: button that can have an action when clicked● <input type="submit">: button that submits form
○ ~[submitbutton] is PowerSchool shortcut● <input type="hidden">: displays nothing, passes parameter● <select></select>: drop-down box
○ <option></option>: each line in a drop-down box● <textarea></textarea>: Multi-line text box
![Page 96: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/96.jpg)
AC values <div class="button-row"><input type="hidden" name="ac" value="prim">~[submitbutton]
</div>
PowerSchool forms must have an action (ac) value to successfully modify data. The required action depends on the portal being customized.
![Page 97: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/97.jpg)
Role of FRN = "File Reference Number" FRNs are used to indicate to PowerSchool the current record which must be accessed from the database.
addresses.html?frn=0014321
Database
Table: 001DCID: 4321
![Page 98: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/98.jpg)
FRN and RN● ~(frn) is the PS HTML tag used to retrieve or set the
current record.● ~(rn) is the PS HTML tag used to retrieve the current
unique id (dcid).● FRNs are often found in HTML links.
The above link will navigate the user to the demographics page and retrieve data for a student in the database with a dcid of 332.
● Once on this page, the use of the ~(frn) tag would result in a return of the value 001332.
● The use of the ~(rn) tag would result in a return of the value 332.
![Page 99: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/99.jpg)
Using submitted values
The receiving page can use the values sent with the form
● PowerSchool tag: ~(gpv.parameter_name)○ “Get Parameter Value”○ A parameter is something that is passed from one
page/function/procedure/program to another○ Works with both GET and POST
● Example:○ Code: <p>You selected grade: ~(gpv.grade)</p>○ Output: You selected grade: 10
● GPV can be used to display a selection, search the database, or decide page control logic
![Page 100: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/100.jpg)
Sending values in links
Values can also be sent to the receiving page via links.
● Parameters passed via the URL are visible in a page's address. They are listed following the page name, preceded by a question mark, and separated by ampersands.
myPsServer/admin/somePage.html?gender=F&grade_level=12
If the above were the current address of a page in PowerSchool, the parameters could be accessed as follows.~(gpv.gender) Result=F~(gpv.grade_level) Result=12
![Page 101: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/101.jpg)
Example of sending a gpv to a custom report
<form action="gradelevelroster2.html" method="GET"><table class="linkDescList"> <tr> <th>Option</th> <th>Value</th> </tr> <tr> <td>Grade Level</td> <td> <select name="grade_level"> <option value=""><option value="-2">PK3<option value="-1">PK4<option value="0">K<option>1<option>2<option>3<option>4<option>5<option>6<option>7<option>8<option>9<option>10<option>11<option>12 </select> </td> </tr> </table><div class="button-row">~[submitbutton]</div></form>
![Page 102: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/102.jpg)
Example of receiving a gpv in a custom report (grade_level=3)
<table> <tr><th>Grade</th><th>Last</th><th>First</th></tr> ~[tlist_sql; select grade_level, last_name, first_name from students where ~(curschoolid) in (0, schoolid) and enroll_status = 0 and grade_level = ~(gpv.grade_level) order by lastfirst ;] <tr> <td>~(grade_level)</td> <td>~(last_name)</td> <td>~(first_name)</td> </tr> [/tlist_sql]</table>
https://.../gradelevelroster2.html?grade_level=3&btnSubmit=
![Page 103: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/103.jpg)
PSHTML
![Page 104: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/104.jpg)
PSHTML
● PowerSchool's special brand of HTML.● Add special codes and commands to interact with your
server and data.● Begin with a tilde character (~) and contain commands
enclosed in parenthesis or square brackets.○ ~(curyearid)○ ~[x:username]
● Prior to delivering content to a browser, the PowerSchool server replaces PS HTML with the appropriate traditional HTML content.
![Page 105: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/105.jpg)
PSHTML
Tip: Learn by inspecting PowerSchool pages withhtmlr or htmlt
https://yourserverURL/admin/students/parentsguardian.html?frn=0012
Render everything EXCEPT for PSHTML tagshttps://yourserverURL/admin/students/parentsguardian.htmlr
View completely unrendered (server-side) codehttps://yourserverURL/admin/students/parentsguardian.html?t
Tip: Student pages are in "frames". To use these special extensions right-click (ctrl-click) on the link to them and "Open link in new tab"
![Page 106: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/106.jpg)
https://yourserverURL/admin/students/parentsguardian.html?frn=0012
![Page 107: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/107.jpg)
https://yourserverURL/admin/students/parentsguardian.htmlr
![Page 108: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/108.jpg)
https://yourserverURL/admin/students/parentsguardian.htmlt
![Page 109: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/109.jpg)
Where to learn more
● PSHTML Developer site https://support.powerschool.com/developer/
● Eric Schaitel's Customization Documentationhttps://support.powerschool.com/exchange/view.action?download.id=772
● The PowerSchool User Community○ PowerSource Forum: https://support.powerschool.com/forums/main.action○ PSUG Group: https://groups.io/g/PSUG
![Page 110: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/110.jpg)
Common PSHTML tags
![Page 111: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/111.jpg)
Fields
Most fields can be displayed with ~([table]field_name)
~([students]last_name)~([students]home_room)
~([01]last_name) - The table number can also be usedBut do you really want to remember numbers?
Database extensions:~([PrimaryTable.ExtensionGroupName]field_name)
~([Students.U_Students_Extension]DistrictID)
![Page 112: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/112.jpg)
Data Access Tags (DAT)
Type of PSHTML that provide simple access to data on:
● HTML Pages, Object Reports, Form Letters, Quick Exports, List Students, Report Cards
Access to:
● Students fields, GPA, Honor Roll, Attendance, Scheduling
DAT Supplement: https://support.powerschool.com/d/55742 These are a full session topic on their own
![Page 113: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/113.jpg)
DAT Examples
● ~(*gpa method="Weighted" Grade="9,10,11,12")● ~(tests;name=ACT;score=Composite;which=best;type=num;
result=value;format=##0)● ~(*period_info;1(A);course_name)● ~(per.att;1(A);A;Q2)● ~(*DABS)● ~(*honorroll method="High Honors" term="S1")
![Page 114: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/114.jpg)
Wildcards
● Wildcards contain reusable content that appears in the same format in several PS pages.
● Wildcard content is stored in the wildcards folder in the PS web root.
● Headers, footers, and navigation code is commonly kept in wildcard files.
![Page 115: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/115.jpg)
Wildcard Syntax
● Wildcard files all have an extension of .txt● The wildcard file name specified in the tag must contain
the name of the file without the extension name.
~[wc:admin_header_frame]
![Page 116: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/116.jpg)
Conditional Logic (IF tag)
~[if{#identifier}.{expression}]{true_render}
[else]{false_render}
[/if]
● {#identifier} - Optional. Used when nesting multiple IF tags. Prefixed with a number sign(#)
● {expression} - Required. A comparison expression to test for a true/false result
● {true_render} - Optional. Rendered if the expression returns true
● {false_render} - Optional. Rendered if the expression returns false.
![Page 117: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/117.jpg)
Using with ~(gpv)
~[if] tags are often used in conjunction with ~(gpv.xx) tags
For example, a custom report might have a parameter passed named 'gender'. This parameter could be accessed using the following tag: ~(gpv.gender)
![Page 118: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/118.jpg)
Special IF tags
~[if.district.office]~[if.is.a.school]~[if.mac]~[if.win]~[if.isstudent]~[if.isguardian]
![Page 119: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/119.jpg)
Example
~[if#distCheck.district.office]~[if#winCheck.win]
District office on Windows[else#winCheck]
District office on Mac[/if#winCheck]
[else#distCheck]~[if#winCheck2.win]
~(schoolname) on Windows[else#winCheck2]
~(schoolname) on Mac[/if#winCheck2]
[/if#distCheck]
"District office on Mac"
![Page 120: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/120.jpg)
Text Tags
Text tags retrieve text from PowerSchool's localization definitions.
Localization allows users to change the language used in a PowerSchool implementation, or translate individual words and phrases.
~[text:string_key_name]
![Page 121: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/121.jpg)
Use text tags for customization?
Tips
● If no need to translate, just use regular labels○ Example: <title>Grade Level Roster</title>
● You can copy EXISTING text tags in PowerSchool (Caution: sometimes PS changes text keys)
● You can CREATE your own keys in the Custom Page Manager
![Page 122: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/122.jpg)
Creating your own text keys
1. Highlight your text
2. Choose "Extract to Keys"
1
2
![Page 123: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/123.jpg)
Creating your own text keys
1. Highlight your text
2. Choose "Extract to Keys"
3. New key automatically created 1
2
3
![Page 124: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/124.jpg)
Error - "String key was not found!"This error is fairly common.
- You customize a page- PowerSchool updates the page
and changes the text key.- Your customization is now
referencing a text key that no longer exists.
Solution
- Don't use stock text keys- Use page fragments to customize- Update your customization to refer to the new key
![Page 125: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/125.jpg)
Error - "String key was not found!"
~[text:psx.html.admin_students.generaldemographics.street]
~[text:psx.html.admin_students.generaldemographics.street_aptsuite]
FIXED!
![Page 126: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/126.jpg)
Tlist_SQL
A way to embed an SQL Query into your custom pages
Separate SQL class!
The basics
~[tlist_sql;SQL Query goes here;]Row Template goes here
[/tlist_sql]
![Page 127: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/127.jpg)
<table class="linkDescList"><thead>
<tr><th>Name</th><th>School Number</th><th>Principal</th><th>Address</th>
</tr></thead><tbody>
~[tlist_sql;SELECT name, school_number, principal, addressFROM schoolsORDER BY sortorder
;]<tr>
<td>~(name)</td><td>~(school_number)</td><td>~(principal)</td><td>~(address)</td>
</tr>[/tlist_sql]
</tbody></table>
Tlist_SQL1. The code in the
Row Template will be repeated for each record returned by the query
2. Columns in each record are referenced using ~(column_name)
3. The columns in the Row Template must be in the same order as the query
![Page 128: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/128.jpg)
~[tlist_sql;SELECT name, school_number, principal, addressFROM schoolsORDER BY sortorder
;]<tr>
<td>~(name)</td><td>~(school_number)</td><td>~(principal)</td><td>~(address)</td>
</tr>[/tlist_sql]
Tlist_SQLTlist_SQL
![Page 129: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/129.jpg)
● Develop and test queries in a querying tool. Then paste the query into your tlist_sql tags.
● PowerSchool will not respond with an error message if the query has an error; there simply won't be any data rendered.
○ However, tlist_sql errors will appear in the PowerSchool log (System > System Logs > System Log > View Current System Log File).
● Tlist_sql is not limited to generating table rows. It can also be used to create options for <select> inputs, or any solution that would require repeated code for each result from a query.
Tips for developing Tlist_SQL
![Page 130: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/130.jpg)
Final Tips
● Open existing PowerSchool pages to see how they are constructed
● Use the PS Templates in CPM ● Refer to UI Examples● Download plugins from PowerSource Exchange● Be brave!
![Page 131: PowerSchool Customization #2 - Coding Basics...LTK Documentation search the built-in help: "Localization" or "Translation" PowerSource KB 74801 (v9) The Administrator User Guide combines](https://reader036.fdocuments.in/reader036/viewer/2022070107/6024e12e7c54dd65c2058e57/html5/thumbnails/131.jpg)
Credits
Adam Larsen/Aurora Educational Technology
● Past presenter at PSUG MEhttps://auroraedtech.com/
Eric Schaitel/Marcia Brenner Associates
● (Content adapted from Customization Reference Plugin)https://support.powerschool.com/exchange/view.action?download.id=772