Implementation of Online Application Forms with OpenPetra

From OpenPetra Wiki
Jump to navigation Jump to search

Current situation

  • At the moment, we use ext.js for the forms.
  • All forms are generated based on yaml files, very similar to our generation of Winforms.
  • The main template file is in csharp\ICT\PetraTools\Templates\ExtJs\submitForm.js

Commands to use

generate all webforms in openpetraorg/webserver/OpenPetraOrg.ext 

nant generateWebforms

generate all webforms in openpetraorg/webserver/OpenPetraOrg.ext/Samples/SimpleForm 

nant generateWebform -D:file=Samples/SimpleForm

start the webserver, using xsp2 from Mono (make sure you got installed Mono on your Windows machine, and the path to Mono is set in the OpenPetra.build.config file): 

nant startWebServer

Visit the demo and samples page: 

http://localhost:8081

Existing demo applications and forms

  • Simple form: very simple, to understand the yaml file etc
  • Multi Country and Language: depending on the country-id parameter, a different form is loaded and also in a different language.

TODO: Controls to be implemented and tested

  • Date time picker for birthday, limiting to certain years (custom validation)
  • Multi Language form that displays a different HTML text inside an iframe
  • File upload with server side validation of image dimensions and file size (extra web service for that?)
  • Navigation between several pages, with final submission button

Server-side functionality

  • main project is in \csharp\ICT\Petra\Server\app\WebService
  • TODO: store the data in the OpenPetra database
  • TODO: possibly: allow user to come back and modify his own data
  • TODO: generate PDF, send Email

Ext.js hints and tricks

show all properties of an element: 

//alert(MainForm.cards.length);
for(prop in MainForm.cards[1]){
  value = MainForm.cards[1][prop].toString();
  if (value.indexOf("\n"))
  {
    value = value.substr(0, value.indexOf("\n"));
  }

  console.log(prop + " " + value);
}
for(prop in Ext.ux.Wiz.Card.superclass){
  console.log(prop + " " + Ext.ux.Wiz.Card.superclass[prop]);
}
Retrieved from ‘https://wiki.openpetra.org/index.php?title=Implementation_of_Online_Application_Forms_with_OpenPetra&oldid=1416’