Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Each time the form is submitted, frevvo Live Forms will send an email message with the form submission data, optionally an attachment snapshot of the form image, and optionally the data in XML format in an attachment named "form".

...

Tip

Note that html "pre" tags are needed around the message body if you use from textarea controls in your message body. By default any newlines in the textarea are removed by html. This is a feature of html that can be turned off using the html "pre" tag.

Print View

All frevvo Live Forms forms are printable. By selecting a form's [[V4_Designing_Forms#Printable_2 | printable checkbox]] a print [[Image:printer.gif]] icon will be displayed at the top of your form. When the form is used and the printer icon is clicked the form is rendered in a new browser tab in an HTML printable format.

...

Forms submission can be converted to PDF documents. The PDF document can be saved in frevvoLive Forms's Submission Repository, sent as an attachment to a submission email, or as an attachment to a POST to a back-end system such as a document management system.

The [[V4_Designing_Forms#Form_.26_Doc_Action_Wizards | Form and Doc action wizards]] for email and post submission control whether or not the form is converted to a PDF document and attached to the submission. You can control which form fields are added to the PDF via the [[V4_Designing_Forms#Printable | printable property]] on each field in your form.

Document Service

frevvoLive Forms's built-in document service can be used for processing your form data prior to submission.

...

Custom Print View

One example use of frevvoLive Forms's document service is to provide a print preview different from frevvoLive Forms's default print view.

All forms by default are printable. To make a form printable edit the form and check the [[V4_Designing_Forms#Printable_2 | printable property]]. Sometimes form designer required a highly customized print view. By calling frevvoLive Forms's document service you can pass all the form's xml documents to another target servlet that transforms the data into exactly the format you need and then returns html to another browser window.

...

From the point of view of the user interface, most web applications can be thought of simply as CRUD (Create, Retrieve, Update & Delete) operations on documents. In the diagram below, the form is being used to initially display a Customer and Order and then to update them. If you think in REST terms, the form is a View Resource that composes multiple Entity Resources (in this case a Customer Resource and an Order Resource), displays their current state and allows you to update them.

frevvo Live Forms provides a very flexible and powerful mechanism for interacting with documents (and the web in general). You can [http://www.frevvo.com/bucket/restlet/RestletCustomerExample.zip download source code and forms] for the discussion below. We strongly recommend that you download the example, [[#Customer_Example|study it]] and use it as a template for integrating with your own web applications.

...

For each [[V4_Designing_Forms#From_Schema|Document Type]] that you add to your form, frevvo Live Forms permits you to assign

  • a document [http://bitworking.org/projects/URI-Templates/ URI Template] resolved either using query parameters or form fields.
  • a Read method and
  • a Write method.

...

That's it. As usual, you [[V4_Using_Forms#Sharing_Forms |access the form using its URI]]. When the form is used (instantiated), you may specify one or more query parameters along with the URI. For this example, we might use a URI and query parameter: .../form/1234?customer=02. frevvo Live Forms will resolve the URI template above to: .../customers/02, GET the customer, and display the initialized form. When the form is submitted, frevvo Live Forms will automatically PUT the customer document to the same URI thereby updating the customer. The diagram below shows the interactions.

...

  1. We instantiate the form with a parameter customer=02. This causes the form to resolve the URI template and GET the customer data from: http://[server]/customers/02. The resulting XML document provides the initial state of the Customer and is used to initialize the form.
  2. Modify a value and click Submit. The form will automatically PUT to the correct resource and update the customer information.
  3. Finally, frevvo Live Forms will store the generated document set and assign it a unique URI. The document set and the documents therein can be [[V4_Using_Forms#Documents|accessed at this URI]].

...

Consider the case where a form is used to create a new customer. Follow the same steps above, except use the appropriate URI template .../customers and change the Read method to POST. That's it. As usual, you [[V4_Using_Forms#Sharing_Forms | access the form using its URI]]. When the form is used (instantiated), frevvo Live Forms will perform the POST and create the customer. It will then follow the server redirect (to the URI of the newly customer) and display the form. When the user enters customer information and submits the form, frevvo Live Forms will automatically PUT the resulting XML document to the URI of the newly created customer resource thereby updating it. The diagram below shows the interactions:

...

For example, if you enter ID 03, frevvo Live Forms will GET .../customers/03, display the form with fields initialized from the returned XML document and PUT the modified XML document to the same URI when the form is submitted. This PUT will update the customer with ID 03.

If you enter ID 99 (which does not exist), frevvo Live Forms will GET .../customers/99, which returns an empty document. The form will be displayed with default values (as entered originally by the designer). When submitted, the resulting XML document will be PUT to .../customers/99. This PUT will create a new customer with ID 99 (the behaviour depends on the implementation on the server - in our example, the PUT creates the customer).

...

This example is a good way to understand frevvoLive Forms's handling of document URIs and the powerful capabilities of composing multiple document resources into view resources. You can download the entire example including source code and forms [http://www.frevvo.com/bucket/restlet/RestletCustomerExample.zip by clicking here].

This example follows the principles of REST and uses the [http://www.restlet.org Restlet framework] but you can use any framework or server-side model that you like. As mentioned earlier, frevvo Live Forms forms can be thought of as View Resources that compose one or more Entity Resources (documents). In this example we have entities Customer and List of Customers. Reproduced here are the methods that they support.

...

This form is described in the [[#Creating_a_new_document|Creating a new document]] section above. When instantiated, it does a POST to the Read URI using the second method in the table above. This causes the server to create a new customer and return the URI of that customer. frevvo Live Forms will automatically follow this URI, GET the representation of the customer and display the form (presumably with empty values). When the user enters all required fields and submits the form, frevvo Live Forms will automatically PUT the resulting XML document to the URI for the newly created customer thereby updating the customer.

...

You can find further discussion of this example on the frevvo Live Forms blog. The relevant articles are: [http://www.frevvo.com/blog/?p=26 Part 1] and [http://www.frevvo.com/blog/?p=32 Part 2]. Other articles that may be of interest are [http://www.frevvo.com/blog/?p=23 How do I use my brand new WOA?] and [http://www.frevvo.com/blog/?p=35 Ajax+REST: the next killer app?].

PaperVision® / ImageSilo® Connector

frevvo Live Forms supports direct connectivity with Digitech Systems' PaperVision® and ImageSilo® document management products. This Connector allows you to save submissions to the PaperVision® and ImageSilo® document management repository as PDF, TIFF, .JPG and .GIF format.

...

Code Block
<context-param>         
        <param-name>frevvo.pve.login.url</param-name>  
        <param-value>https://login.imagesilo.com/HTTPInterface.asp</param-value> 
 </context-param>

In your browser, go to: http://<server-name>[:port]/pve/test. You should see a message "Your PVE Connector request was successfully handled." This means the connector is properly installed.

...

For Live Forms In-house users, if the TIFF option doesn't appear you have not yet installed the TIFF software into your frevvo Live Forms installation.

  1. The wizard connects to your selected project and retrieves the list of key index fields from PaperVision/ImageSilo
  2. Map each PaperVision/ImageSilo key index field to a field on your frevvo Live Forms form. The dropdown contains a list of all the form fields listed by field name (not field label).
  3. Click Finish

...

Integrating with your database 

frevvo Live Forms provides a simple connector that integrates forms with your database. The connector is freely available for download and is licensed under an open source model. The documentation can be found at [[V4_Database_Connector|Connecting with your database]].

Integrating with HTTP Servers (including handling attachments)

frevvo Live Forms can POST form or workflow data to your web server for processing. There are two options available [[V4_Designing_Forms#Post_Data_then_Forward_to_Web_Page | Form Action POST]] and [[V4_Designing_Forms#Post_Data | Doc Action POST]]. The difference between the two is that the Form Action POST displays the response from the web server to the user whereas the Doc Action POST does not.

...

Forms can be initialized by an XML document. This is most commonly done when the form is created from an XSD data source but can also be used with forms create from frevvoLive Forms's palette controls. The most common method is to connect the XML document to the form via the form's doc action manually set [[V4_Designing_Forms#Doc_URI_Wizards | document URIs wizard]].

...

In addition chaining multipe forms together via the Form Action Post with common data sources from XSD as described above, it is also possible to write a servlet or other web code that does a Post request with a form Url to the frevvo Live Forms Form Server. This request can also be coded to contain an XML document. If the XML document conforms to and is in the same namespace as one of the form's documents (either from-scratch palette controls or from XSD schema datasource), then the Form Server will use that XML document to initialize the form's fields.

...

  1. You must have a class called CustomEventHandlers declared. Note that it is case-sensitive.
  2. It must have a method called setup() which takes a single argument (called el above). When the form is loaded, frevvo Live Forms will call this setup() method for each control in the form and will pass in the control as the argument.
  3. For each control we are interested in, the CustomEventHandlers class has a handler method. All handlers are functions that take two arguments: the event that triggered the handler and the control itself.
  4. The example above uses a custom CSS class on the control in question to figure out if it's the control we are interested in. You can [[V4_Designing_Forms#CSS_Class | set a custom CSS class for any control]] in the Form Designer.
  5. We're interested in two controls: the Submit button which already has a CSS class s-submit and a user-defined input control with custom CSS class my-class. For each control, we've associated a handler as described above. To associate a handler, call FEvent.observe (el, EVENT_NAME, handler) using the syntax above. The EVENT_NAME can be any standard event fired by your browser e.g. click (also called onClick) or change (also called onChange).
  6. When the event is question is fired by the control in question, your handler will be called.
  7. In addition to the event handlers, you can also provide methods that are called when the form is Saved using [[V4_Using_Forms#Save.2FLoad | the Save/Load feature]].
  8. The onSaveSuccess() method is called when a submission is saved and the resulting submission ID is passed in.
  9. The onSaveFailure() method is called when the save fails.

...

You can call any JavaScript code in a handler; you can access the DOM of the page (note that you only have access to the DOM of the iframe in which the frevvo Live Forms form is rendered assuming you're using a standard embedding) or call external code. In addition, you have access to the following methods:

  1. CustomView.$frevvoControl(el) returns the HTML element corresponding to the frevvo Live Forms control that triggered the handler. This is typically a DIV HTML element and typically has CSS class 'f-control'
  2. CustomView.getState (el) returns the state of the control as a JavaScript object. The state contains things like the label, value, hint, help etc. Use a tool such as Firebug or a different JavaScript debugger to view it in detail.
  3. CustomView.getExtId (el) returns [[V4_Designing_Forms#Name | the name of the control]] as set in the Form Designer.
  4. CustomView.getIndex (el) returns the index of the control in its enclosing repeat control if the control is repeating. If the control is not repeating, it returns -1.
  5. CustomView.hasClass (el, className) returns true if the control has the indicated CSS class, false otherwise.

...