-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathexamples.html
357 lines (336 loc) · 19.7 KB
/
examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<article class="docs-article">
<section class="docs-section" id="example">
<div>
<h1 id="usage-instructions-with-examples">Usage Instructions with Example
</h1><hr><br>
<blockquote>
<p>The following instructions are using an example from the formsflow.ai -
<i><strong> Freedom of Information and Protection of Privacy.</strong></i>
</p>
</blockquote>
<h3 id="designer-steps">Designer Steps</h3>
<ul>
<li>Log in to <a href="http://localhost:3000">http://localhost:3000</a>
(forms-flow-web) with valid <a href="default user credential.html" target="_blank">user
credentials for the designer</a>.</li>
<li>After the login is successful you will be redirected to <a
href="http://localhost:3000/form">http://localhost:3000/form</a> where
you
can <code>Create / Upload / Download / View / Edit / Delete</code> a form.</li>
<p><img src="./assets/images/Screenshot 2022-05-13 120316.png" alt="image" width="1000" height="500"></p>
<li>A new form can be created by two methods: designing a new form, or by uploading an existing form in JSON format.
</li>
<ul>
<strong><li>Create a New Form
</li></strong>
<ol>
<li>Click on Create New Form Button. The web page to design the form opens.</li>
<li>Fill in the details, drag and drop the required components , to build the form.</li>
<img src="./assets/images/Screenshot 2022-08-17 170901.png" alt="image" width="1000" height="500">
<li>The components can be customised as they are added .</li>
</ol>
<strong><li>Upload a form</li></strong>
<ol>
<li>A form in JSON format can be uploaded using the Upload Form button.</li>
</ol>
</ul>
</ul>
<p>There are few example JSON files in our repository which can be downloaded by clicking <a
href="https://github.com/AOT-Technologies/forms-flow-ai-examples/blob/main/forms-examples/formio.zip">Here</a> .</p>
<ul>
<li><strong>Example: </strong>Upload FreedomOfInformationAndProtectionOfPrivacy.json file.
</li>
<br><img src="./assets/images/177704043-c817381d-0abd-4772-adfc-d0c3a71e8972.png"
width="1000"></img><br><br>
<li>You can modify the form by clicking on the <strong>View/Edit Form</strong>
button or continue by clicking the <strong>Next</strong> button.</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 120606.png" alt="image" width="1000" height="500"></p>
<br>
<ul>
<li>At this stage form designing is completed.You can click on the <strong>EDIT
button</strong> and associate a default workflow if you want.
</li>
<p><img src="./assets/images/Screenshot 2022-05-13 120712.png" alt="image" width="1000" height="500"></p>
<ul>
<li>In order to deploy any other workflow,<p> go to <a
href="https://github.com/AOT-Technologies/forms-flow-ai-examples/blob/main/bpm-examples/camunda/approval-process.zip">https://github.com/AOT-Technologies/forms-flow-ai-examples/blob/main/bpm-examples/camunda/approval-process.zip</a>
and
download any sample workflow (e.g.:one-step-approval.bpmn).</p></li><br>
<br><img src="./assets/images/177704370-92ae070e-e9a3-4ad7-9b65-0b9e89071ff3.png" height="150"
width="1000"></img><br><br><br>
<li>Move to Processes tab, choose the workflow one-step-approval, enter a deployment name and click on
Deploy.</li><br>
</ul>
<img src="./assets/images/Screenshot 2022-08-12 120358.png" height="500" width="1000"><br><br><br>
<img src="./assets/images/workflow.png" height="600" width="1000"><br>
<br><br>
<br>
<li>After associating the workflow, click on the <strong> Next</strong> button to Preview and Confirm.
</li><br>
<img src="./assets/images/Screenshot 2022-07-07 152421.png" height="500" width="1000"></img><br>
<li>You can click on the <strong> Next</strong> Button and publish the form for clients.</li><br>
<img src="./assets/images/Screenshot 2022-07-07 152653.png" height="500" width="1000"></img>
<li>Click on <strong> Save</strong> button to completed designing a form.</li>
<li>Form designing is successfully completed, you can now Log out and go to <a
href="#client--steps2">Client Steps</a>.</li>
</ul>
<h3 id="client--steps2">Client Steps</h3>
<ul>
<li>Log in to <a href="http://localhost:3000">http://localhost:3000</a>
(forms-flow-web) with valid <a href="default user credential.html" target="_blank">default
user credentials for the client</a>.</li>
<li>After the login is successful you will be redirected to <a
href="http://localhost:3000/form">http://localhost:3000/form</a> where
you
can View and Submit a form.</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 142749.png" alt="image" width="1000" height="500"></p>
<ul>
<li>Click <strong>Submit New Button</strong> on the form to fill and submit it.
</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 143201.png" alt="Image 1" width="1000" height="500"></p>
<ul>
<li>If you had associated a workflow with the form, the form will start the
workflow.</li>
<li>Once this action is completed, you can now log out and go to <a href="#reviewer-steps">Reviewer
Steps</a> if you have a user review
mentioned in your workflow.</li>
</ul>
<h3 id="reviewer-steps">Reviewer Steps</h3>
<ul>
<li>Log in to <a href="http://localhost:3000">http://localhost:3000</a>
(forms-flow-web) with valid <a href="default user credential.html" target="_blank">default
user credentials for the reviewer</a>.</li>
<li>After the login is successful you will be redirected to <a
href="http://localhost:3000/task">http://localhost:3000/task</a>.</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 145744.png" alt="Image 9" width="1000" height="500"></p>
<ul>
<li>You can navigate to the Applications tab to view the Form
submissions.</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 145835.png" alt="Image 10" width="1000" height="500"></p>
<ul>
<li>You can View the submissions against a form by clicking on the
<strong>View</strong> button.
</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 145929.png" alt="Image 26" width="1000" height="500"></p>
<ul>
<li>You can click on the <strong>Export PDF</strong> button to view the submission data as a PDF.</li>
</ul>
<p><img src="https://user-images.githubusercontent.com/83584866/124598443-3cacbb80-de82-11eb-8a19-bfe379978864.PNG"
alt="Image 6" width="1000" height="500"></p>
<ul>
<li>On clicking the associated task that was recently created, ie.., <em>Freedom
of
Information and Protection of Privacy</em>, the task detailed menu
usually
has three sections - <strong>Form</strong>, <strong>History</strong>,
<strong>Diagram</strong>.
</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 145744.png" alt="Image 15" width="1000"
height="500"><br><br>
<img src="./assets/images/Screenshot 2022-05-13 150110.png" alt="Image 16" width="1000"
height="500"><br><br>
<img src="./assets/images/Screenshot 2022-05-13 150159.png" alt="Image 17" width="1000" height="500">
</p>
<ul>
<li>On claiming the task, the Reviewer can mark the form as reviewed or to return it with his/her feedback to the client.
</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 150354.png" alt="Image 18" width="1000"
height="500"><br><br>
<br><br>
<img src="./assets/images/Screenshot 2022-05-13 145242.png" alt="Image 20" width="1000" height="500">
</p>
<ul>
<li>In the <strong>Application</strong> section, the form submission history can
be
found and the form can be viewed.</li>
</ul>
<p><img src="./assets/images/Screenshot 2022-05-13 150449.png" alt="Image 21" width="1000"
height="500"><br><br>
<img src="./assets/images/Screenshot 2022-05-13 150559.png" alt="Image 24" width="1000"
height="500"><br><br>
</p>
<ul>
<li>Reviewer action is completed.</li>
</ul>
<h2 id="create-new-business-license-application">Create New Business License
Application
</h2>
<blockquote>
<p>The following instructions are using an example form from the Form.io -Create
<i><strong>New Business License Application</strong></i> .
</p>
</blockquote>
<h3 id="designer-steps">Designer Steps</h3>
<ul>
<li>Log in to <a href="http://localhost:3000">http://localhost:3000</a>
(forms-flow-web) with valid <a href="default user credential.html" target="_blank">user
credentials for the designer</a>.</li>
<li>After the login is successful you will be redirected to <a
href="http://localhost:3000/form">http://localhost:3000/form</a> where
you
can <code>Create / View / Edit / Delete</code> a form.</li>
</ul>
<p><img src="./assets/images/business1.png" alt="image" width="1000" height="500"></p>
<ul>
<li>Select the <i><strong>New Business License Application</strong></i> form by clicking on
it.
</li>
<li>You can modify the form by clicking on the <strong>View/Edit Form</strong>
button or continue by clicking the <strong>Next</strong> button.</li>
</ul>
<p><img src="./assets/images/business2.png" alt="image" width="1000" height="500"></p>
<ul>
<li>At this stage form designing is completed, you can click on the <strong>EDIT
Button</strong> and associate a workflow - Two-Step Approval-listener. </li>
</ul>
<p><img src="./assets/images/business3.png" alt="image" width="1000" height="500"></p>
<ul>
<li>After the associate workflow is completed click on the <strong>Next
Button</strong> to Preview and Confirm.</li>
<li>You can click on the <strong>EDIT Button</strong> and publish the form for
clients.</li>
</ul>
<p><img src="./assets/images/business4.png" alt="image" width="1000" height="500"></p>
<ul>
<li>Click on <strong>SAVE Button</strong> to completed designing a form.</li>
<li>Form designing is successfully completed, you can now Log out and go to <a
href="#client---steps">Client Steps</a>.</li>
</ul>
<h3 id="client---steps">Client Steps</h3>
<ul>
<li>Log in to <a href="http://localhost:3000">http://localhost:3000</a>
(forms-flow-web) with valid <a href="default user credential.html" target="_blank">default
user credentials for the client</a>.</li>
<li>After the login is successful you will be redirected to <a
href="http://localhost:3000/form">http://localhost:3000/form</a> where
you
can View and Submit a form.</li>
</ul>
<p><img src="./assets/images/business5.png" alt="image" width="1000" height="500"></p>
<ul>
<li>Click <strong>Submit New</strong> button on the form which you wanted to
submit.
</li>
<li>The previous action will redirect you to the form, where you can fill in the
details and Submit them.</li>
</ul>
<p><img src="./assets/images/business6.png" alt="Image 2" width="1000" height="500"></p>
<ul>
<li>
<p>Fill in the details and Submit the form, You can repeat this action as
per
your requirement.</p>
<p><img src="./assets/images/business7.png" alt="Image 3" width="1000"
height="500"></p>
</li>
<li>If you had associated a workflow with the form, the form will start the
workflow.</li>
<li>This action is completed, you can now Log out and go to <a href="#clerk-steps">Clerk
Steps</a>.</li>
</ul>
<h3 id="clerk-steps">Clerk Steps</h3>
<ul>
<li>Log in to <a href="http://localhost:3000">http://localhost:3000</a>
(forms-flow-web) with valid <a href="default user credential.html" target="_blank">default
user credentials for Clerk</a>.</li>
<li>After the login is successful you will be redirected to <a
href="http://localhost:3000/task">http://localhost:3000/task</a>.</li>
</ul>
<p><img src="./assets/images/business8.png" alt="Image 10" width="1000" height="500"></p>
<ul>
<li>You can navigate to the Applications tab to <strong>View the Form</strong>
submissions.</li>
</ul>
<p><img src="./assets/images/business9.png" alt="Image 12" width="1000" height="500"></p>
<ul>
<li>The associated task can be found for the Clerk role in the <strong>Task
Menu</strong> section.</li>
<li>
<p>On clicking the associated task which was recently created, i.e.., <em>New
Business License Application with Two-Step Approval-listener, </em> the
task
detailed menu usually has three sections – <strong>Form</strong>,
<strong>History</strong>, <strong>Diagram</strong>.<br><br>
<img src="./assets/images/business10.png" alt="Image 18" width="1000"
height="500"><br><br>
<img src="./assets/images/business11.png" alt="Image 19" width="1000"
height="500"><br><br>
<img src="./assets/images/business12.png" alt="Image 20" width="1000"
height="500">
</p>
</li>
<li>
<p>On claiming the task, the Clerk is able to mark the form as reviewed or to return it with his/her feedback to the client.
</p>
</li>
<li>
<p>Return option will send the form back to the client for edit and
resubmission.<br><br>
<img src="./assets/images/business13.png" alt="Image 21" width="1000"
height="500"><br><br><br>
<img src="./assets/images/business14.png" alt="Image 22" width="1000"
height="500">
</p>
</li>
<li>
<p>On returning, the form application status changes from New to Resubmit
with an
edit option.<br><br><img src="./assets/images/business15.png" alt="Image 23"
width="1000" height="500"></p>
</li>
<li>Log in as a client and resubmit the form, then status changes to
resubmitted.<br><br>
<img src="./assets/images/business16.png" alt="Image 36" width="1000"
height="500">
</li>
<li>
<p>Log in as a clerk and claim the task. Submit his/her review with
feedback.
Then the status changes to reviewed.<br><br>
<img src="./assets/images/business17.png" alt="Image 52" width="1000"
height="500">
</p>
</li>
<li>
<p>This action is completed, you can now log out and go to <a href="#approver-steps">Approver
Steps</a>.</p>
</li>
</ul>
<h3 id="approver-steps">Approver Steps</h3>
<ul>
<li>Log in to <a href="http://localhost:3000">http://localhost:3000</a>
(forms-flow-web) with valid <a href="default user credential.html" target="_blank">default
user credentials for Approver</a>.</li>
<li>After the login is successful you will be redirected to <a
href="http://localhost:3000/task">http://localhost:3000/task</a>.</li>
</ul>
<p><img src="./assets/images/business18.png" alt="Image 54" width="1000" height="500"></p>
<ul>
<li>The associated task can be found for the Approver role in the <strong>Task
Menu</strong> section.</li>
</ul>
<ul>
<li>
<p> On claiming the task, the Approver is able to mark the form with his/her
review(review approved/rejected/returned) and can add feedback.
<img src="./assets/images/business19.png" alt="Image 65" width="1000"
height="500"><br><br>
<img src="./assets/images/business20.png" alt="Image 66" width="1000"
height="500">
</p>
</li>
<li>
<p>Now that this action is completed, the New Business Licence Application has completed its workflow.</p>
</li>
</ul>
</div>
</section>
</article>