best practices for building poweful, user friendly webforms

©2013 Bonitasoft

Best practices for building webforms with Bonita BPMVivecca Yong Tim & Sapna Maheswari

Agenda

Why choose Bonita BPM

Tips & best practices for building web forms

Demonstration of the best practices

Questions Addressed #BonitaBPM

3

Why Bonita BPM?

• 2,000,000 DOWNLOADS

• 60,000 COMMUNITY MEMBERS

• 600+ CUSTOMERS

• 125 EMPLOYEES

• 100 TECH & SI PARTNERS

AWARDS

600 customers in 60 countries

5

6

DESIGN.

6

Bonita Studio

• BPMN 2.0

• Drag-n-drop application development

• Powerful form builder

• Easy connectivity

7

CONNECT.

7

… to almost any Information System

8

RUN. ...in Bonita Portal...

8

& Mobile Desktop

9

… or as a standalone application

9

Commercial Offerings

11

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

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

©2013 Bonitasoft 14

Best practices for building Bonita Web Forms

©2013 Bonitasoft 15

Bonita BPM Form BuilderDrag & Drop Form Builder

Process

End User Interface

©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

©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

©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

©2013 Bonitasoft 19

Simple Forms Avoid complex and long forms, use multiple tasks or Page Flows to

break them down

©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

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

©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

©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

©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

©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!