ERIC MILETICH KALISPELL PUBLIC SCHOOLS - KALISPELL, MT DATABASE ADMINISTRATOR - PSUG Events

ERIC MILETICH
KALISPELL PUBLIC SCHOOLS - KALISPELL, MT
        DATABASE ADMINISTRATOR

ABOUT THE TRAINER…

▸ Database Administrator (Since 2015)
  ○ Kalispell Public Schools in Kalispell, MT
     ■ 12 Schools, 6,000+ Students, K-12
  ○ Manage PowerSchool & bolt-ons, eFinance Plus
    & bolt-ons, Destiny, Edulog, G Suite, Spiceworks,
    Servers & System Backups, PaperCut, &
    Curriculum Software
▸ Outside the Office
  ○ Avid fisherman
  ○ Chicago Bears fan
  ○ Musician & home recording enthusiest

AGENDA

▸   Expanded page fragments
▸   Expanded jQuery
▸   Expanded page coding

PAGE FRAGMENTS

▸ Pages now have bits of PSHTML that allow system
  administrators to inject code onto existing pages
▸ No need to edit the core page directly
▸ Changes to core pages occur with normal PS updates
▸ Key insertion points
   ○ Header wildcards: ~[cust.insertion_point:content.header]
   ○ Footer wildcards: ~[cust.insertion_point:content.footer]
   ○ Left navigations: ~[cust.insertion_point:leftnav.footer]
   ○ Title_student_end_css.txt: ~[cust.insertion_point:student.alert]
▸ Database Extensions Advanced User Guide for PS 9+

PAGE FRAGMENTS

▸ We use fragments to avoid customizing pages
  directly
▸ This allows updates to stock pages to continue
  ○ Customizations work with stock pages instead of
     overriding them

PAGE FRAGMENTS

▸   Why insertion points are awesome

PAGE FRAGMENTS

▸   Why insertion points are a little clumsy
    ○ The content.footer insertion point will put
      inserted content at the bottom of the page
       ■ Not usually what we want
    ○ Use jQuery to move content into the
      proper location
       ■ Somewhat advanced topic
       ■ Covered, in-depth, in other sessions

JQUERY    BASICS

▸   jQuery object on PowerSchool pages is
    usually aliased as $j v. $
     ○ $: jQuery documentation (e.gonline)
     ○ $j: PS pages (admin, teacher, and
       guardian)
     ○ $: PowerTeacher Pro pages
     ○ jQuery(): Valid on all
▸   All properties and methods work the same,
    but the object has a different name

JQUERY   BASICS

▸   Selectors
    ○ Use the same syntax as CSS
    ○ Descendant combinator (space)
    ○ Comma separator
    ○ #idname
    ○ .classname

SELECTORS

▸   $j(“div.box-round”)
    ○ Selects all  tags that have the box-
       round class
▸   $j(“p#student_detail_header”)
    ○ Selects the  tag with id of
       student_detail_header
▸   $j(“ul#std_informationli”)
    ○ Selects  tags that are descendants of a
        tag with the id of std_information

SELECTORS

▸   $j(“ancestor descendant”)
    ○ Select elements that are descendants (any
       generation) of this ancestor

▸   $j(“selector1, selector2”)
    ○ Multiple selector
    ○ Element matches selector1 OR selector2

SELECTORS

▸ Attribute
  ○ $j( "[attribute='value']" )
  ○ Sometimes useful if all you have is the name
  ○ $j(“input[name=‘userSentContact.email’]”)
  ○ Other operators include:
      ■ Contains: *=
      ■ Starts with: ^=
      ■ Ends with: $=
      ■ $j(“a[href*=‘PSPRE_ADAADM_ByMinute’]”).r
       emove();

SELECTORS – PSEUDO CLASSES

▸   :first
▸   :last
▸   :eq(N)
     ○ Selects n-th(zero-indexed) element that
        matches given selector
▸   :gt(N)
     ○ Elements with position greater than N
▸   :lt(N)
     ○ Elements with position less than N

METHODS

▸ After selecting an element or a group of elements,
  apply a method
▸ Many uses
  ○ Select parent or descendant elements
     ■ traversing the tree
  ○ Change CSS styling
  ○ Add content before or after
  ○ Remove
  ○ Hide
  ○ Show
  ○ Clone
  ○ Events

METHODS

▸ .parent()
   ○ Jump up to parent element of selected element
   ○ $j(“td”).parent()

▸ .closest(ancestor selector)
   ○ Jump up to first ancestor that matches given selector
   ○ $j(“a[href*=‘PSPRE_ADAADM_ByMinute’]”).closest(“tr”).remove();

▸ .children(child selector)
   ○ Selects child elements of the given selector
   ○ ONLY the first generation of descendants

▸ .find(descendant selector)
   ○ Selects descendant elements of given selector
   ○ ANY generation of descendants

.CSS()

▸   Used to dynamically change CSS properties

▸   Want it to change when the page loads?
    ○ Better to use document-level CSS styles

▸   More useful when a button or other action
    should change a style

▸   Fiddle

.APPEND()

▸   Inserts content at the end of selected
    element(s)

▸   $j(“p#student_detail_header”).append(“~([0
    1]homeroom)”);

