PSU Customization: Foundations. Customization: Foundations. The Cost of Modifying PowerSchool Pages. Languages of PowerSchool Customization

Transcription

1 PSU 2012 Customization: Foundations Customization: Foundations Create your own unique look and feel for the web pages on your school s PowerSchool server. Work with HTML and Cascading Style Sheets to create and modify pages to suit your school s needs. In this course, you will learn how to: Use PowerSchool Custom Page Management Understand the basics of the web languages supported in PowerSchool Use page and object templates The Cost of Modifying PowerSchool Pages It's important to understand some of the risks and considerations of modifying existing pages and customizing PowerSchool in general. New versions of PowerSchool are released frequently. In most cases, small version updates have minor changes and do not affect many different pages. With each version release, you should check to see if PowerSchool has updated any of your customized pages. If it has, you should re-customize the page so you get both the new changes PowerSchool has made and your own modifications as well. This means that there is a cost of time and effort on your part beyond customizing the page just once. By no means should this discourage you from making changes to PowerSchool based on your school's needs. On the contrary, the tools provided are there to help you make modifications that best suit your school. But it does mean you should consider the future investment when weighing the need to customize an existing page. The other consideration is the potential to change or damage functionality on a page. For example, removing fields or changing how a form works may break the process on that page. It is critical to think of the extent of a customization. If the change is cosmetic, meaning it only affects the look of the page, there is much less potential to damage the functionality of the page. If you are changing the fields themselves or the form elements, the potential increases greatly. In short, be aware of the consequences of your modifications and test them thoroughly before implementing them, if they extend beyond cosmetic changes. Languages of PowerSchool Customization Customizing PowerSchool can feel like a daunting task when you first see a page in its raw form, especially considering most pages use various combinations of Hypertext Markup Language (HTML), custom PowerSchool codes, Cascading Style Sheets (CSS) and JavaScript. For example, if you look at the home.html page in the guardian folder you might see something like this: <!DOCTYPE html> <html> <head> <title>~[text:psx.html.guardian.home.grades_and_attendance powerschool_parent_acce ss]</title> ~[wc:guardian_header_yui] ~[SetPostValue:selectedTab=GradesAndAttendance] ~[if.prefschool.sgshowpa=1]~[setpostvalue:showsgfgradebook=false][else]~[setpostval ue:showsgfgradebook=true][/if.prefschool.sgshowpa=1] ~[brij_render:common-ps;:guardianhometabs] <h1>~[text:psx.html.guardian.home.grades_and_attendance] ~(studentname)</h1> In this example, custom PowerSchool code, marked with tildes (~) and brackets or parentheses, is interspersed with HTML tags like <title> and <h1>.

