best practices for building poweful, user friendly webforms

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

Upload: bonitasoft

Post on 25-May-2015

1.390 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Best practices for building poweful, user friendly webforms

©2013 Bonitasoft

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

Page 2: Best practices for building poweful, user friendly webforms

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

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

600 customers in 60 countries

Page 5: Best practices for building poweful, user friendly webforms

5

Page 6: Best practices for building poweful, user friendly webforms

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

7

CONNECT.

7

… to almost any Information System

Page 8: Best practices for building poweful, user friendly webforms

8

RUN. ...in Bonita Portal...

8

& Mobile Desktop

Page 9: Best practices for building poweful, user friendly webforms

9

… or as a standalone application

9

Page 10: Best practices for building poweful, user friendly webforms

Commercial Offerings

11

Page 11: Best practices for building poweful, user friendly webforms

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

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

©2013 Bonitasoft 14

Best practices for building Bonita Web Forms

Page 14: Best practices for building poweful, user friendly webforms

©2013 Bonitasoft 15

Bonita BPM Form BuilderDrag & Drop Form Builder

Process

End User Interface

Page 15: Best practices for building poweful, user friendly webforms

©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

©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

©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

©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

©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

©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

©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

©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

©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

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