▸   $j(“div.box-round”).append(“Lunch Status:
    ~([01]lunch_status));

.BEFORE() AND .AFTER()

▸   Adds content before/after element

▸   $j(“input:first”).after(‘’);

▸   $j(“table#quicklookup”).before(‘E-mail teachers’);

METHODS

▸   .remove()
     ○ Delete element from the DOM
▸   .hide()
     ○ Sets CSS style display:none
     ○ Removes element from view, no longer
       takes up space
▸   .show()
     ○ Opposite of .hide()

EVENTS

▸   click(), dblclick(), change(), focus(),
    mouseover(), mouseout()

▸   Triggered upon certain user events

▸   Pass function to event handler to perform
    operations when event occurs

▸   jQuery API Documentation

ANONYMOUS FUNCTION

▸   A function can be passed as an argument

$j("input#btnStuNum").click(function()
{
    $j("input#fieldStuNum").prop("disabled", false);
    $j("input#btnStuNum").remove();
    $j("span#editStuNumMsg").css("color", "#f00“);
});

$J(  )
A.K.A. $J(DOCUMENT).READY()

▸   Just another method, but awesome
▸   Waits until selector has finished loading
▸   Useful in page fragments to make sure
    desired element has been created before
    acting on it
▸   Trying to select element before it exists will
    result in nothing happening
     ○ CSS changes
     ○ .remove()
     ○ .click() or another event binding

EVENT EXAMPLE W/ $J( FUNCTION() )
$j(function()
     {
         $j("input#fieldStuNum").prop("disabled", true);
         $j("input#fieldStuNum").after
         (
              "

SELECTING POWERSCHOOL ELEMENTS

▸   Element has ID or class

▸   Known position, but try to avoid if you can
    $j(“li:eq(27)”)

▸   Input name. Hard to do with UF-XXX codes

▸   JSFieldParam. Has trouble with migrated custom
    fields.

EXPANDED PAGE CODING

▸   PowerSchool HTML (PSHTML)

▸   Useful for performing some server-side
    functions

▸   Bare-bones programming language

EXAMPLE PSHTML

   Source: Eric Schaitel’s documentation plugin

TLIST_SQL

▸   Used to pull data from database

▸   Push into HTML, JavaScript, JSON

▸   Display dynamic data based on current
    conditions and user input

TLIST_SQL EXAMPLE
~[tlist_sql;                                                             
     select                                                                     ~(lastfirst)
       lastfirst,                                                               ~(grade_level)
       grade_level,                                                             ~(father)
       father,                                                                  ~(mother)
       mother,                                                                  ~(home_phone)
       home_phone,                                                              ~(emerg_contact_1)
       emerg_contact_1,                                                         ~(emerg_phone_1)
       emerg_phone_1,                                                           ~(emerg_contact_2)
       emerg_contact_2,                                                         ~(emerg_phone_2)
       emerg_phone_2                                                       
     from                                                                [/tlist_sql]
       students
     where
       id in (select studentidfrom cc where sectionid= ~(gpv.section))
     order by
       lastfirst
;]

CODING RESOURCES

▸   Places to learn about PS coding:
    ○ PS Developer site
    ○ Eric Schaitel's Customization
       Documentation plugin
    ○ The PowerSchool User Community:
       ■ PowerSource Forum
       ■ PowerSchool Community
       ■ PSUG Group
    ○ W3 Schools

HELP US MAKE PSUG BETTER
FEEDBACK IS GREATLY APPRECIATED

ERIC MILETICH
MILETICHE@SD5.K12.MT.US