Webforms are essential in process flows - they provide the interactive end user interface. And when you need to add web forms to your process model, things can get tricky. In this Slideshare presentation, you'll see how to build web forms more effectively using advanced features, including: How to use pageflows and condition How to use groups of widgets and dependent widget How to populate form widgets from external sources How to create re-usable form templates How to change a form's look-n-feel

1. Best practices for building
webforms with Bonita BPM
Vivecca Yong Tim & Sapna Maheswari
©2013 Bonitasoft

2. Agenda
Why choose Bonita BPM
Tips & best practices for building web
forms
Demonstration of the best practices
Questions Addressed
#BonitaBPM

3. Why Bonita BPM?
AWARDS
• 2,000,000 DOWNLOADS
• 60,000 COMMUNITY MEMBERS
• 600+ CUSTOMERS
•
•
125 EMPLOYEES
100 TECH & SI PARTNERS
3

4. 600 customers in 60 countries

5. 5

6. DESIGN.
Bonita Studio
• BPMN 2.0
• Drag-n-drop application
development
• Powerful form builder
• Easy connectivity
6
6

7. CONNECT.
… to almost any Information System
7
7

8. RUN.
...in Bonita Portal...
Desktop & Mobile
8
8

9. … or as a standalone application
9
9

10. Commercial Offerings
11

11. Commercial offerings
We support your projects and accelerate their success
• Professional Services
- Training
- Certification in development and administration
- Consulting: On-Site or Remote
• Annual Subscriptions
- Gold or Platinum Technical Support
- Features to facilitate collaboration, speed development,
aid testing, deployment and administration,
advanced portal features
12

12. Bonita BPM Subscriptions
Subscriptions
• Commercial license
• Professional Support
• Software Upgrades
Team collaboration
• Shared repository
• Productivity features
Mission-critical
• Monitoring
• Error management
• Live reconfiguration
End-User Centric
• Advanced Portal
• Mobile
• Process templates

13. Best practices for building Bonita Web
Forms
©2013 Bonitasoft
14

14. Bonita BPM Form Builder
Drag & Drop Form Builder
Process
End User Interface
©2013 Bonitasoft
15

15. We will discuss..









Effective initialization of form data
Simple Forms
Adaptable form design
Re-use of group widgets and forms
Managing documents
Field and Page Validation
Customizing task labels
Customizing confirmation message
Look n Feel Customization
©2013 Bonitasoft
16

16. Data variable scopes
 Process Variable
Available throughout the process and are persisted in Bonita
database
 Task Variable
 Available for the task and its outgoing transitions. Can be
transient or persisted
 Form Variable
Available only in the form and is transient
©2013 Bonitasoft
17

17. Form data initialization
 Use form transient data for form initialization
 Ensures real time data initialization instead of at task creation
 Transient data is limited to task scope and not persisted
©2013 Bonitasoft
18

18. Simple Forms

Avoid complex and long forms, use multiple tasks or Page Flows to
break them down
©2013 Bonitasoft
19

19. Adaptable form design
 Use Contingencies to dynamically update fields and their values,
thereby providing contextual and adaptable web interface to the users
©2013 Bonitasoft
20

20. Group widgets
 Allows for logical grouping of fields and widgets
 Group widgets can be saved as template and re-used in other forms
 Easily duplicate a group widget for capturing rows of data.
©2013 Bonitasoft
21

21. Validator
 Mandatory field validation
 Field level validation
Out of box validators for common validations like Email, Phone,
Length of a field etc.
 Page level validation for cross field validation
 Ability to create custom validator and use it in the forms at field or
page level
©2013 Bonitasoft
22

22. Customizing Labels and messages
 Customize display names, description displayed in the portal for better
readability
 Customize confirmation message shown in the portal on completion of
a task
 Customize the layout of the confirmation message shown on
completion of a task
 Set the due date for a task
©2013 Bonitasoft
23

23. Customizing Form Look N Feel
 Create new Look n Feel using the Look N Feel Editor
 It can then easily be applied at the pool level
©2013 Bonitasoft
24

24. Thank you, and…
STAY CONNECTED WITH US!
CORPORATE WEBSITE
Product & Services descriptions,
References, Webinars, White papers
youtube.com/
bonitasoft
twitter.com/
bonitasoft
OPEN SOURCE COMMUNITY
Forums, Contributions, Source
Code
linkedin.com/groups?
gid=3182097
facebook.com/
bonitasoftbpm
©2013 Bonitasoft
25