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.
All Rights Reserved © Joget Inc
Joget Workflow v4
Designing your first Userview
http://facebook.com/jogetworkflow
http://t...
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 Builder
2. Designing your first Userview
Joget Inc Int...
All Rights Reserved © Joget Inc
Chapter 1
Introduction to Userview
Builder
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Userview Builder
• Application Front-end interface builder.
• Serves as the wrapper for fo...
All Rights Reserved © Joget Inc
Userview Builder
• Userview elements.
• Each element is a plugin.
• Drag-and-drop.
Joget I...
All Rights Reserved © Joget Inc
Userview Builder Elements
• Some available
elements:-
– Form
– HTML Page
– Inbox
– Link
– ...
All Rights Reserved © Joget Inc
Userview Builder
• Sample Userview using the Enterprise theme
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Plugin Types
Joget Workflow
Form
Builder
Datalist
Builder
Workflow
Engine
Userview
Builder...
All Rights Reserved © Joget Inc
Chapter Review
• General understanding of the Userview Builder and its
functionality.
• Ge...
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.
Joget Inc Int...
All Rights Reserved © Joget Inc
Integrate HTML Page into Userview
• Add “HTML Page” as the first element in the menu.
Joge...
All Rights Reserved © Joget Inc
Integrate HTML Page into Userview
• The HTML Page element will serve as the landing page o...
All Rights Reserved © Joget Inc
Integrate Inbox into Userview
• Add “Inbox” and “Run Process” elements into the designer t...
All Rights Reserved © Joget Inc
Integrate Inbox into Userview
• Custom ID – Link name ( yourDomain.com/customId )
• Label ...
All Rights Reserved © Joget Inc
Integrate Run Process into Userview
• Select Leave Application Process and assign a Custom...
All Rights Reserved © Joget Inc
Customize Userview settings
• Customize look and feel of the Userview.
Joget Inc Internal ...
All Rights Reserved © Joget Inc
Preview Userview
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise: Run through the Process
• With the Userview created, run through the entire Leav...
All Rights Reserved © Joget Inc
Publish the App
• The App must be published first before end users can
access it.
Joget In...
All Rights Reserved © Joget Inc
Run the App
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Run “Apply Leave”
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise: Integrate DataList into Userview
• Add a List element into the Userview to incor...
All Rights Reserved © Joget Inc
Exercise: Add CRUD functionality
• Add a “CRUD” element into the Userview.
• Configure the...
All Rights Reserved © Joget Inc
Exercise: Change Userview Theme
• At Userview Builder’s settings, change the Userview
Them...
All Rights Reserved © Joget Inc
Chapter Review
We have learnt to:
1. Create Data list and Userview.
2. Use Userview as app...
All Rights Reserved © Joget Inc
Module Review
1. Introduction to Userview Builder
2. Designing your first Userview
Joget I...
All Rights Reserved © Joget Inc
Recommended Further Learning
• Hash Variables
• Permission Control
Joget Inc Internal Use ...
All Rights Reserved © Joget Inc
Stay Connected with Joget Workflow
• www.joget.org
• community.joget.org
• twitter.com/jog...
Upcoming SlideShare
Loading in …5
×

Joget Workflow v4 Training - Module 8 - Designing your first Userview

909 views

Published on

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/

Published in: Software
  • Be the first to comment

  • Be the first to like this

Joget Workflow v4 Training - Module 8 - Designing your first Userview

  1. 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. 2. All Rights Reserved © Joget Inc Prerequisites • Created Process, Form, and Datalist Joget Inc Internal Use Only
  3. 3. All Rights Reserved © Joget Inc Content 1. Introduction to Userview Builder 2. Designing your first Userview Joget Inc Internal Use Only
  4. 4. All Rights Reserved © Joget Inc Chapter 1 Introduction to Userview Builder Joget Inc Internal Use Only
  5. 5. All Rights Reserved © Joget Inc Joget Inc Internal Use Only
  6. 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. 7. All Rights Reserved © Joget Inc Userview Builder • Userview elements. • Each element is a plugin. • Drag-and-drop. Joget Inc Internal Use Only
  8. 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. 9. All Rights Reserved © Joget Inc Userview Builder • Sample Userview using the Enterprise theme Joget Inc Internal Use Only
  10. 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. 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. 12. All Rights Reserved © Joget Inc Chapter 2 Designing your first Userview Joget Inc Internal Use Only
  13. 13. All Rights Reserved © Joget Inc Create New Userview Joget Inc Internal Use Only
  14. 14. All Rights Reserved © Joget Inc Userview Category • Items are organized by Category. • Add 2 new Categories. Joget Inc Internal Use Only
  15. 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. 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. 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. 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. 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. 20. All Rights Reserved © Joget Inc Customize Userview settings • Customize look and feel of the Userview. Joget Inc Internal Use Only
  21. 21. All Rights Reserved © Joget Inc Preview Userview Joget Inc Internal Use Only
  22. 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. 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. 24. All Rights Reserved © Joget Inc Run the App Joget Inc Internal Use Only
  25. 25. All Rights Reserved © Joget Inc Run “Apply Leave” Joget Inc Internal Use Only
  26. 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. 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. 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. 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. 30. All Rights Reserved © Joget Inc Module Review 1. Introduction to Userview Builder 2. Designing your first Userview Joget Inc Internal Use Only
  31. 31. All Rights Reserved © Joget Inc Recommended Further Learning • Hash Variables • Permission Control Joget Inc Internal Use Only
  32. 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

×