Sahana XForm

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.

<h2>Personal Details</h2>
<div class="xform-container">
<form name="form" >
  <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><legend> Basic Details </legend>
     <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>

  <fieldset><legend> Contact Information </legend>
     <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"/>

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.

Disaster Victim Registry - Web from

Figure 1: Disaster Victim Registry - Web from

Disaster Victim Registry - XForn

Figure2: Disaster Victim Registry - XForm

Your comments and suggestions are highly appreciated in developing this into a readily usable library for any web application.



  1. April 9, 2014 at 7:06 am

    Wow, that’s what I was seeking for, what a material!

    existing here at this web site, thannks admin of this site.

  2. July 20, 2014 at 2:17 am

    I feel this is among the such a lot important information for me.
    And i’m satisfied studying yolur article. However should statement on few common issues, The
    web site style is wonderful, the articles is in reality nice
    : D. Good job, cheers

  3. September 15, 2014 at 1:01 am

    Pretty section of content. I just stumbled upon your website and in accession capital to assert that
    I get actually enjoyed account your blog posts.
    Any way I’ll be subscribing to your feeds and even I achievement you
    access consistently rapidly.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: