Building a Better UI

LEAP Click to edit Master subtitle style

Housekeeping Items
Feedback Flag: Change your feedback flag to purple if you have a question

Session Recordings and Documents: All documents, including this presentation and a recording of this session, will be available for download on the LEAP system

22

Overview
Why is this important? What we will cover

Flows and their impact on presentation Features within PRPC Usability Alternative Solutions

Post-Assignment

Building a Better UI - Importance

How many people have been on a project where clients have been hung up on the presentation more than the functionality of their system? Who has had a client who has raised concerns about our User Interface? Who has had the ability to use the new 5.4 features at a client site? Perceived Weakness First Impression of Pega to most end users Most of our answers/features are new and not everyone has had the chance to use them. Comments/Questions?

Advanced Flow Design

Standard Flows vs. Screen Flows

Whats the difference? When would you want to use a screen flow?

Advanced Flow Design

Screen Flows

Limited shapes Ability to use specialized harnesses to navigate Next and Back

TreeNavigation TabbedScreenFlow PerformScreenFlow

Can only route to a single user at the beginning of process. All assignments assumed to be worked on by a single user.

Define a single harness for entire screen flow (not at the assignment level) Can wait till end of screen flow to commit changes.

Advanced User Interface Topics

Client Side Validation

Events
o o o

ONCHANGE ONCLICK ONBLUR Hide/Show Elements use of divs and JavaScript Refresh Section can run an activity before refreshing the section (will not refresh a parent section) csvalid.js pega_validators.js Build your own custom JavaScript and add Validate rule on property form

Actions
o o

JavaScript validations
o o o

UI and Validation
Validation can run at different execution points within entry, what are they?

data

Client Side Validation rule on flow action Post processing in a activity You have 3 fields on a screen, 1 uses Client side validation, 1 is checked in a validate rule and the last is validated via a post activity. If you put invalid data in all 3 how many times will a user be prompted to fix their errors? And will all errors appear to the user simultaneously?

Example

5.4 User Interface Enhancements

Screen Flow Changes Rich Widget List allows you to embed elements such as List Views, Charts, List To List and AutoComplete Section rules can be passed parameters Multi Level Tabbed Harness Smart Labels SP2 Features

Accordion Column and Tab Repeats Auto Formatting Action Section Alternative Display of Default Flow Action

Nested Tab Layout

PRPC V5.4 supports Tabbed Harness for Screen Flows : TabbedScreenFlow Multiple Levels of Nesting are supported using Split For Each inside Screen Flows Harness takes in a parameter which allows the object to be saved at the very end

If checked, You can also pass in a parameter to check for errors at the last step

Nested Tab Layout

List To List Widget

List To List
Properties can be selectively copied to the target page which may or may not exist on the Clipboard from the source Dont use Declarative Pages to load Source

Auto-Complete Widget

Auto-Complete Widget
Results can be retrieved using an activity or a Declare Page Client side caching is supported for less volatile data

Error Message Customization

Error Message Customization

You can now control how errors are displayed at a form and at a property level at the Harness Level Supports Creating Custom Error Sections for customizing displays Field Level errors can have the Red X or Text next to the property.

Modal Popup Local Flow Actions

Modal Popup Local Flow Actions

5.4 supports the ability to create modal dialog boxes Modal popups block user interaction with the main workflow form Modal popups are only available for local flow actions which are displayed as buttons or icons Local Flow actions added to the Flows design tab and invoked through the pull down menu do not leverage Modal popups The Type of Button needs to be Local Action and a local action must be specified

Tabbed Repeating Layout

Tabbed Repeating Layout

Action Section

Branding / Skinning Wizard

5.4 now provides the ability to Skin your application using CSS stylesheets which can be automatically generated using a wizard based interface The Skinning wizard can be accessed from the Application>New->Skin menu A new look and feel can be quickly applied by modifying an existing portal to leverage the generated skin The wizard will create: Rule-Portal-Skin, 6 CSS style sheets (Rule-File-Text) and 2 portals : WorkManager and WorkUser

All are generated in the same ruleset

You can edit a skin once it is generated by the wizard CSS Stylesheets are IE 6/7 and FireFox compliant Consider using Microsoft IE CSS Toolbar or the CSS Feature in Firefox to identify which style affects what feature on the page

Branding / Skinning Demonstration

User Interface
Any questions on these features?

Usability Guardrails
Human Factors Review? Guardrails:

Be Consistent - use css for changes not inline styles all the time. Alignment and Whitespace Dont Ignore the End User involve them early, understand most are adverse to change, demonstrate power of PRPC Minimize Data Entry display for input only what is needed, incorporate auto formatting and lookups Customize Thoughtfully business and user requirements and not opinions should be the drvier Reduce Visual Clutter design in section rules, design for modularity Watch out for Excessive Clicking Balance Content and Navigation avoid mixing different styles (tree,tabs,etc) Test your Usability! build it into project plan. Less is More not every new feature needs to be included in your solutions.. But determine which help support intent driven processes

Alternative Solutions
Has anyone implemented any alternative UI solutions with PRPC?

True Headless JSP Tag Library IAC

IAC

2828

IAC
Notice any of the Human Factors Guardrails being broken?

2929

Building a Better UI
Summary

Flows and how they dictate presentation New Features available in 5.4 Usability Alternative Solutions

Post-Assignment (posted on LEAP Site)

Building a Better UI
Questions?