jBPM Form Builder has started to grow as promised. It is time to make a thorough description of what we have now on this tool.
UI components
So far, you can have any combination of the following elements in your form:
Headers and Labels: The basic two sizes of text most basic users need, for titles and general information.
Images: Images that can be uploaded to Guvnor as generic assets, and viewed from inside the forms. You can see this in action in the video displayed avobe.
HTML Script: Any generic client side script. This proves useful for embedding videos, audio and animation
Line graph: Coming soon, it will allow to use google visualization API to view different graphical options
Here are a couple of screenshots showing some of these components:
Layouts
Tabbed layout: Allows you to see
Horizontal layout: Lets you display components one next to the other
Border layout:Allows you to display components according to it’s cardinal position inside the layout (north, south, west and so on)
CSS based layout: It lets you define a css stylesheet from an outside URL, or upload a css stylesheet as a file to Guvnor while keeping a reference. In this way, any efforts already done by designers can be reused while defining forms for jBPM without having to rewrite any content
Flow layout: As its name suggests, this layout just “goes with the flow” and allows the page configuration to decide how to display it’s contents.
Table layout: Creates a table. By right clicking on this table, you can add and remove columns and rows.
Absolute layout: Lets you drop content on an absolute position within the layout, expressed as a cardinal point
Every layout is implemented with the composite method, to allow any other layout inside itself. You can nest layouts in any way you prefer
Input components
Input components are fully represented in the jBPM Form Builder, and more complex components for inputing data will be added soon. At the moment, the supported input components are:
Combo Box
Text Field
Password Field
Button
Text Area
Hidden Field
File Input
Check Box
Radio Buttons
Here’s a screenshot showing most of them on a single form, one after the other
We will be adding support for a rich text editor, date pickers with calendar showing and autopopulation of comboboxes soon enough.
Your own custom menu options: Effects library: right clicking on any of the elements dropped on your form can give you options to add special behaviour or conditions to your UI component. Among these, there are:
Cut/Copy/Paste/Remove options: Available for every single component, allow you to move and remove components like any other editor. Control key shortcuts are available for these options, except for remove
Add/remove items to combobox:Opens a popup panel to fill label and value
Resizing options:Allows for resizing of the selected component, by dragging it’s lower right corner
Moving: Allows you to move a component to a different position once it was dropped in the form
Internationalization: Available for labels, headers and images’ alternative text, it allows to set different texts for each locale you want to cover.
Zone formatting Useful for date, currency and floating point values, whose representation changes according to localization
Uploading files: Allows you to upload images, css files, javascript files, and anything you might need for your component.
Add row/tab – Remove row/tab options:Only available for table and tab layouts, allows you to modify them.
Event handling:Opens a popup to define javascript for any browser event of your components.
Linking IO data to a UI component:Useful to link data input and output from a task to your particular component of the form
Your own personal effects: You can configure (through a json configuration file on the server side) what effects will be allowed for each component. This will prove useful eventually, as we include roles for the form builder users.
All these functionalities are only the beggining and any help to determine the next step is welcome. Any suggestions are welcome. Cheers from Argentina, and have a great weekend!
