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

1. The Self Service UI
Harpreet Kataria and Erik Clarizio

2. Introductions
Harpreet Kataria
Email: hkataria@redhat.com
Github: h-kataria
Erik Clarizio
Email: eclarizi@redhat.com
Github: eclarizio

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. 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. Service Dialog - Summary

6. Catalog Item - Summary

7. Service Catalogs - Table view

8. Service - Ordering a Service

9. Service - Request details

10. Services - Table view

11. Service - Detail view

12. Service - Edit/Remove

13. Service - Reconfigure

14. Service - Retire

15. Service - Set Ownership

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. 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. Patternfly styling
Search filtering
List view sorting

19. Dashboard
Clickable links to items with their counts on the Dashboard as well as in left
navigation area

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. Requests - List view
Multiple requests generated for each item in shopping cart

22. Self Service UI - Demo

23. Dialogs (dynamic) & Custom Buttons Overview
Dialogs with dynamically refreshing fields
Custom Buttons on services, which can also leverage dialogs
Demo

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. Custom Buttons
Can be generic to all services or specific per service
Leverages dialogs

26. SSUI - Dialog and Custom button demo

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. Q & A