UI Examples

The pages in PowerSchool are constructed using a standardized set of HTML tags and styles using CSS. These pages provide a reference guide so that you can more easily construct and modify your custom pages. Reusing these design patterns not only makes custom page development easier, it helps you to learn to use new pages by providing a familiar look and feel.

Note: For more information about custom web pages, see Custom Web Pages.

Access UI Examples via PowerSchool

1. On the start page, enter /admin/ui_examples/home.html in the Address field.
2. Press ENTER or RETURN. The UI Examples page appears.

3. Use the following table to assist you in constructing and modifying your custom HTML pages:

   Link	Description
   Admin Page	Click to view an overview of the Admin page structure.
   Teacher Page	Click to view an overview of the Teacher page structure.
   Parent Page	Click to view an overview of the Parent page structure.
   The Content Section	Click to view information about how to code the content area.
   Tables	Click view information about how to code tables in PowerSchool.
   Static Tabs	Click to view information about how to code tabs in PowerSchool.
   Buttons	Click to view information about how to code buttons in PowerSchool.
   Tooltips	Click to view information about how to code tooltips in PowerSchool.

4. Use the following table to assist you in constructing and modifying your custom JavaScript pages:

   Link	Description
   Double Click Prevention	Click for information about double click prevention.
   Calendar Popup	Click for information about calendar popups.
   Dialog Popups	Click for information about dialog popups.
   Dynamic Tabs	Click for information about dynamic tabs.
   Collapsing boxes	Click for information about collapsible boxes.

5. Use the following table to assist you in constructing and modifying your custom Example pages:

   Link	Description
   UI Live Example	Click to view a page that has a near complete collection of all the UI elements provided in PowerSchool.