Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
User Story Description:
| Anchor | ||||
|---|---|---|---|---|
|
As a Submitter I want to be able to create & save a pre-populated template for a given form. This can be done in two different ways:
A Submitter submits the form once which generates a submission that they can go back to whenever they want. The new feature would be that if they want to submit the form again (i.e. new quarter) then they can start from the previously completed submission to have the field pre-populated from that previous submission
A Submitter simply generates an actual “template” type submission which can then be used to create a new submission which would be pre-populated with the values set in the template.
At this point, both solutions should be explored, as they can both serve their own purpose.
Business Rationale:
Priority: Could Have
Some forms are filled out on a regular basis and some data points will have the same value from one submission to another. Having them pre-filled can simplify the user experience and help with data consistency by limiting the load on the user.
Dependencies:
[List potential dependencies with other User Stories or Tasks]
# | Task or User Story | Type of Dependency |
3 | #3: (Submitters) Field Pre-population from previous submission | Child |
23 | #23: (Submitter) Assign External/Custom Validation Rules to Forms | Parent |
|
| |
|
|
Technical Details:
When the submitter clicks on the copy button the system will send him to a new page and we copy the data of this old submission form to this new form but nothing saves yet on the server after making the change the submitter can save the draft , submit or cancel the copy.
How to send the submitter to the new page ?
The URL must contain the [ID] of the submission form clicked. On the new page we catch the [ID] from the URL and we make a call to the server to get the submission form .
What’s happen on the server ?
First we check if the [ID] of the submission exist, next we check if this submission form is for the logged user. If every thing is OK, now we can send the data to the client .
Remember :
A form has list of version ,the pre-populated template must be create from the last version of the form.
the form is store in the database as a jsonb using this format :
| Code Block | ||
|---|---|---|
| ||
{
"type": "form",
"display": "form",
"components": [
{
"id": "eyipb8",
"key": "nom",
"case": "",
"mask": false,
"type": "simpletextfield",
"input": true,
"label": "Nom",
"addons": [],
"hidden": false,
"prefix": "",
"suffix": "",
"unique": false,
"widget": {
"type": "input"
},
"dbIndex": false,
"overlay": {
"top": "",
"left": "",
"style": "",
"width": "",
"height": ""
},
"tooltip": "",
"disabled": false,
"multiple": false,
"redrawOn": "",
"tabindex": "",
"validate": {
"custom": "",
"unique": false,
"pattern": "",
"multiple": false,
"required": false,
"maxLength": "",
"minLength": "",
"customMessage": "",
"customPrivate": false,
"strictDateValidation": false
},
"autofocus": false,
"encrypted": false,
"hideLabel": false,
"inputMask": "",
"inputType": "text",
"modalEdit": false,
"protected": false,
"refreshOn": "",
"tableView": false,
"attributes": {},
"errorLabel": "",
"labelWidth": "",
"persistent": true,
"properties": {},
"spellcheck": true,
"validateOn": "change",
"clearOnHide": true,
"conditional": {
"eq": "",
"json": "",
"show": null,
"when": null
},
"customClass": "",
"description": "",
"displayMask": "",
"inputFormat": "plain",
"labelMargin": "",
"placeholder": "",
"defaultValue": "",
"dataGridLabel": false,
"labelPosition": "top",
"showCharCount": false,
"showWordCount": false,
"calculateValue": "",
"calculateServer": false,
"customConditional": "",
"allowMultipleMasks": false,
"customDefaultValue": "",
"allowCalculateOverride": false,
"truncateMultipleSpaces": false
},
{
"id": "enq9jmv",
"key": "submit",
"size": "md",
"type": "button",
"block": false,
"input": true,
"label": "Submit",
"theme": "primary",
"action": "submit",
"addons": [],
"hidden": false,
"prefix": "",
"suffix": "",
"unique": false,
"widget": {
"type": "input"
},
"dbIndex": false,
"overlay": {
"top": "",
"left": "",
"style": "",
"width": "",
"height": ""
},
"tooltip": "",
"disabled": false,
"leftIcon": "",
"multiple": false,
"redrawOn": "",
"tabindex": "",
"validate": {
"custom": "",
"unique": false,
"multiple": false,
"required": false,
"customPrivate": false,
"strictDateValidation": false
},
"autofocus": false,
"encrypted": false,
"hideLabel": false,
"modalEdit": false,
"protected": false,
"refreshOn": "",
"rightIcon": "",
"tableView": false,
"attributes": {},
"errorLabel": "",
"persistent": false,
"properties": {},
"validateOn": "change",
"clearOnHide": true,
"conditional": {
"eq": "",
"show": null,
"when": null
},
"customClass": "",
"description": "",
"placeholder": "",
"defaultValue": null,
"dataGridLabel": true,
"labelPosition": "top",
"showCharCount": false,
"showWordCount": false,
"calculateValue": "",
"calculateServer": false,
"disableOnInvalid": true,
"allowMultipleMasks": false,
"customDefaultValue": "",
"allowCalculateOverride": false
}
]
} |
in the snippet above we have the JSON for a form with one field call name its a input . in the one bellow we have the snippets for a submission for this form.
| Code Block | ||
|---|---|---|
| ||
{
"data": {
"nom": "test",
"submit": true
},
"state": "submitted",
"metadata": {
"offset": -240,
"onLine": true,
"origin": "http://localhost:8083",
"pathName": "/app/form/submit",
"referrer": "",
"timezone": "America/Toronto",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36",
"browserName": "Netscape"
}
} |
Dont forget our goal its to create a copy of old submission form. Data section contain the value of each field, dont forget to change the state and the metadata section.
we also need to check if there is no new field remove or add in this version and to add/remove it in the data section .
Helper :
| Code Block | ||
|---|---|---|
| ||
var data = {
"nom": " test",
"submit": true
}, |
We can convert this object above to 2 arrays one for keys and one for values :
| Code Block | ||
|---|---|---|
| ||
const propertyNames = Object.keys(data); console.log(propertyNames); // ['nom', 'submit'] const propertyValues = Object.values(data); console.log(propertyValues); // ['test', 'true'] |
After creating those to 2 array we merge them to create one array with key->value , in this new array we can add or remove value and we can create an object from this array like bellow .
| Code Block | ||
|---|---|---|
| ||
const entries = new Map([
['nom', 'submit'],
['test', true]
]);
const obj = Object.fromEntries(entries);
console.log(obj);
// expected output: Object { nom: "test", submit: true } |
Acceptance Criteria:
[List the Acceptance Criteria]
# | Description | Notes |
1 | As a submitter, I can see a button to copy a form I submitted that has a completed status. |
|
2 | As a submitter, when i click on the copy button i redirect to second page where i have a form fill with the previous data of the old submission form . |
|
3 | As submitter, i can change data from this new form and save it as a draft or submit it. |
|
4 | As submitter, i can cancel the copy . |
|
5 |
|
|
Prototype/Mockups
Provide high fidelity prototype or mockup
Out of Scope:
Contact(s):
Table of Contents
| Table of Contents | ||||
|---|---|---|---|---|
|
| Code Block |
|---|