Initial Home page

Aaron Louie 2020-01-02 11:35:12 -05:00
commit 5f3887256e
1 changed files with 65 additions and 0 deletions

65
Home.md Normal file

@ -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` |