All information related to the business process is contained in the process variable itself or referenced through the process variable. Flowable supports storing complex Java objects as process variables, such as Serializable objects, JPA entities or entire XML document strings.

Starting the process and completing user tasks are where people participate in the process. Communicating with people requires rendering tables in some UI technologies. In order to simplify multiple UI technologies, process definitions can include logic to convert complex Java type objects in process variables into map < string, string > attributes.

Any UI technology can use the Flowable API method that exposes attribute information to build forms on these attributes. These properties can provide a specialized (more limited) view of process variables. For example, you can use the properties required to display the form in the return value of FormData.

 StartFormData FormService.getStartFormData(String processDefinitionId)

or

TaskFormdata FormService.getTaskFormData(String taskId)

By default, the built-in form engine will view properties and process variables. Therefore, if the task form attribute matches the process variable, you do not need to declare the task form attribute. For example, use the following statement:

<startEvent id="start" />

When the execution reaches the startEvent, all process variables are available, but will be empty because no specific mapping is defined.

formService.getStartFormData(String processDefinitionId).getFormProperties()

In the above case, all submitted properties will be stored as procedure variables. This means that you can store a new variable simply by adding a new input field to the form.

Properties are derived from process variables, but they do not have to be stored as process variables. For example, a process variable can be a JPA entity of the Address class. The form properties used by StreetNameUI technology can be linked with expressions #{address.street}.

The attributes that the simulated user should submit in the form can be stored as process variables or as nested attributes in one of the process variables, such as the UEL value expression #{address.street}.

The default behavior of mock submit properties is that they will be stored as process variables unless otherwise specified in the formProperty declaration.

Type conversion can also be applied as part of the processing between form properties and process variables.

For example:

<userTask id="task">
<extensionElements>
<flowable:formProperty id="room" />
<flowable:formProperty id="duration" type="long"/>
<flowable:formProperty id="speaker" variable="SpeakerName" writable="false" />
<flowable:formProperty id="street" expression="#{address.street}" required="true" />
</extensionElements>
</userTask>

• The Form property room will map to the process variable as a room string
• The Form attribute duration will be mapped as a process variable, such as java.lang.Long
• The form property speaker will be mapped to the process variable SpeakerName. It will only be available in the TaskFormData object. If the property is submitted, an exception is thrown
  FlowableException. Simulation, with the attribute readable = "false", the attribute can be excluded from FormData, but it is still processed in submission.
• The Form property will be mapped as a string to the Java bean property in the street process variable address. If no attribute is provided, required = "true" will throw an exception during submission.

You can also provide type metadata as part of the returned FormData from the method StartFormData FormService.getStartFormData(String processDefinitionId) and TaskFormdata FormService.getTaskFormData(String taskId).

We support the following form attribute types:

• string (org.flowable.engine.impl.form.StringFormType
• long (org.flowable.engine.impl.form.LongFormType)
• enum (org.flowable.engine.impl.form.EnumFormType)
• date (org.flowable.engine.impl.form.DateFormType)
• boolean (org.flowable.engine.impl.form.BooleanFormType)
  For each form property declared, the following FormProperty information will be provided through List formService.getStartFormData(String processDefinitionId).getFormProperties() and List formService.getTaskFormData(String taskId).getFormProperties().

public interface FormProperty {
/** the key used to submit the property in {@link FormService#submitStartFormData(String, java.util.Map)}
* or {@link FormService#submitTaskFormData(String, java.util.Map)} */
String getId();
/** the display label */
String getName();
/** one of the types defined in this interface like e.g. {@link #TYPE_STRING} */
FormType getType();
/** optional value that should be used to display in this property */
String getValue();
/** is this property read to be displayed in the form and made accessible with the methods
* {@link FormService#getStartFormData(String)} and {@link FormService#getTaskFormData(String)}. */
boolean isReadable();
/** is this property expected when a user submits the form? */
boolean isWritable();
/** is this property a required input field *
boolean isRequired();
}

For example:

<startEvent id="start">
<extensionElements>
<flowable:formProperty id="speaker"
name="Speaker"
variable="SpeakerName"
type="string" />
<flowable:formProperty id="start"
type="date"
datePattern="dd-MMM-yyyy" />
<flowable:formProperty id="direction" type="enum">
<flowable:value id="left" name="Go Left" />
<flowable:value id="right" name="Go Right" />
<flowable:value id="up" name="Go Up" />
<flowable:value id="down" name="Go Down" />
</flowable:formProperty>
</extensionElements>
</startEvent>

All this information can be accessed through the API. The type name can be through formProperty.getType().getName(). You can even use date mode, and you can use
formProperty.getType().getInformation("datePattern") enumeration value formProperty.getType().getInformation("values").

The following XML fragment

<startEvent>
<extensionElements>
<flowable:formProperty id="numberOfDays" name="Number of days" value="${numberOfDays}" type="long"
required="true"/>
<flowable:formProperty id="startDate" name="First day of holiday (dd-MM-yyy)" value="${startDate}"
datePattern="dd-MM-yyyy hh:mm" type="date" required="true" />
<flowable:formProperty id="vacationMotivation" name="Motivation" value="${vacationMotivation}" type="string" />
</extensionElements>
</userTask>

The process start form that can be used to render to a custom application.

The above article is from Pangu BPM Research Institute: http://vue.pangubpm.com/
Article translation submission: https://github.com/qiudaoke/flowable-userguide
For more articles, you can focus on WeChat official account: