WYSIWYG Form Designer Project

Overview

The goal of this project is to create a What You See Is What You Get (WYSIWYG) Form Designer for the already existing HTML Form Entry module of OpenMRS.

The HTML module offers a seamless experience in creating forms, because no installation is required and it is used in the browser. It is also a free alternative to Microsoft InfoPath. However, the lack of a visual form designer, makes it only useful for users with some programming experience in HTML. With an additional WYSIWYG Form Designer, this module could become the (free) tool of choice on designing forms for OpenMRS.

Link to the module repository

Installation Instructions

1. Checkout the htmlformentry module from the repository. The htmlformentrydesigner module was only tested on the 1.4.x branch of htmlformentry, so you ought to checkout that branch.
2. Add an extension point in the htmlformentry module.

For instance, in web/module/htmlForm.jsp add the following lines after the first h2 header (<h2><spring:message code="htmlformentry.HtmlForm.edit.title" /></h2>):

   <openmrs:extensionPoint pointId="org.openmrs.module.htmlformentry.designer">
       <openmrs:portlet url="${extension.portletUrl}" moduleId="${extension.moduleId}" />
   </openmrs:extensionPoint>

Note: Some previous versions of htmlformentrydesigner don't work well with this code. Use this if you have problems with the above code:

   <openmrs:extensionPoint pointId="org.openmrs.module.htmlformentry.designer">
       <openmrs:portlet url="designerButtons" moduleId="htmlformentrydesigner" />
   </openmrs:extensionPoint>

1. Compile and install the HTML Form Entry module by the Manage Module page
2. Download the beta version of the HTML Form Entry Designer here, or checkout the one on the repository
3. Install the module by the Manage Module page

How to Use - Quick Tutorial

Start by creating a form in Administration -> Forms -> Manage Form. If there are already forms in the list you can duplicate one, or just create a simple form for testing (a form only needs to have a name and a version).

Then, go to Administration-> HTML Form Entry -> Manage HTML Forms. You should see a list of all forms created and a Add option, that I'll use for now.

If everything was installed properly, you should see a "Switch to Designer View" link just below the big Edit Form title. I would suggest to open it a new window or tab, so you can then quickly change back to this page (yes, I know, the interaction between the two modules isn't very good yet).

In the Edit Form page, select the form you've created at the beginning and a name for it. The HTML will be generated by the designer view :)

At the Designer View, you will get a wysiwyg editor, with 3 levels of toolbars. The first two are typical controls that you'll find on other editors. The last one (with three buttons) is specialized in the htmlformentry module.

The first button (Obs) adds an Observation widget. You first select a concept for that observation (that should be the question you want the user to answer, like: NUMBER OF HOSPITALIZATIONS IN PAST YEAR). Depending on the datatype of the concept, you'll be given a few widgets that you can choose for that concept.

The second button (Enc) adds an Encounter widget. You can add a widget for the Encounter Date, Location and Provider.

The third button (Sub) adds an "Enter Form" button to the form. Every form should have one, or else the user wouldn't be able to enter anything in it.

After you've created the form, switch to Code View (click on the button, not on the link) to get the code of the form. You can now enter it in the HTML textarea of the Edit Form page and save it.

Test Lab

You can test the module here

• Username: admin
• Password: test

Resources

• HTML Form Entry Designer - Development Tracking
• Html Form Entry Module
• Project Blog

Developers

• João Portela
• Darius Jazayeri (mentor)
• Daniel Futerman (co-mentor)

---

Planning phase

The text below corresponds to what was decided for GSOC.

Requirements

A WYSIWYG Form Designer should:

• have a clean interface, with a minimalistic design. See GUI Draft
• retrieve concepts and concept information automatically from the database, in order to aid the user developing forms, minimizing user errors
• store widget information, allowing other developers to create their own widgets (low priority)
• allow users to switch from Code View and Design View
• allow users to edit the formatting and properties of already added widgets

Mockups

Darius drew a mockup for this project some months ago:

This is one I drew based on feedback of Darius and Daniel

Milestones

1. Design the UI for the widgets
   1. Identify potential widgets used in OpenMRS
   2. Identify for each widget the properties they need to specify
   3. Design the UI for each widget, based on the previous points.
2. Prepare a framework for loading the Concept Dictionary
   1. Create the "Add Concept" dialog
   2. Create the search box for selecting a concept
   3. Retrieve the datatype of the concept, and add a way for widgets to "register" to that datatype
3. Develop a HTML generator for some widgets
   1. Identify the relationship between each widget and generated HTML code
   2. Develop an object model that stores the widget variable information
   3. Develop the HTML generator integrated in the Add Concept Dialog
4. Integrate TinyMCE or FCKEditor into the previous points
   1. Create a minimalistic theme (with a big text area and the less buttons as possible)
   2. Solve the generated HTML vs pure HTML problem (See Generated HTML vs Pure HTML section)
   3. Add a button for adding concepts (by calling the Add Concept Dialog)
   4. Allow basic editing of added concepts (alignment, properties, font)
5. Create a "widget reader", in order to facilitate further widget development and support future widgets
6. Add the other widgets to the module
7. Add improvements on the UI
8. Improve documentation, testing, etc.

Schedule

0. Setup the project, project pages and have everything ready for GSOC (May 23 - May 31)

1. Design the UI for the widgets (May 31 - June 11)
2. Prepare a framework for loading the Concept Dictionary (June 11 - June 21)
3. Develop a HTML generator for some widgets (June 21 - June 30)
4. Integrate TinyMCE or FCKEditor into the previous points (June 30 - July 12)
5. Create a "widget reader", in order to facilitate further widget development and support future widgets (July 12 - July 19)
6. Add the other widgets to the module (July 19 - July 31)
7. Add improvements on the UI (July 31 - August 10)
8. Improve documentation, testing, etc. (August 10 - August 17)

Goals for evaluation

• Mid-Evaluation (until July 6): Having a HTML generator ready for some widgets (Milestones 1-3)

By HTML generator, I mean a Javascript that accepts user input and generates the appropriate HTML for the HTML Form Entry Module. It should show and be adaptable to different concepts on the concept dictionary.

• Final Evaluation (until August 17): Have the final module ready, or at least with functional foundations (Remaining milestones)

About using TinyMCE or FCKEditor (or other WYSIWYG Editor)

I was unable to fully decide on the one WYSIWYG Editor that I'll use for this project. TinyMCE seems to be more easy to customize, however some of its plugins (like Image Manager) are not free. FCKEditor is completely free and I liked its interface. If I were to choose now, I would go with FCKEditor, but since I only plan to integrate the editor in the end of June, I still have time to do a more informed decision.

Generated HTML vs Pure HTML

The code used by the HTML Form Entry Module is not pure HTML that can be read by browsers (or TinyMCE and FCKEditor for that matter). There are some ways to solve this problem:

1. Comment non-HTML code in the Design View
2. Generate pure HTML code for the Design View and non-pure HTML for the Code View/Save