diff options
author | Sebastian <sebasjm@gmail.com> | 2024-01-02 18:19:07 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-01-03 10:12:15 -0300 |
commit | ae0c46261c8fd8d71b38cfdd529dcf78767d327b (patch) | |
tree | 98c45f063dafa139cf718e4c90b855c289a7dea4 /design-documents | |
parent | 05a762edf2e5b26be763573476c5721c3200978f (diff) | |
download | docs-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.rst | 61 |
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): { |