Let me give you a quick introduction on what this “Sahana XForm” is all about and what is trying to achieve through this. The main idea behind this effort is to come up with a working prototype to transform the forms on Web-based applications in to a print friendly form that heavily involves data capturing. Sahana is one such application that heavily involves in such activities and it’s main targeted for the overall management of diverse activities in a post disaster situation.
A disaster means it involves recording and dissemination of information among various parties for the immediate fulfillment of victims requirements. Although there are very sophisticated methods and equipments in most cases still the preferred and the used method is the use of paper based forms. In here I should especially mentioned about Chamindra because it was he who came up with this idea and encouraged me on this.
In this approach it provides a way to extracts the XHTML from elements in an active Web form and transform them to a print friendly format (printed and to be used as off-line paper forms) leaving behind the images and unwanted elements on the page. In order for the functionality to work the XHTML mark for the form should be organized in the following manner.
<fieldset><legend> Identity </legend>
<label for="nic"> Identity Card Number </label>
<input type="text" name="nic" id="nic"/>
<label for="passport"> Passport Number </label>
<input type="text" name="passport" id="passport"/>
</fieldset>
<label for="family_name"> Family Name </label>
<input type="text" name="family_name" id="family_name" value=""/>
<label for="local_name"> Local Name </label>
<input type="text" name="local_name" id="local_name" value=""/>
<label for="dob"> Date of Birth </label>
<input type="text" name="dob" value="" id="dob"/>
<label for="opt_gender"> Gender </label>
<select name="opt_gender">
<option value="male"> Male </option>
<option value="female"> Female </option>
</select>
</fieldset>
<label for="address"> Address </label>
<textarea name="address" id="address"></textarea>
<label for="zip"> Postal Code </label>
<input type="text" name="zip" id="zip"/>
<label for="home_phone"> Home Phone </label>
<input type="text" name="home_phone" id="home_phone"/>
<label for="mobile_phone"> Mobile Phone </label>
<input type="text" name="mobile_phone" id="mobile_phone"/>
</fieldset>
</form>
Next using JavaScript scripting language and CSS implement the functionality as follows.
- First identify Web forms from rest of the page(s) (It is very important that you enclose all form related elements inside a XHTML div element having a class attribute which holds a name. eg: <div class=”xform-container” > rest comes here… </div> ).
- On success extract the XHTML form elements.
- Then regenerate the XHTML markup on the same page. This should maintain the correct sequence of the original form(Label name and its corresponding input ).
- Use the CSS to maintain the layouts and dimensions to match the layout for each section, which was there on the original form (Label name and the place to fill the data)
- Next since we need to print this generated from to a paper we should arrange the components to fit into the page size(A4, Letter. Legal, etc…).
- To invoke the functionality link the JavaScript file that hold the logic to the head section of the Web page and call the initialization function on any convenient location on the page (eg: <a href=”#” onclick=”init_xform();” title=”Generate XForm” > XForm</a>).
In the current implementation it is capable of transforming the page as shown in figure 1 into a form as shown in figure 2. Since the functionality itself can be extended for various directions I would like to invite all those who are interested in this work to come join us to extend this approach and the functionality to be readily used(eliminate the application level dependencies and to extend it to generate customized label layouts, etc… ) with any web based system just by linking the JavaScript library and generate the print friendly form. The code library is released under LGPL license along with Sahana.
Figure 1: Disaster Victim Registry - Web from
Figure2: Disaster Victim Registry - XForm
Your comments and suggestions are highly appreciated in developing this into a readily usable library for any web application.
tHOUGHTS & iDEAS 