1 / 19

Action Request System 7.6.04 Example Education Console

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”

vernon-aguilar
Télécharger la présentation

Action Request System 7.6.04 Example Education Console

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related