Initial Home page
commit
5f3887256e
|
@ -0,0 +1,65 @@
|
||||||
|
# CR Connect Workflow Engine
|
||||||
|
## Workflow Configuration
|
||||||
|
|
||||||
|
### Form Field Types in Camunda Modeler
|
||||||
|
By default, Camunda Modeler supports a very limited set of form field types. To provide more complete support on the front end, we use the form field Property attributes.
|
||||||
|
|
||||||
|
You will need to add the following custom types (select `custom type` in the Type dropdown):
|
||||||
|
- `textarea`
|
||||||
|
- `file`
|
||||||
|
- `tel`
|
||||||
|
- `email`
|
||||||
|
|
||||||
|
Then to display each of the following types of form fields, set the type and, in some cases, add a custom property with the listed value.
|
||||||
|
|
||||||
|
| Display | Type | Property > Id | Property > Value |
|
||||||
|
| ------- | ---- | ------------- | ---------------- |
|
||||||
|
| Text input box (single line) | `string` | n/a | n/a |
|
||||||
|
| Number input box | `long` | n/a | n/a |
|
||||||
|
| "Yes/No" radio buttons | `boolean` | n/a | n/a |
|
||||||
|
| Date picker | `date` | n/a | n/a |
|
||||||
|
| Dropdown box | `enum` | n/a | n/a |
|
||||||
|
| Checkboxes | `enum` | `enum_type` | `checkbox` |
|
||||||
|
| Radio buttons | `enum` | `enum_type` | `radio` |
|
||||||
|
| Textarea (multi-line text) | `textarea` (Custom Type) | n/a | n/a |
|
||||||
|
| File | `file` (Custom Type) | n/a | n/a |
|
||||||
|
| Telephone number | `tel` (Custom Type) | n/a | n/a |
|
||||||
|
| Email address | `email` (Custom Type) | n/a | n/a |
|
||||||
|
|
||||||
|
### Form Field Configuration
|
||||||
|
#### Hiding fields
|
||||||
|
|
||||||
|
Fields can be hidden and shown conditionally with a Javascript expression, which will be parsed on the front end by [Formly](https://formly.dev/guide/expression-properties). You can reference any other fields in the form using the prefix `model` in front of its Form Field ID. For example, if you have a `boolean` field with ID of `hasUploadedFile`, you can access its value with `model.hasUploadedFile` in the Formly expression.
|
||||||
|
|
||||||
|
| Property > Id | Property > Value (example) |
|
||||||
|
| ------------- | -------------------------- |
|
||||||
|
| `hide_expression` | `!(model.someBooleanFieldName && (model.enumFieldName === 'Other'))` |
|
||||||
|
|
||||||
|
#### Required fields
|
||||||
|
|
||||||
|
To make a field required by default, add the following Validation Constraint:
|
||||||
|
|
||||||
|
| Constraint > Name | Constraint > Config |
|
||||||
|
| ----------------- | ------------------- |
|
||||||
|
| `required` | `true` |
|
||||||
|
|
||||||
|
If a field needs to be filled out based on the value of some other field(s) in the form, you can use a Formly Javascript expression (see above).
|
||||||
|
|
||||||
|
|
||||||
|
| Property > Id | Property > Value (example) |
|
||||||
|
| ------------- | -------------------------- |
|
||||||
|
| `required_expression` | `!(model.someBooleanFieldName && (model.enumFieldName === 'Other'))` |
|
||||||
|
|
||||||
|
|
||||||
|
#### Help text
|
||||||
|
There are three places where help text will be displayed on the front end when the form is rendered:
|
||||||
|
- Placeholder text: appears within the field if it is empty
|
||||||
|
- Description text: appears below the field
|
||||||
|
- Help dialog text: appears in a pop-up when the `?` button next to the field is clicked. [Markdown formatting code](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links) is supported for this field, but you will need to replace all line breaks with `\n` (for now).
|
||||||
|
|
||||||
|
To display each type of help text, add a custom property:
|
||||||
|
| Type of help text | Property > Id | Property > Value (example) |
|
||||||
|
| ----------------- | ------------- | -------------------------- |
|
||||||
|
| Placeholder text | `placeholder` | `Enter your email address here` |
|
||||||
|
| Description text | `description` | `Upload a digitally-signed PDF file that is no more than 1GB in size.` |
|
||||||
|
| Placeholder text | `help` | `# This is a large heading\n\nParagraph of text goes here.\n\nThe next paragraph goes here. You can even insert [links](https://sartography.com)!\n\nThis is a list:\n- Apples\n- Oranges\n- Bananas` |
|
Loading…
Reference in New Issue