From 5f3887256e19fd714a2dff90dc176064d8454b15 Mon Sep 17 00:00:00 2001
From: Aaron Louie <ajlouie@users.noreply.github.com>
Date: Thu, 2 Jan 2020 11:35:12 -0500
Subject: [PATCH] Initial Home page

---
 Home.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 Home.md

diff --git a/Home.md b/Home.md
new file mode 100644
index 0000000..50693db
--- /dev/null
+++ b/Home.md
@@ -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` |