2 It s important to be able to discern the differences between the various coding languages used to create PowerSchool pages before you start customizing pages. What is HTML? HTML is the code language used to talk to web browsers like Safari, Firefox, and Internet Explorer. Using HTML, you can create web pages that contain text, images, and links to other web pages. HTML has a very strict format. Spelling matters. You have to be precise in your instructions. You re familiar with the English language, and you know it is made up of small units called letters and larger units called words. HTML is a language made up of units called tags. The tags are written usually in pairs. Each pair indicates to the software, Start this action now, or Stop this action now. For example, every HTML file begins with <html> and ends with </html>. These codes indicate that everything between the two tags is HTML code. Notice that a tag is enclosed by less than (<) and greater than (>) signs. A stop tag uses a forward slash (/). What is CSS? With PowerSchool 7.0, CSS, or Cascading Style Sheets controls much of the way the page looks. To create custom pages with ease, become familiar with CSS. In the early days of HTML, the browser handled formatting, and HTML defined the content. That was fine until new HTML tags were added that controlled formatting such as font, which made it difficult to separate content from format. For this reason, the World Wide Web Consortium created the concept of styles. Cascading Style Sheets (CSS) have been part of the web since 1996, but are often overlooked. CSS syntax has two parts: a selector and a declaration. Curly brackets { } contain the declaration, which is made up of property and value, followed by a semicolon (;). CSS Item Selector Property Value Definition The HTML element or class that is being defined The attribute that you wish to change What you set the attribute to For example, body {color: #333333;} defines the style for an element named body. What is JavaScript? JavaScript is a scripting language designed to make web pages more interactive. For example, it can be used to validate data before it is sent to the server. It is also used to manage what happens when you click or hover over objects on a web page. JavaScript looks much like other types of scripting languages. For example: <script type="text/javascript"> function reloadpage() { window.location.reload() } </script> Copyright 2012 Pearson Page 2

3 Even though you won't work with JavaScript much in the activities in this class, you need to be able to recognize JavaScript when you see it. As a best practice, use HTML to create the structure of the page, CSS (Cascading Style Sheets) to give the page style, and JavaScript to make things happen. What is custom PowerSchool code? Before customizing a PowerSchool page, you should understand how a PowerSchool page is built and how the request for data is sent. PowerSchool uses unique, proprietary commands in pages and on the server to build pages dynamically. One way to look at it is to consider PowerSchool pages as templates that combine HTML with these commands. When you request information about a specific student, the server generates the page, replacing the code with student data. For example, there is no individual Quick Lookup page for each student, but rather one Quick Lookup page that fills with information pertinent to the student you select. When a user clicks a student s name, he sends a request for the template page and information about which student s record to access, plus the user s access permissions. If the user has access, the PowerSchool server returns a page populated with the appropriate information. The page fills with data retrieved from the database, and the structure of the page is built from HTML files on the server. PowerSchool uses wildcards, X codes, and text tags to build and fill pages with student data. Wildcards are tags that relate to text files stored on the server that contain code. If a page refers to a wildcard, the server fills the page with the text from that wildcard when the server sends the data to the user s browser. This way, the same HTML code is loaded into all the pages that need it. Since the code is in the wildcard, it can be changed in one place. When an X code command exists on a template page, the server reads it and triggers an action. Usually the output of an X code is a page section filled with complex information and HTML code. One difference between wildcards and X codes is that an end-user can modify the coding in a wildcard, but cannot change the coding in an X code. That means that you can rewrite portions of a wildcard so its output suits your individual purpose, but if you include an X code in a custom page, you can only get whatever output was originally designed. Text tags are used to change the language of text on a PowerSchool page. The different language values of a text tag are retrieved from the database when the page is rendered. Field tags retrieve data from a requested record in the database. The table below provides examples of common types of codes you ll see on PowerSchool pages. Tag Type Function ~[wc:commonscripts] ~[wc:admin_header_css] Wildcard Wildcard Inserts into a page common JavaScripts needed by PowerSchool pages Inserts into a page the CSS that builds the header for PowerSchool admin pages ~[submitbutton] Function Inserts the code needed for a submit button ~[x:userid] X code Returns the current user s ID ~[text:psx.html.admin. home.browse_students] Localization Text tag on the Admin/Home page ~([01]lastfirst) Field Tag Inserts the name of the current student (last, first) Keep in mind that you won t see these tags when you look at the source of a rendered PowerSchool page. On the rendered page, the server has turned the tags into code and data already. Copyright 2012 Pearson Page 3

4 Custom Page Management Originally, Custom Page Management was developed to enable PowerSchool Software as a Service (SaaS) customers to develop and maintain their own PowerSchool customizations more easily. Even if your PowerSchool server is self-hosted by your school or district, you can use this feature. With Custom Page Management, you can: Work on customizations anywhere you have access to the Internet and publish them without having to access the custom web_root folder on your PowerSchool server s hard drive (the old method) Use built-in templates for admin, teacher, and parent pages Take advantage of built-in User Interface (UI) objects and PowerSchool styles Compare customized pages to the original PowerSchool page easily Build text keys for your custom pages and use them with PowerSchool s Language Translation Toolkit feature The large panel shows the contents of pages selected from the Site Structure panel. When you click the Customize Page button, you can customize the page as well as access the toolbar for customization. Click the Customized Page tab, and then click Customize Page to access these tools. Insert code with the toolbar, including the code for page components and JavaScript modules. Then, using the toolbar, preview your page. When you create a new page, you can insert components for admin, parent, and teacher pages. PowerSchool Page Templates PowerSchool provides built-in, complete page templates for admin, teacher, and parent pages. With these templates, you can create a page foundation and build your own custom page with some of the dynamic functionality already in place. Parts of your custom pages need to be coded carefully, but the process of making a new page is easier when you can start with a page template and insert code to build jquery components. Activity 1 Your First PowerSchool Page 1. On the Start Page, click PS Administrator to open the page in a new window or tab 2. Enter system in the Username field and manager in the Password field 3. Click Submit 4. Click Custom Pages in the main menu 5. Navigate to the folder that corresponds to the number you were assigned by the trainer For example, if the trainer assigned you the number 65 you would navigate to admin > Click + Add > + Create File 7. In the Name field, enter mypage.html 8. Click Submit and click OK 9. Make sure that your new page is selected in the Site Structure list, and then select Admin from the Page Templates list 10. Change the text between the <title> and </title> tag with My Page Your Name 11. Replace the text between  and  with the same text as in step Change the text between the <h1> and </h1> tag with the same text as in step 10 Copyright 2012 Pearson Page 4

5 13. Save and publish your page (your instructor will explain the difference between saving and publishing) 14. In PowerSchool, navigate to admin/00/mypage.html, replacing 00 with your number, and view your page 15. Troubleshoot as needed, with the instructor s help More About HTML Tag, You re It Tags, in their basic form, control the structure of the page. They create what is called the Document Object Model, or DOM. The DOM can be likened to a family tree. Objects can have parents, children, and siblings. You can see this structure using Firebug in Firefox to inspect the page. Common Tags Many tags are common to the structure of PowerSchool pages. The h1 through h6 tags create different level headers The p tag creates a paragraph, normally with some space above and below it Div and span tags are used to create sections or divisions that specific formatting or that actions can be applied to UL and OL create unordered and ordered lists Li tags create the list items in these lists BR is a break tag, similar to a return (note that it is self-ending, meaning there is no separate end tag) A (anchor) tags create links to other pages or sections of the current page Img tags place images on the page Comments in HTML look like <! This is a comment --> HTML Input Tags To create locations for users to input information, there are different types of input tags. In these examples, the different elements have specific meaning: Element type name size value id Explanation What type of interface to use text, date, check box, etc. The field of data to be displayed and entered Length of entry box in characters (rough value) Default value (for check box, radio and select options, this is the value stored in the database) Label for the input (optional but recommended, useful for JavaScript) For a text entry box, use the following code: <input type="text" name="[01]first_name" value="" size="25" maxlength="50" id="firstname"> For a check box: <input type="checkbox" name="[01]family_rep" value="1"> Copyright 2012 Pearson Page 5

6 For date entry: <input class="psdatewidget" type="date" name="[01]dob" size="11" value="" id="[01]dob" /> For a text entry window: <textarea name="[01]alert_medical" rows="4" cols="40"> </textarea> (Rows and columns define the size of the box in character size. This is a rough value and does not limit the amount of data that can be contained.) For radio boxes (only one of the set can be selected) <input type="radio" name="[01]fedethnicity" value="1">yes <input type="radio" name="[01]fedethnicity" value="0">no <input type="radio" name="[01]fedethnicity" value="2">decline For a selection menu: <select name="[01]gender"> <option value=""></option> <option value="m">male</option> <option value="f">female</option> </select> Tables, Table Headers and Table Rows Tables are used so frequently on PowerSchool pages that some special attention should be paid to how they are formatted and styled. First, CSS and JavaScript can define the style and function of parts of the table more clearly if you define those parts properly. In most circumstances, the <thead> and <tbody> tags are not necessary for a table to load correctly, but when used, they provide more refined control, and are required by some JavaScript code. Activity 2 Add Some Tags 1. In Custom Page Manager, navigate to the file you created in Activity 1 in your numbered user folder 2. Place your cursor after the comment and before the <div class= box-round > tag, and create h1 through h6 tags and two p tags, using the options in the toolbar. As you create each tag, change the text to state which tag was used for that line Your finished version should look like:  <h1>head 1</h1> <h2>head 2</h2> <h3>head 3</h3> <h4>head 4</h4> <h5>head 5</h5> <h6>head 6</h6> <p>this is the first paragraph tag</p> <p>this is the second paragraph tag</p> <div class="box-round"> 3. Publish your page, and then view it to troubleshoot and see what the different tags do 4. Change the existing h2 tag inside the <div class= box-round > section to say Tags Inside the Box 5. Copy the 8 lines you just entered in step 2 and paste them inside the <div class= boxround > section, replacing the 3 lines of the <p> </p> section Copyright 2012 Pearson Page 6

7 Your finished version should look like this: <div class="box-round"> <h1>head 1</h1> <h2>head 2</h2> <h3>head 3</h3> <h4>head 4</h4> <h5>head 5</h5> <h6>head 6</h6> <h2>tags Inside the Box</h2> <p>this is the first paragraph tag</p> <p>this is the second paragraph tag</p> </div> 6. Publish your page, and then view it to troubleshoot and see what the different tags do How do the tags differ in appearance? Why is that? 7. Modify the second p tag by adding a span tag and some text, to look like this: <p>this is the second Paragraph with some <span class="bold">bold text added in</span></p> 8. Publish your page, and then view it to troubleshoot and see what this changed 9. Below the second p tag, insert a br tag and an unordered list from the toolbar 10. Inside the unordered list, add three list items from the toolbar, replacing the text in each tag 11. After the unordered list s end tag, insert a br tag and an ordered list from the toolbar 12. Inside the ordered list, add three list items from the toolbar, replacing the text in each tag Your finished version should look like this: <p>this is the second Paragraph with some <span class="bold">bold text added in</span></p> <br /> <ul class="text"> <li>first List Item</li> <li>second List Item</li> <li>third List Item</li> </ul> <br /> <ol class="text"> <li>first List Item</li> <li>second List Item</li> <li>third List Item</li> </ol> </div> 13. Publish your page, and then view it to troubleshoot and see what the different tags do 14. After your ordered list and before the </div>, add another br tag and then insert an a tag from the toolbar The a tag will ask you for a link address type /admin/00/mypage.html, replacing 00 with your number 15. Replace Your text to link... with Refresh My Page Copyright 2012 Pearson Page 7

8 Your finished a tag should look like: <a href="/admin/00/mypage.html">refresh My Page</a> 16. Below the a tag, insert a table, using the Object Templates button on the toolbar 17. Publish your page, and then view it to troubleshoot and see what the different tags do Cascading Style Sheets With PowerSchool 7, most of the look and feel is now controlled by CSS. To create custom pages with ease, you will want to have a good understanding of CSS. In the early days of HTML, the browser handled formatting and HTML defined the content. That was fine until new HTML tags were added that controlled formatting such as <font>, which made it difficult to separate content from format. For this reason, World Wide Web Consortium created the concept of styles. Created as a solution to a problem, Cascading Style Sheets (CSS) have been part of the web since But, CSS is often overlooked. Simply stated, style sheets define how HTML elements are displayed. While style and layout may still be controlled within the HTML document, using a style sheet defines the style and layout for an entire website in just one space. The sheet eliminates the need to create HTML code on every page, and you can make changes to style and layout by modifying a single file. This file is stored on the server, then referenced within the HTML document in the following form: <link href="/images/css/screen.css" rel="stylesheet" media="screen"> Styles can be defined in multiple places. In priority order, the first is inside the HMTL element, called inline style. The second is in the head of the HTML document, referred to as the internal style. The third assigns styles using the CSS file stored in a separate location, called external style. Finally, style is defined in the default settings of the browser. The styles are in ranked order of precedence. For example, when you define an inline style as part of the HTML element, then that style will override the external style sheet. The exception to this rule is when you place the external style sheet link below the internal style sheet in the head, then the external style sheet overrides the internal one. This hierarchical set of style rules is why they chose the term Cascading. CSS syntax has two parts: a selector and a declaration. Use curly brackets to contain the declaration, which is made up of property and value followed by a semicolon (;). The selector is normally the HTML element that you define. The property is the attribute that you wish to change. The value is what you set the attribute to. For example, body{color: #333333;} defines the color of the text as dark gray for all body elements in the HTML document that are not defined by another style. If the value contains multiple words, put quotes around the text; for example: body {font-family: Arial Narrow ;} To specify more than one property use a semicolon to separate each property from the others, for example: body { font-family: Arial Narrow ; color:#333333; } Separating the style into separate lines is not necessary, but makes it more readable. Using Class Selectors A style can be defined to apply to all elements with a specific class. The style is defined with a period at the beginning and is called a class selector. Class selectors can define different styles for the same element. For example, if you need two different types of headers, you could define them as follows: h1.black {color:#000000;} h1.blue {color:#000080;} Copyright 2012 Pearson Page 8

9 By using the period, there are now two different h1 styles. To use these classes in the HTML, you would reference them like this: <h1 class= black >This is black text</h1> <h1 class= blue >This is blue text</h1> Also, omit the tag name in the selector to define a style that can be used by all HTML elements that have a certain class, such as:.bold { font-weight: bold; } By using.bold, the style sheet is assigning a class selector for all HTML elements with the class bold. This means wherever the code class= bold is found the font-weight will be bold. Activity 3 Add Some Style 1. In Custom Page Manager, navigate to the file you modified in Activity 2 in your numbered user folder 2. Place your cursor inside the <li> tag for the second item in the unordered list and modify it <li style="font-size:35px"> 3. Publish your page, and then view it to troubleshoot and see what this change did 4. Modify the <li> tag for the second item in the ordered list to say <li class= mystyle > 5. Publish your page, and then view it to troubleshoot and see what this change did Did anything change? 6. In the head section, after the print.css line, type the following code: <style type="text/css">.mystyle { </style> } color:#ffd700; background:#800080; 7. Publish your page, and then view it to troubleshoot and see what this change did Does that look correct? 8. Remove the class= mystyle from the <li> and add it to the <ol> tag instead: <ol class= text mystyle > 9. Publish your page, and then view it to troubleshoot and see what this change did Add additional styles. To the <ul class= text > tag, add the following tags, one at a time, and test and see the changes: <ul class="text red matrix_7 bold right matrix_8"> Copyright 2012 Pearson Page 9

10 JavaScript JavaScript is a scripting language that provides the interactivity in web pages. You can find many examples of JavaScript on pages throughout PowerSchool. JavaScript contains functions, variables and very intricate punctuation involving commas, semicolons, single quotes, double quotes, curly braces and parentheses. When typing scripts, you need to make sure you use the correct one or your script will not work. PowerSchool includes an open source library of scripts called jquery, which simplifies many functions on html pages. By leveraging the work of many programmers, it is much easier to create new interactivity. This class will only give you a brief preview of what JavaScript can do for your custom pages. If you want to learn more about JavaScript, look into the JavaScript: Foundations class. Activity 4 Pour Some JavaScript In 1. In Custom Page Manager, navigate to the file you modified in Activity 3 in your numbered user folder 2. Place your cursor before the </head> tag and type <script type="text/javascript"> function reloadpage() { window.location.reload() } </script> 3. Place your cursor after the </h2> tag in the <div class= box-round > area and type the following, replacing 00 with your number: <a href="/admin/00/replace.html" id="replace" class="replacenext button" title="change Stuff" >Let me see a table, please</a> <span id="replace"><br /> And put it where this text is </span> 4. Publish your page 5. Click + Add > + Create File 6. In the Name field, enter replace.html 7. Click Submit and then click OK 8. Make sure that your new page is selected in the Site Structure list and then insert a table, using the Object Templates button on the toolbar 9. Edit the text between the caption tags to read: <CAPTION>OK, here you go</caption> 10. After the </table> tag, type the following code: <div class="button-row"> <button name="btnsubmit" id="btnsubmit" type="submit" onclick="reloadpage()">changed my mind</button> </div> 11. Publish your page 12. Refresh your mypage.html window and test out the new functionality, troubleshooting if necessary Copyright 2012 Pearson Page 10

11 What happens when you click the new button? How is it happening? PowerSchool Codes Give Me Data! PowerSchool codes provide access to data and functions created within PowerSchool. You have learned about the different types of codes that are used, such as data tags, functions, X codes, wildcards and text tags. Now add a wildcard to your page to see how it works. Activity 5 Add a Wildcard 1. In Custom Page Manager, navigate to the file you modified in Activity 4 in your numbered user folder 2. Place your cursor before the final </div> tag and type ~[wc:admin_startpage_whats_new] 3. Publish your page 4. Refresh your mypage.html window and view the change, troubleshooting if necessary Activity 6 Modify an Existing Page Your school uses only a few of the fields on the Other Information page: the Primary Language Code, Secondary Language Code, PHLOTE, Exclude From Class Ranking and the Other Alert fields. All of the other fields are distracting your enrollment staff and making them worried that that they haven't filled everything in. Remove the fields that your staff doesn t use from the page. For this task, you are going to make a copy of the Other Information page to modify. In addition, making a copy is a good habit to start making now. Typically, you do not want everyone to see a customization while you are in the process of working on it. Modifying a copy first ensures you can finalize your changes before letting everyone use them. 1. Return to the Custom Page Manager 2. In the Site Structure menu, navigate to admin > students > misc.html 3. Click the Original Page tab, and copy all of the code in the pane 4. Navigate back to your numbered folder 5. Click + Add > + Create File 6. In the Name field, enter misc.html Copyright 2012 Pearson Page 11

12 7. Click Submit and click OK 8. Select your misc.html file, and click the Customized Page tab, and paste the code from the original misc.html page 9. Click Save to create your copy of the page 10. Scroll through the code on the page until you find the HTML tag for a table: <table border="0" cellspacing="0" cellpadding="4"> 11. Place your cursor at the beginning of the next row which is the start of a table row tag: <tr bgcolor="#edf3fe"> 12. Look for the first tag that ends the table row: </tr> This is one row of the table. 13. Using the </tr> tag as a guide, count out three rows and select them 14. Delete the three rows Note: You deleted only the display of those fields on this page. The fields still exist in your database along with any student data they contained. 15. Click Publish 16. To view your changes, go back to the PowerSchool Start Page in your original browser window or tab 17. Click All in the Search area 18. Select any student 19. Find the Other Information link, but rather than clicking it, right-click and select the option to Open in a New Window or Open in a New Tab The exact menu names may be different depending on your browser, but they should be similar. Copyright 2012 Pearson Page 12

13 20. In the URL, modify the students portion of the path to be your numbered folder For example, if the URL was and your number was 00, you would change it to Summary The ability to customize PowerSchool to your specific district s needs is a powerful tool to making PowerSchool even more useful to your users. In this class, you have only started to scratch the surface of the different languages you need to learn to create custom pages. You have learned about: HTML The structure of a page CSS The style and look of the page JavaScript The interactive layer PowerSchool Codes The data and functions that make up PowerSchool To learn more about Customization, take the PSU Customization: Introduction class. To learn more about JavaScript take the PSU JavaScript: Foundations class. Copyright 2012 Pearson Page 13