Post on 18-Jan-2017
All Rights Reserved © Joget Inc
Joget Workflow v5
Designing your first Userview
http://facebook.com/jogetworkflowhttp://twitter.com/jogetworkflow
Last Revised on May 2016Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Prerequisites
• Created Process, Form, and Datalist
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Content
1. Introduction to Userview Builder2. Designing your first Userview
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Chapter 1
Introduction to Userview Builder
Joget Inc Internal Use Only
All Rights Reserved © Joget IncJoget Inc Internal Use Only
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
All Rights Reserved © Joget Inc
Userview Builder
• Userview elements. • Each element is a plugin.• Drag-and-drop.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Userview Builder Elements
• Some available elements:-– Form– HTML Page– Inbox– Link– List– Run Process
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Userview Builder
• Sample Userview using the Corporati theme
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Userview Builder
• Sample Userview using the V5 Janux theme
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Plugin Types
Joget Inc Internal Use Only
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
All Rights Reserved © Joget Inc
Chapter 2
Designing your first Userview
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Create New Userview
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Userview Category
• Items are organized by Category. • Add 2 new Categories – Home, Leave Application
Joget Inc Internal Use Only
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
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
All Rights Reserved © Joget Inc
Add Run Process into Userview
• Add Run Process into Leave Application category.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Integrate Run Process into Userview
• Set the appropriate label.• Select Leave Process in Process.
Joget Inc Internal Use Only
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
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
All Rights Reserved © Joget Inc
Preview Userview
Joget Inc Internal Use Only
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
All Rights Reserved © Joget Inc
Publish the App
• Click on Version/Publish button, select the version to publish.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Launching the Published App
• Click on Launch under Userview pane.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Launching the Published App
• One can also access it through the App Center itself.
Joget Inc Internal Use Only
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
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
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
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
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
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
All Rights Reserved © Joget Inc
Module Review
1. Introduction to Userview Builder2. Designing your first Userview
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Recommended Further Learning
• Hash Variables• Permission Control
Joget Inc Internal Use Only
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