EasySkyCoder.js Javascript Library
Do something fun with one function!
My district has upgraded to Qmlativ, so there will not be any new development on this project.
SkyCoder is a great resource for making minor changes to Skyward specific to your district. The goal of this project is to make SkyCoder more accessible to users without JavaScript experience by condensing common types of customizations into single functions.
To use any of the EasySkyCoder functions, first surround your SkyCoder code in the code below which makes any of the EasySkyCoder functions available. You can add as many functions from EasySkyCoder as you'd like. They will all go in the middle of this one call to the library. All EasySkyCoder functions always begin with "ezsc." which let's the software know that the function is originating from this library.
$.getScript('https://jamesonpublic.squarespace.com/s/EasySkyCoder-min.js',function(){ //the rest of your SkyCoder code here });
If you would rather keep a local copy for your Skyward server to reference, you can download a copy of the library here.
Preparing to use the library:
Remember to ALWAYS test your code in a training database before adding it to your live database.
If you have not used SkyCoder before, read through the User Guide from Skyward.
I also highly recommend installing Firebug for Firefox. With Firebug you can execute the code you want to use in SkyCoder on the fly, instead of having to save the SkyCoder code and reloading the page. Running code in Firebug is also very helpful as it will tell you the errors that are occurring in your code. If SkyCoder runs into errors, the code will simply not process; no error messages.
Most of these functions require knowing a field or button's ID. IDs of fields and buttons can be found through a process known as inspecting. A nice man named Naveen made a guide about inspecting that can be found here.
EasySkyCoder.js by John Jameson is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at http://jamesonpublic.com/easyskycoder.
Buttons/LINKS
Data Manipulation
Expanded Functions
GET page DATA
Input management
Notifications
Add a button immediately preceding or following another button.
To add buttons to the right-side button list on a Browse screen, use the addButtonToBrowse() function instead so that Skyward formatting is properly followed.
| addButton( bLabel , bHref , nextToId, [before] ) | |
|---|---|
| bLabel | Text - The wording to place on the button |
| bHref | Text – Either a URL or Javascript. Note: To prevent breaking Skyward, all URLs will open in secondary windows. Javascript must be proceeded by “Javascript:”. |
| nextToId | Text - The ID of the button to place this new button before or after. |
| before | [Optional] True/False - If ommitted, this variable defaults to False which places the new button after the button specified from the nextToId. True places the new button before the nextToId button. |
Example:
//place a button after the Refresh button on SBAA Approval History that gives approvers // access to view attachments on previously approved and denied transactions //defines a function to use with the new button function runAttach(){ document.getElementById("linkId").value = document.getElementById("currentPOId").value; openNewWindow("fattmview001.w", 950, 420, 1, "browse"); } $.getScript('/javascripts/EasySkyCoder-min.js',function(){ //creates the new button ezsc.addButton( 'Attachments', 'Javascript:runAttach()', 'bRefresh' ); });
| Back to Top |
Adds a new button to the button list of the right side of Skyward Browse screens.
This is separate from the addButton() function because the formatting of buttons on Skyward Browse screens is slightly different than other Skyward pages. Note: In its current state, this function does not work if on the Browse page there is not at least one button on the right side of the page, excluding Refresh, that has a Tool Tip, the text that appears when you hover over a button.
| addButtonToBrowse( bLabel , bHref , [afterId] ) | |
|---|---|
| bLabel | Text - The wording to place on the button |
| bHref | Text – Either a URL or Javascript. Note: To prevent breaking Skyward, all URLs will open in secondary windows. Javascript must be proceeded by “Javascript:”. |
| afterId | [Optional] Text- Supplying text will place the new button after the button specified by the afterId. Omitting this value will place the new button at the top of the right-side button list. |
Example:
//place a button after the Print button ezsc.addButtonToBrowse('Employee Handbook','http://yourwebsite.com/handbook.pdf','bPrint') //place a button at the top of the right-side button list ezsc.addButtonToBrowse('Employee Handbook','http://yourwebsite.com/handbook.pdf')
| Back to Top |
Add a button to the top of the list of buttons under a section heading. The first time this is called it creates the section heading. Each time after that, it simply adds a button to the top of that list.
| addButtonToBrowseSection( sectionLabel , bLabel , bHref ) | |
|---|---|
| sectionLabel | Text - The wording to place on the section title |
| bLabel | Text - The wording to place on the button |
| bHref | Text – Either a URL or Javascript. Note: To prevent breaking Skyward, all URLs will open in secondary windows. Javascript must be proceeded by “Javascript:”. |
Example:
//Add a button to a section called Download. //The button will allow staff to download a blank W-9 ezsc.addButtonToBrowseSection('Download','W-9 Form','https://myskywardserver.com/download/W9.pdf');
| Back to Top |
The purpose of this code is to cut back on clicks and prevent financial approvers from having to download each receipt that they need to review. Instead it displays attachments in the browser when possible.
When added to a screen with an attachments button, it renames the “View Attachments” button to “Download Attachments”. It adds a new button called “View Attachments”. The renamed button continues to work as normal by downloading a copy of the file to the users computer. The new button opens images within the browser in a small lightbox. In FireFox and Internet Explorer it will also display PDFs in a browser as well.
| addViewAttLightBox ( ) |
|---|
Note: Applying this SkyCoder code is trickier than normal because Attachment windows don’t have a SkyCoder button. To run SkyCoder on an Attachment window, open a browser console window and run the following JavaScript. Note: You will still need security for SkyCoder in order for this script to work.
openNewWindow("skycoder.w",1024,768,1,"");
Example:
ezsc.addViewAttLightBox();
| Back to Top |
If users in your district work in multiple entities in SBAA, this helps distinguish the entity that they are currently using. It replaces the text "Entity ###" with a provided school name and color codes the heading with school colors. It works on the following pages:
SBAA > Chart of Accounts
SBAA > Vendor/Payor Names
SBAA > Check Requests
SBAA > Cash Receipts
SBAA > Journal Entries
SBAA > Fee Management
| applySbaaColors ( entity, schoolname, textcolor, backgroundcolor ) | |
|---|---|
| entity | Text - The full entity name setup in Skyward SBAA. i.e Entity 001 |
| schoolname | Text - The actual name of the school/entity |
| textcolor | Text - Provide the name of a color or the hex value with a # mark |
| backgroundcolor | Text - Provide the name of a color or the hex value with a # mark |
Example:
//Repeat the function as many times as there are entities in SBAA ezsc.applySbaaColors ( 'Entity 001','My High School','gold','black'); ezsc.applySbaaColors ( 'Entity 002','My East Middle School','red','blue'); ezsc.applySbaaColors ( 'Entity 003','My West Middle School','white','black');
A method for defaulting and locking down fields for your district. The function sets a value on a field if that field is blank when the page loads. If the field already has a value, this will not overwrite that value. The function can also disable a field if you do not want users making changes to that field.
| defaultValue ( fieldId , initValue , [disableField] ) | |
|---|---|
| fieldId | Text - The ID of the field to update or a comma separate list of field IDs that should all be handled in the same manner. |
| initValue | Text - The value to initially populate into the field if the field is blank. |
| disableField | [Optional] True/False - Supplying True will disable the field so that it cannot be updated by the user. Omitting this variable will keep the field edittable by the users. |
Example:
//Default the Unit of Measure on Requisitions Detial Lines to "Each", // but allow the user to change the value ezsc.defaultValue('um','Each'); //Default the Unit of Measure on four lines of the Mass Add Detail of Requisitions // Detial Lines. Also, do not allow the user to change the value ezsc.defaultValue('um1,um2,um3,um4','Each',true);
| Back to Top |
Skyward's smart drop-downs are one of my favorite features in Skyward, however if you are not populating the codes for the drop-down, the field can no longer be used. This removes the smart drop-down functionality from the field and converts the label to plain text instead of a hyperlink to the drop-down's code list.
IMPORTANT: To the best of my knowledge this will only work on the Catalog number on requisitions. If this function is used on other fields in Skyward, it will throw errors and not allow your users to save forms. Only use this function on something other than Catalog if you have extensively tested this in a training database first.
This is the current live code
| dropDownToText ( fieldId , labelId ) | |
|---|---|
| fieldId | Text - The ID of the field to change |
| labelId | Text - The ID of the label to change |
This is the new format being tested in the beta version
| dropDownToText ( fieldId ) | |
|---|---|
| fieldId | Text - The ID of the field to change or a comman separated list of field IDs to change |
Example of current live version of the code:
//Convert the Catalog Number on a Requisition to a plain text field ezsc.dropDownToText('catalog','lblCatalog'); //Convert the four lines of Catalog Numbers to a plain text field ezsc.dropDownToText('catalog1','lblCatalog'); ezsc.dropDownToText('catalog2','lblCatalog2'); ezsc.dropDownToText('catalog3','lblCatalog3'); ezsc.dropDownToText('catalog4','lblCatalog4');
Example of the new format being tested in the beta version:
//Convert the four lines of Catalog Numbers to a plain text field ezsc.dropDownToText('catalog1,catalog2,catalog3,catalog4');
| Back to Top |
This creates a widget on the homepage with a link to another website. The widget will have a dark border and will always appear below Jump to Other Dashboard. Using the function again time will simply add another link to that widget.
Note: Setting this up is specific to the system. If you want to place district links Financial Management, Human Resources, and Employee Access, then this SkyCoder code needs to be added in all three spots.
| linkWidget ( wTitle, linkTitle, linkUrl) | |
|---|---|
| wTitle | Text - The title of the widget |
| linkTitle | Text - The title of the link |
| linkUrl | Text - The full URL for the link to access |
Example:
ezsc.linkWidget('MyDistrict Policies','Time Off Policies','https://mydistricts.org/policies/timeoff.html'); ezsc.linkWidget('MyDistrict Policies','Financial Policies','https://mydistricts.org/policies/finance.html'); ezsc.linkWidget('MyDistrict Policies','Other Policis','https://mydistricts.org/policies/other.html');
| lookup |
|---|
Example:
//alert user if they can only read if(ezsc.lookup == 1){ alert('See admin if you need to edit the drop-down lists on this page.'); }
| menuPath |
|---|
Example:
//alert user to the current menu path alert('The current menu path is'+ezsc.menuPath);
Enforces a data validation routine by highlighting the field when it is updated to an invalid value with the option of providing notification messages to users and/or disabling a button.
The Sudo Data Validation Guide should be referenced before trying to use this function.
Example: One example is below. Read the Sudo Data Validation Guide to understand all the possible ways to use this function.
//position start date must be greater than or equal to hire date // if it is not disable the save button and display a message // Since checkOnPageLoad is left out it is false this validation will only run when vPosStartDate is changed ezsc.mustBe ('vPosStartDate','>=#vHireDate','bSave','POS start must be > hire date')
| Back to Top |
Trigger a notification message for a user when a field on a form changes.
| noticeOnChange( fieldID , notice , [triggerStyle] ) | |
|---|---|
| fieldID | String - The ID of the field |
| notice | String - The content of the message |
| triggerStyle | OPTIONAL String [set values]
If no value is provided, the notice is triggered once as a pop-up message. 'unlimited': Triggers a pop-up message each time the field is changed 'inPage': Inserts the message on the page near the field |
Example: In Expense Reimbursement, pre-verifiers receive an email when the request is submitted. However, if the pre-verifier is changed and the request resubmitted, the new pre-verifier will not receive an email. When the pre-verifier is changed, trigger a notice to the user that they may want to contact the new pre-verifier if the request is urgent.
//display a pop-up the first time that a user changes the pre-verifer to let // them know to notify the new pre-verifier if this is a resubmission ezsc.noticeOnChange('sPrever','If a pre-verifer is added after the request was first submitted, please manually notify the pre-verifier by email.'); //display a message in the page when the user changes the pre-verifer to let // them know to notify the new pre-verifier if this is a resubmission ezsc.noticeOnChange('sPrever','If a pre-verifer is added after the request was first submitted, please manually notify the pre-verifier by email.','inPage');
| Back to Top |
Returns the current user's security level (1, 2, 3, 4, or 5)
| security |
|---|
Example:
//alert user if they can only read if(ezsc.security == 1){ alert('See admin if you need to edit this page.'); }
| Back to Top |
This function triggers a dialog box mimicked after the dialog boxes triggered by Skyward. It can be a simple message with an OK button, or it can have up to three buttons with custom JavaScript.
Note About JavaScript Actions: No matter what, each button will always close the dialog box. No extra code is needed to tell the button to close the dialog. For a button to only close the dialog box a value of '' can be supplied as the action variable.
| skyDialog ( diTitle , diMessage , [diButLabel1] , [diButAction1] , [diButLabel2] , [diButAction2] , [diButLabel3] , [diButAction3]) | |
|---|---|
| diTitle | Text - The title of the dialog which will appear in a dark colored header. Supplying the value '' will result in the dialog box being titled Skyward. |
| diMessage | Text - The message to appear in the dialog box |
| diButLabel1 | [Optional] Text - The wording to appear on the first button. If omitted, the first button will read, "OK". |
| diButAction1 | [Optional] Text - The Javascript to run when the button is pressed. If omitted, the first button will simply close the dialog. If the second button is used as well, you must at least supply '' as the value of this variable. |
| diButLabel2 | [Optional] Text - The wording to appear on the second button. If omitted, the second button will not appear on the dialog box. |
| diButAction2 | [Optional] Text - The Javascript to run when the button is pressed. If omitted, the second button will simply close the dialog. If the third button is used as well, you must at least supply '' as the value of this variable. |
| diButLabel3 | [Optional] Text - The wording to appear on the third button. If omitted, the third button will not appear on the dialog box. |
| diButAction3 | [Optional] Text - The Javascript to run when the button is pressed. If omitted, the third button will simply close the dialog. |
Example:
//Trigger a dialog box letting a user know the fiscal year isn't closed yet // The title will be Skyward since the value of the first field is '' // This dialog will have one 'OK' button that closes the dialog box ezsc.skyDialog('','The fiscal year will not be closed until October.'); //Trigger a dialog box with three options // The dialog is titled 1099 Info // The 1st button runs the defaultValue() function and then closes the dialog // The 2nd & 3rd buttons both save the page by clicking the save button ezsc.skyDialog('1099 Info','Is this an individual or partnership selling goods or services?','Yes - Edit 1099 Details','ezsc.defaultValue("vShowName", "1");ezsc.defaultValue("v1099DollarType", "NONEM");','No -This is a corporation selling goods or services. Save vendor now','$("#bSave")[0].click();','No -This is an employee reimbursement record. Save vendor now','$("#bSave")[0].click();');
| Back to Top |
Force users to check boxes instead of entering text. The field value seen on a record in View mode will be a comma separated list of the values checked in Edit mode.
Note: This does not actually change the Skyward element on the page. The function hides the text field from the user and creates check boxes in its place. The check boxes aren't actually submitted to the database, however whenever they are checked or unchecked, they update the hidden text field that is written to the database. This is done to ensure the integrity of the data connection to the database.
| textToCheckBox ( fieldId , optionValues [allowOther] ) | |
|---|---|
| fieldId | Text - The ID of the field to update. |
| optionValues | Text - A comma separate list of the values to be added as check boxes. |
| allowOther | [Optional] True/False - Supplying a value of True will add an "Other" check box to the end of the list of check boxes followed by a text field for additional free form data to be entered. By default, the "Other" check box will not display. If the "Other" check box is not used, then any data listed in the actual Skyward field that does not have a matching check box will be completely ignored on the Edit screen. That data cannot be removed without using the "Other" check box. |
Example:
//Replace the Purpose of Reimbursement Request text field with check boxes ezsc.textToCheckBox('vReimbPurp','Conference,Supplies,Travel'); //Replace the Purpose of Reimbursement Request text field with check boxes // and provides an "Other" check box with a text field for free form entry ezsc.textToCheckBox('vReimbPurp','Conference,Supplies,Travel',true);
| Back to Top |
Force users to select valid values from a drop-down instead of entering text.
Note: This does not actually change the Skyward element on the page. The function hides the text field from the user and creates a drop-down in its place. The drop-down isn't actually submitted to the database, however whenever the drop-down is changed, its value gets written to the hidden text field. This is done to ensure the integrity of the data connection to the database.
| textToDropDown ( fieldId , optionValues , [allowOld] ) | |
|---|---|
| fieldId | Text - The ID of the field to update. |
| optionValues | Text - A comma separate list of the values to add to the drop-down. |
| allowOld | [Optional] True/False - If a record has data that does not match one of the drop-down values, then a value of True will add the value as an option in the drop-down. This option will be the last option in the drop-down and proceeded by an asterisk. The asterisk will not write to the database. By default, an old value in this field will not appear in the drop-down. This means that if a record had a field that does not meet the drop-down criteria, the field in the database will be emptied when the record is updated even if the user doesn't not select a field from the drop-down list. |
Example:
//Replace the Purpose of Reimbursement Request text field with a drop-down ezsc.textToDropDown('vReimbPurp','Conference,Internal Meeting,Travel'); //Replace the Purpose of Reimbursement Request text field with a drop-down // while allowing any legacy values in this field to not be emptied out // when a record is edited ezsc.textToDropDown('vReimbPurp','Conference,Internal Meeting,Travel',true);
| Back to Top |
Convert a field's contents to proper title case whenever it is changed. Note: This may not be a good option to use on Last Name or Street. i.e. McIntyre is not proper title case, so you don't want to automatically force title case. In a case like the one just mentioned, try the titleCaseLink() function instead.
Note: To use this on name or address fields, you would want your district settings to be set to "As Entered" in the "Default Case" drop downs found at PS/CA/DS/CF/DI.
| titleCaseOnChange( fieldId ) | |
|---|---|
| fieldId | String - The ID of the field |
Example:
ezsc.titleCaseOnChange('vFirstName');
| Back to Top |
Whenever the specified field's contents are changed, if the new contents are not proper title case, a red, clickable link will appear below the field displaying the contents as proper title case. The user can click the red text to update the field contents with proper title case.
Note: To use this on name or address fields, you would want your district settings to be set to "As Entered" in the "Default Case" drop downs found at PS/CA/DS/CF/DI.
| titleCaseLink( fieldId ) | |
|---|---|
| fieldId | String - The ID of the field |
Example:
ezsc.titleCaseLink('vLastName');
| Back to Top |
This returns the current user's ID.
| userID |
|---|
Example:
//display the current user's user ID alert('Your user ID is '+ezsc.userID);
| Back to Top |