1. Action Request System 7.6.04 Example 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, , as well as

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 )

4. Highlighted Features From 7.6.04 From 7.6.03 From 7.5
Managing forms within view fields as “inline” components
Floating panels
Lightweight popup dialog
Table Context Menu
Vertical Text
From
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 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: Classes
Xample: StudentWorkspace
Xample: InstructorWorkspace
Xample: AdminWorkspace
Xample: Enrollments
Builder
Enrollments
Description
Xample: ClassBuilder
Students
Xample: Class Review
Manage
Browse
Xample: StudentInfo
Xample: Classes
Xample: Enrollments
Xample: Class Review Details Join
Comments
Reviews
Xample: Cities
Reports
AR System Report Console
Xample: Cities

19. This slide is designed to be an opening or closing slide
This slide is designed to be an opening or closing slide. This will allow the presenter to have a presentation cued up in slideshow mode without being on the title slide. The audience can take their seats, leave, or have open discussion with this slide up.