Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Self Service UI
Harpreet Kataria and Erik Clarizio
Introductions
Harpreet Kataria
Email: hkataria@redhat.com
Github: h-kataria
Erik Clarizio
Email: eclarizi@redhat.com
Githu...
Agenda
Self Service support in the Operations UI (Screenshots)
New Self-Service UI (Demo)
Dialogs (dynamic, etc) & Custom ...
Services in Operations UI
Dialogs, Catalog Items, Catalogs (For Admins & users with privileges)
Service Catalogs
Ordering ...
Service Dialog - Summary
Catalog Item - Summary
Service Catalogs - Table view
Service - Ordering a Service
Service - Request details
Services - Table view
Service - Detail view
Service - Edit/Remove
Service - Reconfigure
Service - Retire
Service - Set Ownership
Self-Service UI
New UI Architecture
Design Goals
Patternfly/Bootstrap Styling
Dashboard
Remove/Edit Services
Retire
Reconf...
SSUI: New UI Architecture & Design Goals
Using AngularJS & REST vs AJAX & Ruby on Rails
All form validation and form chang...
Patternfly styling
Search filtering
List view sorting
Dashboard
Clickable links to items with their counts on the Dashboard as well as in left
navigation area
Shopping Cart
Multiple Service Items can be added to shopping cart
Items stay available in the user’s shopping cart upon r...
Requests - List view
Multiple requests generated for each item in shopping cart
Self Service UI - Demo
Dialogs (dynamic) & Custom Buttons Overview
Dialogs with dynamically refreshing fields
Custom Buttons on services, which c...
Dynamic dialogs
All of the dialog types support the dynamic property
Fields can be set to trigger auto-refreshes and also ...
Custom Buttons
Can be generic to all services or specific per service
Leverages dialogs
SSUI - Dialog and Custom button demo
Future - Service Designer and Dialog Editor
Order History
Wish List
Tagging support for Services
About Dialog
More Pattern...
Q & A
Upcoming SlideShare
Loading in …5
×

Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

770 views

Published on

The Self-Service UI by Hapreet Kataria and Erik Clarizio at ManageIQ Design Summit 2016

Self-Service UI demo: https://youtu.be/gPpqfA3xqW4
SSUI Dialog and Custom Button demo: https://youtu.be/LNsLY9lbGFs

Published in: Technology
  • Be the first to comment

Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

  1. 1. The Self Service UI Harpreet Kataria and Erik Clarizio
  2. 2. Introductions Harpreet Kataria Email: hkataria@redhat.com Github: h-kataria Erik Clarizio Email: eclarizi@redhat.com Github: eclarizio
  3. 3. Agenda Self Service support in the Operations UI (Screenshots) New Self-Service UI (Demo) Dialogs (dynamic, etc) & Custom Button support in SSUI (Demo) Futures (SDUI and Dialog Editor demos) (10 mins total)
  4. 4. Services in Operations UI Dialogs, Catalog Items, Catalogs (For Admins & users with privileges) Service Catalogs Ordering Services Edit/Remove Services Reconfigure Retire Set ownership Tag Services
  5. 5. Service Dialog - Summary
  6. 6. Catalog Item - Summary
  7. 7. Service Catalogs - Table view
  8. 8. Service - Ordering a Service
  9. 9. Service - Request details
  10. 10. Services - Table view
  11. 11. Service - Detail view
  12. 12. Service - Edit/Remove
  13. 13. Service - Reconfigure
  14. 14. Service - Retire
  15. 15. Service - Set Ownership
  16. 16. Self-Service UI New UI Architecture Design Goals Patternfly/Bootstrap Styling Dashboard Remove/Edit Services Retire Reconfigure Set Ownership Shopping Cart (New feature)
  17. 17. SSUI: New UI Architecture & Design Goals Using AngularJS & REST vs AJAX & Ruby on Rails All form validation and form change checking is being done on client side No more round trips to server on each user interaction with form fields, making the user experience better and faster. With Angular based forms, we no longer have to save large amounts of data in the session to be used back and forth during transactions
  18. 18. Patternfly styling Search filtering List view sorting
  19. 19. Dashboard Clickable links to items with their counts on the Dashboard as well as in left navigation area
  20. 20. Shopping Cart Multiple Service Items can be added to shopping cart Items stay available in the user’s shopping cart upon re-login Items can be removed from the cart Shopping cart can be cleared out (remove all items from cart)
  21. 21. Requests - List view Multiple requests generated for each item in shopping cart
  22. 22. Self Service UI - Demo
  23. 23. Dialogs (dynamic) & Custom Buttons Overview Dialogs with dynamically refreshing fields Custom Buttons on services, which can also leverage dialogs Demo
  24. 24. Dynamic dialogs All of the dialog types support the dynamic property Fields can be set to trigger auto-refreshes and also listen to auto-refreshes
  25. 25. Custom Buttons Can be generic to all services or specific per service Leverages dialogs
  26. 26. SSUI - Dialog and Custom button demo
  27. 27. Future - Service Designer and Dialog Editor Order History Wish List Tagging support for Services About Dialog More Patternfly components (Kebab menus, wizards) Service Designer Dialog Editor
  28. 28. Q & A

×