online form/invoice designer

[aswath satrasala]

Hello,

We are developing an accounting SaaS using servlets/jsps and gwt 

The users would like to create their own invoice template for print purpose.  

Here are the simple steps I am imagining.

- A form designer to the left side (3/4 of the window).

- A list of Invoice variables displayed on the right.  

- The user can drag & drop the invoice variables into the form

- Save the template as a HTML with placeholders for the variables.(Some convention to identify the placeholders in the HTML)

Are there any tools/companies or opensource projects which can perform the above.  I should be able to integrate that project into my own web application.

-Aswath

[Vinny P]

Hello Aswath,

The answer to your question depends on this: how much is your budget, and how comfortable are you in Javascript or Java GWT?

If you want to build the form designer yourself, it's fairly straightforward. JQuery provides JQuery UI Draggablehttp://jqueryui.com/draggable/ where you can drag and drop elements within a section. You could provide a list of draggable elements to the user, allow them to drag and drop them to build an invoice, then figure out the element dimensions and locations by querying the object DOM. Use AJAx to send the element locations back to the server. With the dimensions and sizes, you can generate a HTML form on the server.

If you're uncomfortable with Javascript, then you can use Google GWT to build a form creator. At Google IO 2011, there was a presentation on how to use GWT to build drag and drop interfaces. Here's a video:http://www.google.com/events/io/2011/sessions/gwt-html5-a-web-developers-dream.html(forward to about 23:03 in to see the drag/drop demo). Same idea here: Build a drag and drop UI, allow users to drag and drop elements to where they're wanted, AJAX the info back up to the server, and create the form.

Personally, my company builds a handful of drag and drop-using projects, and we find that both approaches work, with some caveats. First, drag and drop is not supported on all browsers, especially older ones. Secondly, GWT can be slow sometimes, especially if your hardware is older.

If you absolutely, positively do not want to roll your own solution, you may be interested in Wufoo's embedded form generator:http://www.wufoo.com/2011/05/25/get-your-embed-on-with-the-wufoo-form-embed-kit/The forms that Wufoo creates are a bit simplistic looking, but they work and do drag/drop functionality. It's also fairly easy to implement: it's an IFRAME embedded in your site.

Last note: Creating a custom invoice with drag and drop is going to be complex. Having worked with people who do this for a living, there are a lot of variables to consider when doing this, such as text size, making sure elements don't overlap, etc. To an extent, all forms that are computer-generated are going to look at least a little bit simplistic. Here's a suggestion: Offer a free tier of autogenerated forms, but also offer a paid tier where an actual person lays out a complex invoice design. Depending on the demand, you could make a decent bit of money with this.

TLDR Version: Forms are complicated. No simple solution. Build your own or use Wufoo.



-----------------
-Vinny P
Technology & Media Advisor
Chicago, IL

@GOV on AppDotNet: https://alpha.app.net/gov

--
You received this message because you are subscribed to the Google Groups "Google App Engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-appengi...@googlegroups.com.
To post to this group, send email to google-a...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-appengine?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Sent from Gmail Mobile

[doright]

Hi Aswath,

I'm currently looking to do exactly this.  Did you find anything out there? (or write your own?)

many thanks,

Doug

[aswath satrasala]

Hello Doug

I did not find any form designer.  But, I am thinking the following, so that the users have some amount of flexibility to design/modify the invoices

- Show the CKEditor for the users - http://ckeditor.com/

- The user designs the HTML invoice with CKEditor

- In the CKEditor, the user places placeholder variables,  like ${name}, ${zipcode}, ${invoiceNo} at the desired positions

- Save this HTML along with placeholders

- Process the HTML to replace the placeholder variables. 

- Here you can use jquery, if you plan on doing on the browser, to manipulate the placeholder values.  

- However, I want to do this process of creating the final invoice on server.  I found the following  https://github.com/jawher/moulder-j.

-Aswath

--
You received this message because you are subscribed to the Google Groups "Google App Engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-appengi...@googlegroups.com.
To post to this group, send email to google-a...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-appengine.