Action Request System 7.6.04 Example Education Console

1. Action Request System 7.6.04Example Education Console Quick Tour Dave Sulcer

2. Overview • A small sample application that demonstrates some of the new UI capabilities of AR System • Highlights the “single page” approach (vs. “form-centric”) • This demo vs. “uidemo” • Focus is on integrating features together into UI design patterns, not exhaustive demonstration of each feature • Utilizes UI features introduced in earlier versions – 7.5, 7.6.03, as well as 7.6.04

3. Education Portal Concept for Demo • Use Cases • Students • Browse for classes and enroll • View upcoming enrollments and withdraw • View comments about class and add comments • Instructors • View their classes • List of students enrolled, with grades and view of courseload • View report of ratings for their classes • Administrators • Data access for classes, enrollments, reviews, cities • Build a new class for the catalog • Ad-hoc reporting • Demo Design • “Workspaces” for different roles (Student, Instructor, Administrator) • Page is composed of forms loaded into a framework as needed • Data based on Sample:Classes domain from earlier sample • Domain objects: Classes, Instructors, Enrollments, Reviews, Cities • Is copy of Sample:Classes forms (“Sample” becomes “Xample”) to avoid conflicts • Available as its own definition file as a deployable application (contains its own data). Import as deployable application (requires 7.6.04)

4. Highlighted Features • From 7.6.04 • Managing forms within view fields as “inline” components • Floating panels • Lightweight popup dialog • Table Context Menu • Vertical Text • From 7.6.03 • Drag and Drop • Rich Text editing • Web reporting • From 7.5 • Resizable (fill) layout • Collapsible panel holders • Cell-based table • Templates • Gradient / semi-transparent color • Rounded corners • Auto-completion

5. Page “Framework” • View is “Fill” layout • Nested panel holders create the framework for dynamic content • Fixed height headers / footers • Slack allocated to main workspace area to grow and shrink • The dynamic area shows forms swapped into view by workflow

6. Workspace Picker • Uses “Floating Panel” feature (7.6.04) • Actually a floating panel holder to get growing/shrinking effect • Float style is “modeless” • Means it is XY positioned • Does not stop work in the page • Right panel • contains overlapping chevron buttons, managed by workflow • Vertical text “Workspace” • Left panel • initially collapsed • Background is semi-transparent • Image Buttons are PNG images with alpha transparency • Workflow causes switching of panels in workspace area, and loading of the form for the first visible • Collapses itself after switching to other workspace

7. Student Workspace • Like other workspaces, this is a separate form loaded into view field as “inline” (part of same web page) • The embedded form contains panel holder to switch between “enrollments” and “browse” • Also contains hidden panel for comments Xample:StudentWorkspace loaded into workspace area view field

8. Student Workspace - Enrollments • Cell-based table to display enrollments for the current user • Comments generated by workflow as HTML in a view field (using multiple templates) • Context menu attached to rows of table • For enrollments, triggers “Withdraw” workflow

9. Student Workspace: Review Comments (Rich Text) • For input, “Add a Review” causes panel to show with RTF char field. • This captures user input as HTML which can then be rendered back in the comments view field • Rating stars accomplished by • embedded HTML / Javascript in a view field • Workflow events used to communicate rating back and forth

10. Student Workspace: Browse Catalog • Cell-based table to give graphical representation • Expandable panel for “Search” filtering • Auto-completion enabled based on data source • EXTERN query for table • Context menu to enroll

11. Student Workspace: Class Details • Floating panel shows class details without launching a separate window • This is not an open-window action (uses content from same form) • Float style “Dialog”: • Blocks other input from entire page • Centers within page • View field with template, embedded map URL

12. Instructor Workspace • Cell-based table used for class list • Detail information in collapsible panels • Description uses same template from class detail popup • Students is List-view table with color coded grades • Ratings uses embedded Web Report

13. Instructor Workspace – Student Information • Invoked by click on Student image button in table • Looks and behaves similarly to floating panel • Is actually separate form via Open Window / Dialog action with “Popup” option • View field used for photo

14. Instructor Workspace – Embedded Ratings Report • “Ratings”, when expanded: • runs Web Report in view field • takes parameters from currently selected class • In Report form, marked as “Visible in Console” = false • Report viewer (see below) supports all functions as if running in reporting console – e.g. export to desktop) Export to PDF Export to Excel

15. Administrator Workspace • Vertical nav bar that forms into view field on the right • Organized by data type • Standard data forms with web toolbar for • Classes • Cities • Reviews • Special “Build a Class” feature • Embedded Type-specific Reporting Console

16. Administrator Workspace – Build a Class • Designed as a demo of drag/drop capability combined with HTML template • Multiple drag sources organized in selector on left (nav bar + tree fields) • Single drop target • On Drop, workflow populates hidden fields then refreshes template • Create Class uses hidden fields to push a new entry

17. Administrator Workspace – Embedded Reporting • Demonstrates little known capability – opening the Web Reporting console in a form-specific mode • Achieved by setting field 93992 on AR System Report Console in Open Window Action • Choice of Classes or Enrollments • Full console features: • View / Run reports • Design new reports

18. Architecture Data Model User Interface xample:console Xample: AdminWorkspace Xample: StudentWorkspace Xample: InstructorWorkspace Builder Description Enrollments Students Manage Browse Xample: Classes Xample: StudentInfo Xample: ClassBuilder AR System Report Console Xample: Enrollments Xample: Cities Reviews Comments Reports Xample: Class Review Details Join Xample: Enrollments Xample: Class Review Xample: Classes Xample: Cities