Action Request System 7.6.04 Example Education Console Quick Tour Dave Sulcer

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

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)

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.