![Page 1: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/1.jpg)
©2013 Bonitasoft
Best practices for building webforms with Bonita BPMVivecca Yong Tim & Sapna Maheswari
![Page 2: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/2.jpg)
Agenda
Why choose Bonita BPM
Tips & best practices for building web forms
Demonstration of the best practices
Questions Addressed #BonitaBPM
![Page 3: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/3.jpg)
3
Why Bonita BPM?
• 2,000,000 DOWNLOADS
• 60,000 COMMUNITY MEMBERS
• 600+ CUSTOMERS
• 125 EMPLOYEES
• 100 TECH & SI PARTNERS
AWARDS
![Page 4: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/4.jpg)
600 customers in 60 countries
![Page 5: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/5.jpg)
5
![Page 6: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/6.jpg)
6
DESIGN.
6
Bonita Studio
• BPMN 2.0
• Drag-n-drop application development
• Powerful form builder
• Easy connectivity
![Page 7: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/7.jpg)
7
CONNECT.
7
… to almost any Information System
![Page 8: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/8.jpg)
8
RUN. ...in Bonita Portal...
8
& Mobile Desktop
![Page 9: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/9.jpg)
9
… or as a standalone application
9
![Page 10: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/10.jpg)
Commercial Offerings
11
![Page 11: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/11.jpg)
12
Commercial offeringsWe 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
![Page 12: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/12.jpg)
Bonita BPM Subscriptions
Team collaboration• Shared repository
• Productivity features
End-User Centric• Advanced Portal
• Mobile
• Process templates
Mission-critical• Monitoring
• Error management
• Live reconfiguration
Subscriptions• Commercial license• Professional Support• Software Upgrades
![Page 13: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/13.jpg)
©2013 Bonitasoft 14
Best practices for building Bonita Web Forms
![Page 14: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/14.jpg)
©2013 Bonitasoft 15
Bonita BPM Form BuilderDrag & Drop Form Builder
Process
End User Interface
![Page 15: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/15.jpg)
©2013 Bonitasoft 16
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
![Page 16: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/16.jpg)
©2013 Bonitasoft 17
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 VariableAvailable only in the form and is transient
![Page 17: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/17.jpg)
©2013 Bonitasoft 18
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
![Page 18: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/18.jpg)
©2013 Bonitasoft 19
Simple Forms Avoid complex and long forms, use multiple tasks or Page Flows to
break them down
![Page 19: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/19.jpg)
©2013 Bonitasoft 20
Adaptable form design Use Contingencies to dynamically update fields and their values, thereby providing contextual and adaptable web interface to the users
![Page 20: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/20.jpg)
©2013 Bonitasoft 21
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.
![Page 21: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/21.jpg)
©2013 Bonitasoft 22
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
![Page 22: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/22.jpg)
©2013 Bonitasoft 23
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
![Page 23: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/23.jpg)
©2013 Bonitasoft 24
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
![Page 24: Best practices for building poweful, user friendly webforms](https://reader035.vdocuments.net/reader035/viewer/2022062704/5562f7b2d8b42a62598b47a4/html5/thumbnails/24.jpg)
©2013 Bonitasoft 25
CORPORATE WEBSITE
Product & Services descriptions,
References, Webinars, White papers
OPEN SOURCE COMMUNITY
Forums, Contributions, Source Code
twitter.com/bonitasoft
facebook.com/bonitasoftbpm
linkedin.com/groups?gid=3182097
youtube.com/bonitasoft
Thank you, and…
STAY CONNECTED WITH US!