Form Engine for VWG

1. Form Engine for VWG By Mitch Stephens

2. Topics • Overview • Summary of features • Form Structure • Editing Features • Many to One relationships • Formula Engine & Scripting • Programming Integration • Availability

3. Some Background • We are a North Carolina based company and currently building an HR Performance management application. • The core of our application is a Form Designer and run-time engine that lets you design performance review forms. • We have created a full-featured Form Designer using VWG, which is detailed in this presentation. • Please note: We have created this presentation to determine if this form engine has commercial demand independent of our application. • At the present time, we don’t have this packaged, documented or really available for any download. • We are considering a spin-out subject to feedback and demand.

4. Our Business requirements • A Web-based Form run-time environment with no client-side downloads. • A Web-based Form designer aimed at power-users & administrators • The Form Engine must-have features included: • Two-way data-binding to Business objects. • Support for arbitrary placement of fields (we couldn’t have a form designer that only supports 1 column of fields, for example) • Support for role-based security that controls visibility and editing • Many-to-one support, with run-time child add/change/delete with security options • Custom validations, formulas and scripting • High performance • Print-Preview • Easy to use, without programming or run-time licensing’ • No client-side installation required. • Support for very large forms (10+ pages), with manageable sections

5. Summary of Features Implemented • WYSIWYG Web-based form designer • Easy-to-use data-bound form designer based around table layout control with underlying Excel formula engine. • Forms are made up of Sections and Fields. • Excel-based notation for cell names, e.g., A1, B2, etc. • XML-based persistence • Server-based clipboard operations • Can cut & copy ranges, sections, fields, etc. • Role-based access to form fields • Determines visibility and edit mode. • Supports many-to-one relationships with child editing, controlled with security profiles • Real-Time Excel formula support • Separate Run-time Form Viewer, with Treeview navigation

6. Form Structure – Modeled after Excel • The Forms consists of one or more Sections, just like an Excel workbook has many worksheets • At run time, you can navigate around using a Treeview. • A Section consists of Rows and Columns with cells. • Cells are identified by Excel-like names, such as A1, B2, etc. • A single cell can hold one Field, such as a text box, label, check box, etc. • Fields can span rows and/or columns • A field can optionally be data-bound or the result of an Excel formula. • In future releases, fields will support nested sections.

7. Single & Multiple Choice Fields • Fields can base based on a single value, or be derived from the Multiple-Choice Field • Multiple Choice fields include • Combo-boxes, • List Boxes • Radio Button Group • Choice Lists can be static or provided at run-time Radio Button Group Combo Box

8. Screen Shot (Designer)

9. Screen Shot (Preview Mode) Preview mode allows you to quickly see the run-time behavior using some sample data stored in the form.

10. Screen Shot (Runtime Mode)

11. Basic Editing – Create new Form • Forms are stored as XML structures • We store them as blobs in the database • Forms can also be saved as files, but this is trickier on the web.

12. Basic Editing Tasks – Add Section • Add a new Section • Give it a name and set row/column counts • Can be a normal section of Many-to-One • Sections can be auto-generated in user-code to speed up form building.

13. Basic Editing Tasks – Add a field • Click in a cell • Click the Add Field button on the toolbar • Or Right click the cell and select New Field..

14. Basic Editing Tasks – Add a field (2) • Choose the data binding • A call-back into application feeds the list of business objects and data fields for the selected business object.

15. Basic Editing Tasks – Add a field (3) • Confirm the field name • Set the ColSpan and RowSpan if necessary • Note: these can be modified later

16. Basic Editing Tasks – Set Label Text • For label fields, you can double-click the field and set the Text property. • This dialog also lets you set the style • Styles can be pre-defined or user-defined. • Styles lets you set consistent look and feel in the application, e.g. yellow to indicate an editable field.

17. Basic Editing Tasks – Context Menu • Context menu includes: • Field Actions, • Clipboard operations, • Range Operations • Row & Column management

18. Basic Editing Tasks – Field Properties • Right click on field, select field properties • You can set all field properties including data bindings, styles, validations, etc.

19. Basic Editing Tasks – Add Multiple Fields • Toolbar button allows you to add multiple fields at once from the business object

20. Basic Editing Tasks– Rows & Columns • Sections are made up of Rows and Columns • Max 255 Columns • Any number of Rows • Rows & Columns can be absolute or percentage based • Can view and manage all rows & columns using ‘Set Row & Column Styles Dialog’ shown on the right

21. Basic Editing Tasks– Rows & Columns (2) • Add Row to Section using Context menu or toolbar • Add Column to Section using Context menu or Toolbar • Can Insert Row above a row • Can Insert a Column to left of the current column. • Can adjust row height and column widths using toolbar or menu.

22. Basic Editing Tasks – Ranges • A Range is a selection of cells similar to a selection in Excel • Two step operation: set top left cell, then bottom right cell using context menu. • Can copy, paste, clear, clear rows, set all properties • Ranges make it easy to duplicate sections in the form.

