PowerSchool 7 has a much-improved CSS and some good use of jQuery UI widgets.
I particularly like the elegant dialog popups they use. For example, to display a student's medical alert info:
 |
| Elegant jQuery Popup Dialog |
We've added a number of custom alert variables for our students (flagging SPED kids, for example) and wanted to have a dialog popup for our alerts like the built-in medical alert.
It was actually pretty easy.
The method I'm going to show you here is the "PowerSchool Dialogs for Dummies" version. I'll go into more detail in another post about how to get more configuration controls for your popups.
Create your popup content
Your popup's content needs to live in an html file on your PS server. We typically put ours in /admin/alerts or /teacher/alerts but it doesn't matter.
You are not going to create a typical html document, however. No <html> tags...no <head> tags...no <body> tags. This alert file is not meant to be displayed on its own. It only contains the content that will be displayed inside the popup dialog.
~(studentname)
This student has special needs or circumstances. For details, please contact the office.
As you can see in example code above, you can include PowerSchool variables or even ~[tlist_sql] content. The important thing is that the content all needs to be wrapped in a <div> tag. The style="width:###px;" of that first div in the document determines how wide your popup window will be. If you don't specify a width, the popup will be as wide as it needs to fit the content.
Make a link to display your popup
The last think you need to do is create a link that will fire off your popup. PowerSchool has made this ridiculously easy.
It doesn't matter where you put your link...that is completely up to you. This will work on any custom page.
All you have to do is create a simple <a> tag that links to the popup content file you just created.
Custom Popup
The class="dialogM" is the magic that makes it all happen. By including that class, PowerSchool knows to automatically make this link popup the content in a dialog window (thatnks to the magic of jQuery...).
That's it. Super simple dialog popups.
Thanks!!!
ReplyDelete