summaryrefslogtreecommitdiff
path: root/design-documents
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2024-01-02 18:19:07 -0300
committerSebastian <sebasjm@gmail.com>2024-01-03 10:12:15 -0300
commitae0c46261c8fd8d71b38cfdd529dcf78767d327b (patch)
tree98c45f063dafa139cf718e4c90b855c289a7dea4 /design-documents
parent05a762edf2e5b26be763573476c5721c3200978f (diff)
downloaddocs-ae0c46261c8fd8d71b38cfdd529dcf78767d327b.tar.gz
docs-ae0c46261c8fd8d71b38cfdd529dcf78767d327b.tar.bz2
docs-ae0c46261c8fd8d71b38cfdd529dcf78767d327b.zip
rewords DD 54
Diffstat (limited to 'design-documents')
-rw-r--r--design-documents/054-dynamic-form.rst61
1 files changed, 37 insertions, 24 deletions
diff --git a/design-documents/054-dynamic-form.rst b/design-documents/054-dynamic-form.rst
index b2d2e262..336339bf 100644
--- a/design-documents/054-dynamic-form.rst
+++ b/design-documents/054-dynamic-form.rst
@@ -4,44 +4,52 @@ DD 53: Dynamic Web Form
Summary
=======
-This document defines an approach of a dynamic web form.
+This document outlines the approach for implementing a dynamic web form feature.
Motivation
==========
-Currently when a web app need a form a new page needs to be coded
-with HTML, css and js.
-Exchange AML have multiple forms and different instance may have
-different form depending on the jurisdiction.
+Currently, creating a new form for a web app involves coding a new
+page with HTML, CSS, and JS. Exchange AML requires multiple forms,
+and different instances may have distinct forms based on jurisdiction.
+
Requirements
============
A form consist of a layout and a set of fields.
-Layout requirements:
-* **editable by system admin**: if new form is required system admin should
-be able to create a new form.
+Layout requirements
+-------------------
-* **accesibility**: forms should satisfy accesibility level AA.
+* **editable by system admin**: System admins should be able to create new forms
+or edit current one shipped with the source.
-* **responsive**: forms should work on all devices.
+* **accesibility**: Forms should meet accessibility level AA.
-* **metadata**: generated info by the form should contain enough information
-to handle multiple version of the form.
+* **responsive**: Forms should be responsive and function on all devices.
+
+* **metadata**: Generated form information should contain enough data
+to handle multiple form versions.
-Fields requirements:
+Fields requirements
+-------------------
-* **validations**: each field may required custom validation
+* **validations**: Each field may require custom validation
+
+* **custom data type**: A field may consist of a list, string, number, or a
+complex composite structure.
-* **custom data type**: a field may consist of a list, string, number or a complex
-composite structure.
-
Proposed Solutions
==================
-Forms are initialized with the follow structure:
+Forms are initialized using a flexible structure defined by the
+TypeScript interface FormType<T>. This interface comprises properties
+such as value (current form data), initial (initial form data for resetting),
+readOnly (flag to disable input), onUpdate (callback on form data update),
+and computeFormState (function to derive the form state based on current data).
+
```
interface FormType<T extends object> {
@@ -55,6 +63,7 @@ interface FormType<T extends object> {
`T`: is the type of the result object
`value`: is a reference to the current value of the result
+`initial`: data for resetting
`readOnly`: when true, fields won't allow input
`onUpdate`: notification of the result update
`computeFormState`: compute a new state of the form based on the current value
@@ -114,12 +123,12 @@ function MyFormComponent():VNode {
}
Example
--------------------------
+--------
-For example, for the form shape:
+Consider a form shape represented by the TypeScript type:
```
-type theFormType = {
+type TheFormType = {
name: string,
age: number,
savings: AmountJson,
@@ -132,10 +141,10 @@ type theFormType = {
}
```
-one example instance of the form:
+An example instance of this form could be:
```
-const theFormValue = {
+const theFormValue: TheFormType = {
name: "Sebastian",
age: 15,
pets: ["dog","cat"],
@@ -146,7 +155,11 @@ const theFormValue = {
}
```
-and one example valid state
+For such a form, a valid state can be computed using a function like
+`computeFormStateBasedOnFormValues`, returning an object indicating
+the state of each field, including properties such as `hidden`,
+`disabled`, and `required`.
+
```
function computeFormStateBasedOnFormValues(formValues): {