Forms without the loading window

When a user submits a form in PowerSchool, the default functionality is that a "loading..." popup appears giving the semblence of a progress bar.

Once this loading popup appears, the page is locked...no user interaction is allowed. This is usually all fine and good since a form submit usually takes you to a new page, freeing up the user to interact again.

But if you create a form that has a target="_blank" then the form's action is loaded in a new browser window or tab. The loading popup will never go away on the original page and the user won't be able to do anything unless they refresh the browser.

Certainly not ideal.

You can create forms that do not show the loading popup by simply assigning the form the noSubmitLoading class.

MD5 Hash

Often, I find it helpful to created MD5 hashes from data in my PowerSchool database.

There is a built-in javascript file (/admin/javascript/md5.js) that has functions to create md5 hashes...but using those functions just doesn't sit well with me.

Usually, you are creating an MD5 hash for some sort of security/quasi-encryption. Typically in those scenarios you are creating a hash from a number of values concatenated together.

{{Username}}+{{Timestamp}}+{{SecretKey}}

The whole point is that the secret key is secret -- known only by you and the web service you are passing the credentials off to. If you use javascript to create the MD5 hash, the secret has to be known to the user's web browser...it has to be embedded in the web page's source code and thus is easily discoverable.

A better solution

You don't want to have your secret key floating out there in your source code. You just don't.

So in these situations, I have my PowerSchool Oracle database create the md5 hash for me using ~[tlist_sql]. Your Oracle database has a built-in function that creates md5 hashes.

You'll notice that the "plaintext_secrete_key" is still hardcoded into your html code. However, thanks to PowerSchool's parsing, your ~[tlist_sql] query code is not readily available to your end user, so it's a bit more secure than simply hardcoding the secret key into your javascript code. Of course, an even better solution would be to store the secret key in your database itself and md5 the value in your query instead of a hardcoded string.

Loading...

You've probably seen PowerSchool's "loading..." popup window. It's not a progress bar, but it at least gives some feedback to the user that something is happening...

You can use this loading dialog in your own custom javascript-powered customizations with just a few lines of code. You don't need to include any special javascript files or create any complex functions. The functionality is already built-in to your PowerSchool install.

Opening the loading... popup

To open the loading dialog, simply call the loadingDialog() function.

loadingDialog();

This will open the loading dialog...but be warned...it will also make it so that your user can not do anything else on your PowerSchool site until you close the dialog box...and there's no way for the user to close the loading dialog...

Closing the loading... popup

You have to close the loading dialog before your user will be able to use the site again. Doing so is just another simple javascript function call.

closeLoading();

Calling this function will immediately close the loading dialog and return control to your user.

Putting it all together

Why would you need to do this?

Well...in our implementation of PowerSchool, we often use AJAX to load data asynchronously. These ajax calls can sometimes take a while to complete. While the script is doing its work it's often helpful to display the "loading..." dialog so the user knows that something is going on.

Here's an example that on page load does an ajax call for some data, but first it fires off the loading dialog and then closes the loading dialog once the ajax data has been received.

Simple Dialog Popups

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.