List of Modules 1-Introduction to Joget Workflow 2-Setting up Joget Workflow 3-Designing your first Process 4-Localizing your Joget Workflow 5-Designing your first Form 6-Using your first Process Tool 7-Designing your first Datalist 8-Designing your first Userview 9-Hash Variable 10-SLA and Deadlines 12-Version Control 13-Improving your Form design and Presentation 14-Introduction to Reporting 15-Introduction to Plugin Architecture 16-Preparing Development Environment 17-Building Plugins 18-Integrating with External System 19-Doing more with your Process Design 20-Basic System Administration 21-Best Practices on Application Building

1. All Rights Reserved © Joget Inc
Joget Workflow v5
Designing your first Userview
http://facebook.com/jogetworkflow
http://twitter.com/jogetworkflow
Last Revised on May 2016Joget Inc Internal Use Only

2. All Rights Reserved © Joget Inc
Prerequisites
• Created Process, Form, and Datalist
Joget Inc Internal Use Only

3. All Rights Reserved © Joget Inc
Content
1. Introduction to Userview Builder
2. Designing your first Userview
Joget Inc Internal Use Only

4. All Rights Reserved © Joget Inc
Chapter 1
Introduction to Userview
Builder
Joget Inc Internal Use Only

5. All Rights Reserved © Joget Inc
Joget Inc Internal Use Only

6. All Rights Reserved © Joget Inc
Userview Builder
• Application Front-end interface builder.
• Serves as the wrapper for forms, processes, data lists.
• Extensible functionalities through Joget Workflow’s plugin
architecture.
Joget Inc Internal Use Only

7. All Rights Reserved © Joget Inc
Userview Builder
• Userview elements.
• Each element is a plugin.
• Drag-and-drop.
Joget Inc Internal Use Only

8. All Rights Reserved © Joget Inc
Userview Builder Elements
• Some available
elements:-
– Form
– HTML Page
– Inbox
– Link
– List
– Run Process
Joget Inc Internal Use Only

9. All Rights Reserved © Joget Inc
Userview Builder
• Sample Userview using the Corporati theme
Joget Inc Internal Use Only

10. All Rights Reserved © Joget Inc
Userview Builder
• Sample Userview using the V5 Janux theme
Joget Inc Internal Use Only

11. All Rights Reserved © Joget Inc
Plugin Types
Joget Inc Internal Use Only

12. All Rights Reserved © Joget Inc
Chapter Review
• General understanding of the Userview Builder and its
functionality.
• General understanding on its elements and its
extensibility capability.
Joget Inc Internal Use Only

13. All Rights Reserved © Joget Inc
Chapter 2
Designing your first Userview
Joget Inc Internal Use Only

14. All Rights Reserved © Joget Inc
Create New Userview
Joget Inc Internal Use Only

15. All Rights Reserved © Joget Inc
Userview Category
• Items are organized by Category.
• Add 2 new Categories – Home, Leave Application
Joget Inc Internal Use Only

16. All Rights Reserved © Joget Inc
HTML Page as the first item
• When the Userview is loaded,
the first available (permissible)
item will be loaded automatically.
• HTML Page is recommended as
the first menu item to serve as
the landing page.
• It will be automatically added when a new Userview is created.
• You may edit as needed by clicking on Properties while hovering
over it.
• Reference:
http://dev.joget.org/community/display/KBv5/HTML+Page
Joget Inc Internal Use Only

17. All Rights Reserved © Joget Inc
Run Process Menu
• Run Process enables one to start a process instance from
the Userview.
• Reference:
http://dev.joget.org/community/display/KBv5/Run+Process+Menu
Joget Inc Internal Use Only

18. All Rights Reserved © Joget Inc
Add Run Process into Userview
• Add Run Process into Leave Application category.
Joget Inc Internal Use Only

19. All Rights Reserved © Joget Inc
Integrate Run Process into Userview
• Set the appropriate label.
• Select Leave Process in Process.
Joget Inc Internal Use Only

20. All Rights Reserved © Joget Inc
Custom ID for Userview Menu
• Assign a Custom ID. It is used to identify the link’s name.
• Custom ID is optional but it must be unique when set.
Joget Inc Internal Use Only

21. All Rights Reserved © Joget Inc
Add Inbox into Userview
• Add Inbox into Leave Application category.
• Configure it to show All Assignments.
Joget Inc Internal Use Only

22. All Rights Reserved © Joget Inc
Preview Userview
Joget Inc Internal Use Only

23. All Rights Reserved © Joget Inc
Publish the App
• With the Userview created, it is now ready for the prime
time.
• End users can now access them through this interface
when the App is made published.
• Note: Only one App version can be made published at any point of
time.
Joget Inc Internal Use Only

24. All Rights Reserved © Joget Inc
Publish the App
• Click on Version/Publish button, select the version to
publish.
Joget Inc Internal Use Only

25. All Rights Reserved © Joget Inc
Launching the Published App
• Click on Launch under Userview pane.
Joget Inc Internal Use Only

26. All Rights Reserved © Joget Inc
Launching the Published App
• One can also access it through the App Center itself.
Joget Inc Internal Use Only

27. All Rights Reserved © Joget Inc
Exercise: Run through the Process
• With the Userview created, run through the entire Leave
Application Process again by using solely, the Userview.
Joget Inc Internal Use Only

28. All Rights Reserved © Joget Inc
Exercise: Run through the Process
• Submit the form (which is part of the Process’s activity
flow) and continue on with the next assignment by going
to Inbox.
Joget Inc Internal Use Only

29. All Rights Reserved © Joget Inc
Exercise: Integrate DataList into Userview
• Add a List element into the Userview to incorporate
Datalist created earlier.
• Name it as “List All”.
Joget Inc Internal Use Only

30. All Rights Reserved © Joget Inc
Exercise: Add CRUD functionality
• Add a “CRUD” element into the Userview.
• Configure the newly added Userview item to use the list
created earlier and point to the appropriate form for
editing.
Joget Inc Internal Use Only

31. All Rights Reserved © Joget Inc
Exercise: Change Userview Theme
• At Userview Builder’s settings, change the Userview
Theme to a new look and feel.
• Remember to click “OK” after selecting a new theme.
• Preview.
Joget Inc Internal Use Only

32. All Rights Reserved © Joget Inc
Chapter Review
We have learnt to:
1. Create Data list and Userview.
2. Use Userview as application Front-end interface.
3. Integrate Datalist, Run Process, Inbox into Userview.
Joget Inc Internal Use Only

33. All Rights Reserved © Joget Inc
Module Review
1. Introduction to Userview Builder
2. Designing your first Userview
Joget Inc Internal Use Only

34. All Rights Reserved © Joget Inc
Recommended Further Learning
• Hash Variables
• Permission Control
Joget Inc Internal Use Only

35. All Rights Reserved © Joget Inc
Stay Connected with Joget Workflow
• http://www.joget.org
• http://community.joget.org
• http://twitter.com/jogetworkflow
• http://facebook.com/jogetworkflow
• http://youtube.com/jogetworkflow
• http://slideshare.net/joget
Joget Inc Internal Use Only