This is the complete listing of available modules. 1 - Introduction to Joget Workflow 2 - Setting up Joget Workflow 3 - Designing your first Process on Joget Workflow 4 - Localizing your Joget Workflow 5 - Designing your first Form on Joget Workflow 6 - Using your first Process Tool – Email 7 - Designing your first Datalist on Joget Workflow 8 - Designing your first Userview on Joget Workflow 9 - Hash Variable 10 - Permission Control 11 - 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 a Plugin 18 - Integrating with External System 19 - Doing more with your Process Design 20 - Basic System Administration 21 - Userview Key 22 - Best Practices on Application Building - You may checkout the training screencast of this training at http://www.joget.org/joget-workflow-v4-training/

1. All Rights Reserved © Joget Inc
Joget Workflow v4
Designing your first Userview
http://facebook.com/jogetworkflow
http://twitter.com/jogetworkflow
Last Revised on March 2015Joget 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’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 Enterprise theme
Joget Inc Internal Use Only

10. All Rights Reserved © Joget Inc
Plugin Types
Joget Workflow
Form
Builder
Datalist
Builder
Workflow
Engine
Userview
Builder
- APP -
Form Builder
• Form Element
• Form Permission
• Form Load Binder
• Form Options Binder
• Form Store Binder
• Form Validator
Workflow Engine
• Deadline
• Process Participant
• Process Tool
Datalist Builder
• Datalist Action
• Datalist Binder
• Datalist Column
Formatter
• Datalist Filter Type
Userview Builder
• Userview Menu
• Userview Permission
• Userview Theme
App Level
• Audit Trail
• Hash Variable
System Level
• Directory Manager
Joget Inc Internal Use Only

11. 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

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

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

14. All Rights Reserved © Joget Inc
Userview Category
• Items are organized by Category.
• Add 2 new Categories.
Joget Inc Internal Use Only

15. All Rights Reserved © Joget Inc
Integrate HTML Page into Userview
• Add “HTML Page” as the first element in the menu.
Joget Inc Internal Use Only

16. All Rights Reserved © Joget Inc
Integrate HTML Page into Userview
• The HTML Page element will serve as the landing page of
the portal.
Joget Inc Internal Use Only

17. All Rights Reserved © Joget Inc
Integrate Inbox into Userview
• Add “Inbox” and “Run Process” elements into the designer to
facilitate the Workflow process.
Joget Inc Internal Use Only

18. All Rights Reserved © Joget Inc
Integrate Inbox into Userview
• Custom ID – Link name ( yourDomain.com/customId )
• Label – Label to be shown in sidebar
Custom ID must
be unique
Joget Inc Internal Use Only

19. All Rights Reserved © Joget Inc
Integrate Run Process into Userview
• Select Leave Application Process and assign a Custom ID
Joget Inc Internal Use Only

20. All Rights Reserved © Joget Inc
Customize Userview settings
• Customize look and feel of the Userview.
Joget Inc Internal Use Only

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

22. 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.
• You must first publish the App first.
Joget Inc Internal Use Only

23. All Rights Reserved © Joget Inc
Publish the App
• The App must be published first before end users can
access it.
Joget Inc Internal Use Only

24. All Rights Reserved © Joget Inc
Run the App
Joget Inc Internal Use Only

25. All Rights Reserved © Joget Inc
Run “Apply Leave”
Joget Inc Internal Use Only

26. 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

27. 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

28. 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

29. 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

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

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

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