Introducing HTML Form Entry Module with File Upload & Download Feature

Owned by Jibesh Patra
Last updated: Oct 26, 2013 by Mark GoodrichVersion comment
3 min read

Introduction

NOTE: this functionality has not yet been completed.  See details here:

https://tickets.openmrs.org/browse/HTML-314

HTML form entry module is basically used for creating custom forms that can be filled up by the data clerks, A variety of information can be captured by custom HTML forms. Few, of these can be like patient age, weight etc. Until now, there was restriction to the myriad varieties of data that could be captured by HTML forms. The, restriction was inability of creating custom forms that could captures patient data such as Images, document reports etc. The present improvement of HTML form entry module overcomes this restriction and allows creation of custom HTML forms that can do so.

Documentation / How-To

It is assumed that the user has already downloaded & installed HTML form entry module containing the enhancement of file upload/download feature. More details can be found here.

The whole walk-through has been divided into two parts. While Part 1 deals with the basic steps of creating a HTML form with a file Uploader Part 2 deals on how to use it.

Part 1 

For demonstration purposes the first 5 steps creates a new concept of type Complex. If the user already has got a concept with Datatype Complex and also knows the Id of the concept, can skip to step 6.

1. Go to Administration > View Concept Dictionary

2. Click on Add new concept

3. Provide a name to the newly created concept

4. Select Datatype as Complex & Handler as ImageHandler/TextHandler

5. Click on Save and take a note of the Id of the newly created concept.

6. Go to Administration > Manage HTML Forms > New HTML form ( Or Edit an existing form )

7. If creating a new HTML form then fill out the name and other required details and click Save

8. Scroll to the tag <section headerLabel="1. Encounter Details"> & add a row to the table of this section using the following code.

<tr> <td>Date:</td> <td><encounterDate default="today"/></td> </tr>
   ( Do not forget to fill the concept Id field with appropriate concept Id having datatype Complex )

                            <tr>

<td>Upload:</td>

<td><obs conceptId="_____"/></td>

    </tr>

9. Click on Save.

10. A file uploader will get rendered.

Now this file Uploader can be used to upload files through the HTML form.

Part 2 

1. Go to patient dashboard and click on the HTML form created.

2. Fill ou required details and select an Image if ImageHandler was selected during creation (step 4 of Part 1) of the Concept else if TextHandler was selected, any file type can be selected except Images.

3. Click on Enter form

4. From patient dashboard click on Visits

 5. The filled out details along with uploaded files can be viewed by clicking on the relevant entry of 'View' column.

 6. The saved form can also be Edited if the User wishes so.

 7. The Editable options regarding the Uploaded file are :

              1) The file can be retained as it is

              2) A new file can be uploaded in its place

              3) The file can be deleted

A detailed video can be found here:  YouTube

Screenshots

1. A collage displaying the above steps

2. Using the HTML form entry module with file upload feature

Using the form to select a file to be uploaded. 

The file being displayed on saving the form

 

Editing the submitted HTML form. The user has three choices regarding the uploaded file: 1. Retain it  2. Upload a new file  3. Delete the file

 

The HTML form after deleting the file.

 

About

This enhancement of the HTML form entry module was developed by @Jibesh Patra under the guidance of  @Saptarshi Purkayastha & @Mark Goodrich for Google Summer Of Code 2012