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. formcentric)
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

Copyright 10/8/16 BMC Software, Inc

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)

Copyright 10/8/16 BMC Software, Inc

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
- 10/8/16
Copyright
BMC Software, Inc
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

Copyright 10/8/16 BMC Software, Inc

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
- 10/8/16 BMC Software,itself
after switching to other workspace
Copyright Collapses
Inc
-

Student Workspace
Like other
workspaces,
this is a
separate form
loaded into
view field as
inline (part of
same web
page)

Xample:StudentWorkspace loaded
into workspace area view field

The embedded
form contains
panel holder to
switch between
enrollments
and browse
Also contains
hidden panel for
comments
Copyright 10/8/16 BMC Software, Inc

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

Copyright 10/8/16 BMC Software, Inc

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

Copyright 10/8/16 BMC Software, Inc

Student Workspace: Browse Catalog

Cell-based table to give graphical representation
Expandable
panel for
Search
filtering
Autocompletion
enabled based
on data source
EXTERN query
for table
Context menu
to enroll

Copyright 10/8/16 BMC Software, Inc

10

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 style
form)
Float
Dialog:
Blocks other
input from
entire page
Centers
within page
View field with
template,
embedded map
URL
Copyright 10/8/16 BMC Software, Inc

11

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

Copyright 10/8/16 BMC Software, Inc

12

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
Copyright 10/8/16 BMC Software, Inc

13

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
Copyright 10/8/16 BMC Software, Inc

14

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

Copyright 10/8/16 BMC Software, Inc

15

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
Copyright 10/8/16 BMC Software, Inc

16

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

Copyright 10/8/16 BMC Software, Inc

17

Architecture
Data
Model
Xample:
Classes

Xample:
Enrollments

User Interface
xample:console
Xample:
StudentWorkspace

Xample:
InstructorWorkspace

Builder
Enrollments

Description
Students

Xample:
Class Review
Xample:
Class
Review
Details Join

Xample:
AdminWorkspace
Xample:
ClassBuilder
Manage

Browse

Comments

Xample:
StudentInfo
Reviews

Xample: Classes
Xample:
Enrollments
Xample: Cities
Reports

AR System
Report
Console

Xample:
Cities

Copyright 10/8/16 BMC Software, Inc

18

Learn more at www.bmc.com

Copyright 10/8/16 BMC Software, Inc

19