Custom Forms

With Imixs-Office-Workflow you can create forms completely model-based. No programming knowledge in HTML or Java Script is required. The custom form component enables you to design your forms at runtime. The definition of a custom form is done within the Imixs-BPMN modeler. To activate this feature you need to add the from “custom” into the section “Application -> Input Form” of your task element.


The definition of your custom form is defined by a “Data Object Element” with an association to your task element:

The Form Definition

The XML definition contains sections and items:

<?xml version="1.0"?>
  <imixs-form-section label="Controlling">
    <item name="_description" type="textarea"
        label="Short Description" />
    <item name="_details" type="html" label="Description" />

Note: The form defintion must start with the xml root element .

The following common input formats are supported:

Text Input

<item name="_description" type="text"
        label="Topic" />

Textarea Input

<item name="_description" type="textarea"
        label="Description" />

HTML/RichText Input

<item name="_description" type="html"
        label="Description" />

Date Input

<item name="_date" type="date"
        label="Date" />

Options List

<item name="invoice.currency" type="selectOneMenu" required="true" 
      label="Currency:" />

The following option list types are supported:

Required Inputs

With the tag ‘required’ a mandatory input is defined:

<item name="_date" type="date" required="true"
        label="Date" />


With the tag ‘readonly’ a readonly input is defined:

<item name="_date" type="text" readonly="true"
        label="Subject" />

Form Sections

A custom form is separated by sections. A section can have an optional label and up to 3 columns:

 <imixs-form-section label="Controlling" columns="2">

UI Validation

The CDI Bean ‘validationController’ provides functionality to control the validation of a form in more detail based on a BPMN event workflow result. The following shows an example of a custom validation definition:

<validation name="required">false</validation>
<validation name="confirm">Are you sure?</validation>

The first tag ‘required=false’ can be used to skip the required flag of UI input components. The required flag can be set by the validationControler in the following way:

<h:inputText value="#{workitem.item['myitem']}" required="#{validationController.required}" />

If an event contains the workflow result

<validation name="required">false</validation>

than the required flag will be ignored.

With the validation tag ‘confirm’ an JavaScript Confirm message is shown when the user clicks the button.