PSUG National Information Exchange Users Helping Users slides

PSUG National Information Exchange Users Helping Users

slides: aete. ch/psug 2018 Building Dynamic Pages Adam Larsen Assistant Superintendent CUSD #220 – Oregon, IL Principal Developer Aurora Educational Technology

Agenda • Dynamic options • tlist_sql-based dynamic reports – – HTML Forms GPV Populating inputs with j. Query and tlist_sql Loading results • Lab Time slides: aete. ch/psug 2018

About the trainer slides: aete. ch/psug 2018 • BS (2004) Psychology, Iowa State University • MA (2007) Psychology, Northern Illinois University • Ed. D (In progress) Curriculum Leadership, Northern Illinois University • Former web developer and school psychologist • Assistant Superintendent for CUSD 220 in Oregon, IL – Coach principals in use of data – Supervise technology department – Primary administrator for Power. School • Marathoner, trumpet player, web developer, geocacher, national parks junkie, graduate student, backpacker

Dynamic Options • frn=001 XXX – Simple lists of student data – Changing the frn changes the student • tlist_sql – Select data from Oracle database – Everything is available • Power. Queries – Steeper learning curve than tlist_sql – Access to most data slides: aete. ch/psug 2018

HTML Forms slides: aete. ch/psug 2018 • Take input from user – – – Textarea (multi-line) Select (drop-down) Checkbox Radio button Password • When a form is submitted, all inputs are converted to key=value pairs – GET: Data goes in querystring (page. html? foo=bar) – POST: Data in HTTP Header

Power. School forms: GPV slides: aete. ch/psug 2018 • Get Parameter Value • Old syntax: ~[gpv: myvariable] • New syntax: ~(gpv. myvariable) • Form inputs are converted to a query string and passed to its action page • GET and POST data are both accessible via ~(gpv) • Use GPV to change the results of a query based on a value passed from the sending page

j. Query slides: aete. ch/psug 2018 • Java. Script library that ships with Power. School • Makes dynamic pages easier to create • Show/hide/move/remove HTML elements on the page • Load dynamic content in from other pages

tlist_sql-based pages ~[tlist_sql; select lastfirst, grade_level, father, mother, home_phone, emerg_contact_1, emerg_phone_1, emerg_contact_2, emerg_phone_2 from students where id in (select studentid from cc where sectionid = ~(gpv. section)) order by lastfirst ; ] <tr> <td>~(lastfirst)</td> <td>~(grade_level)</td> <td>~(father)</td> <td>~(mother)</td> <td>~(home_phone)</td> <td>~(emerg_contact_1)</td> <td>~(emerg_phone_1)</td> <td>~(emerg_contact_2)</td> <td>~(emerg_phone_2)</td> </tr> [/tlist_sql] slides: aete. ch/psug 2018

HTML Form <form id="options"> <table class="link. Desc. List"> <tr> <th>Attribute</th> <th>Value</th> </tr> <td>Teacher</td> <select name="teacher"> <option value="">Please choose</option> ~[tlist_sql; select id, lastfirst from teachers where schoolid = ~(curschoolid) and status = 1 order by lastfirst ; ] <option value="~(id)">~(lastfirst)</option> [/tlist_sql] </select> </td> </tr> <td>Class</td> <select name="section"> </td> </tr> </table> </form> slides: aete. ch/psug 2018

HTML Results Area <div class="box-round"> <table class="link. Desc. List"> <thead> <tr> <th>Student</th> <th>Grade</th> <th>Father</th> <th>Mother</th> <th>Home Phone</th> <th>Emergency Contact 1</th> <th>Emergency Phone 1</th> <th>Emergency Contact 2</th> <th>Emergency Phone 2</th> </tr> </thead> <tbody id="results"> </tbody> </table> </div> slides: aete. ch/psug 2018

Dynamically load sections slides: aete. ch/psug 2018 Section list: <option value="">Select a section</option> ~[tlist_sql; select sections. id, terms. abbreviation term, expression, courses. course_name from sections join terms on sections. termid = terms. id and sections. schoolid = terms. schoolid join courses on sections. course_number = courses. course_number where teacher = ~(gpv. teacher) and floor(sections. termid/100) = ~(curyearid) order by sections. termid, courses. course_name ; ] <option value="~(sectionid)">~(term) ~(expression; t; externalexpression) ~(course_name)</option> [/tlist_sql]

Dynamically load sections slides: aete. ch/psug 2018 Use j. Query to clear out results and load a teacher’s sections when the teacher name is changed $j("select[name='teacher']"). change(function() { $j("#results"). empty(); $j("[name='section']"). load("emerg_roster_section s. html", $j("#options"). serialize()); } ); We send the form’s data to the receiving page using $j("#options"). serialize()

Dynamically load students slides: aete. ch/psug 2018 Use j. Query to clear out results and load students when the section is changed $j("select[name='section']"). change(function() { $j("#results"). empty(); $j("#results"). load("emerg_roster_students. html", $j("#options"). serialize()); } ); We send the form’s data to the receiving page using $j("#options"). serialize()

Resources slides: aete. ch/psug 2018 • Customization Reference – https: //support. powerschool. com/exchange/view. acti on? download. id=772 • Data Dictionaries – https: //support. powerschool. com/dir/5933 • j. Query Documentation – https: //jquery. com/ • Power. School Developer Site – https: //support. powerschool. com/developer/#/

Lab Time slides: aete. ch/psug 2018 • What reports do you want to create?

Contact slides: aete. ch/psug 2018 Adam P. Larsen adam@auroraedtech. com @aplarsen http: //www. linkedin. com/in/aplarsen

slides: aete. ch/psug 2018 Session/Conference Feedback • Please complete the feedback on Guidebook • Help us improve PSUG

slides: aete. ch/psug 2018