23. Form Designer – Row and Column Span • Fields can span rows and columns • Cannot overlap each other

24. Data Binding • Fields can bind to Business Objects • Support for singleton objects or Many-to-one objects • 1 or 2 levels of indexing • Supports Read-only, Read-write, Write-only fields. • Can set visual Style for each mode so the user knows what is editable

25. Data Binding Properties Form

26. Role-based Access • Fields Access is controlled through Roles • Separate Role for Edit And View • Predefined List of 15+ Roles • Employee, • Manager, • Indirect Manager • Admin • Supervisor, • Custom1 – Custom 5

27. Setting Roles for Fields

28. Form Designer – Tree View • Shows Sections • Shows Fields in sections • You can easily navigate around the form using the treeview • Shows Many to one relationships

29. Form Designer – Form Properties • Set Name and Description • Set Form Instructions • Set Layout Dimensions • Set default properties • Sections can be based on the defaults set at the form level • Set Form Styles • Set Runtime behavior

30. Form Designer – Manage Sections • Add, Delete, Edit, Copy, Paste, Move up, Move Down, • Save to Template • Insert from Template • Edit Properties • Changes are shown in the Treeview as they happen.

31. Form Designer – Manage Fields • Fields List in Form Designer shows all fields for all sections • Lets you view everything for the form • Can modify properties using the property grid or the Field Properties form • Property Grid lets you set multiple properties at once.

32. Form Designer – Manage Runtime Toolbar Buttons • The Buttons List on Form Editor Tabs control the run-rime button behavior. • You can control access rights for buttons, which means some buttons are only visible/enabled for some users. • Set tool tips and other properties for the buttons • Set button order.

33. Many to One Support • Sections can Singleton or Many-to-One • A Singleton Section has only one instance at runtime • A Many-to-one Section has a grid page plus one or more sections that are generated at run time based on the underlying data. • Each generated section represents a child object. • You can control the rendering to display the children

34. Many to One Form Editing • There are two sections needed for many to one: Parent Section and repeating child section. • When you add a many to one section, you will see the parent Section and child sections in the Treeview. • The parent section holds the summary grid showing the children. • The parent section can also hold summary totals.

35. Run Time Rendering • At run-time, the many to one sections can be shown like this, or as popup windows, or as single child view. Summary Grid Child Sections

36. Many to One – Run time Editing • The Form Runtime supports editing of child objects at run time • Editing is controlled using Many-to-One Profiles • Each profile includes settings for: • Security • Buttons • Child Rendering options

37. Many to One – Run time Editing (Cont.) • Example of Editing Many to One: • Employee can add/delete and edit their annual goals • Manager can edit goals, but not add or delete them • At run time, the Employee sees the Add & Delete buttons, but the manager does not see a toolbar at all.

38. Field Validations • Editable Fields can be configured to have declarative validations • These include: • IsRequired • Specific values • Range checks • Required with other fields • NOTE: The Error form is a custom form that is supplied at run time from the application.

39. Formula Engine & Excel Support • At run time, the form is generated with an invisible Excel workbook that provides formula support (Excel is not used.. We use a third party Excel engine) • Each Section maps to a worksheet in the Excel workbook • Each Field maps to a cell. • Many to one sections are named Section_xwhere x is the sequence number • Many to one fields are shown in a summary grid worksheet • You can download the generated workbook and see the field mappings • The Cell name mappings in the form builder are intentionally compatible with Excel

40. Formula Engine & Excel Support • To set a formula, download the Excel workbook, and test it in Excel. • Formulas can refer to other sections. • For many-to-one fields, you can refer to the summary grid worksheet

41. Setting Field-level formulas • A Field value can be set from an Excel formula • Formulas will refer to cell names, like A1, A2, etc.

42. Formula values are updated real time!!! • At run time, the formula engine is live and any changes made to fields are instantly reflected in the formula fields. • This lets you automatically create totals, do validations, or any other computations at run-time with no post-back!

43. Run time User-Forms • The form engine allows you to popup your own forms in response to any button click. This allows you to have specific forms for certain actions taken by the user. • For example, the custom save form for our application looks like this: • And the Custom Add Goal form looks like this

44. Programming Integration • At the present time, this form engine is a set of classes that are integrated into our application. However, the engine is very abstracted and can be externalized completely. • To integrate the form, you will create a PRX_FormInstance class that will need to respond to requests from the form engine. For example: • Returning the allowed business objects • Returning meta data for business objects • Handling Database updates for the form • Validating form data • Create default sections on demand • Returning Choice lists for the multi-select fields

45. Cost and Availability • We have not launched this application as a development tool, although the design would allow for this in the future. Our primary focus is building an HR application. • In the near term, we would consider selling the C# source code and providing consulting on integrating it into other applications. • This is a comprehensive and full-function form engine that is built for enterprise applications. • If you have a similar need, please call me at 919 741-5099 to discuss pricing and licensing. • Note: we are US-based company in Raleigh, NC. • Mitch Stephens • MitchStephens@gmail.com