Getting Started Guide
From Frevvodocs
If you have upgraded to Live Forms v2 please see the v2.x documentation.
Contents |
Step by Step
This guide takes you through the process of designing, deploying and using your first simple frevvo form. You'll quickly see how easy it is to create forms with frevvo. To use this guide, follow the steps below starting with Logging in. Each step below contains links to more detailed information.
If you'd rather jump directly into more detail documentation describing how to design, deploy and use frevvo Live Forms™ click on one of the components in the chart below, or use the navigation links to the left.
Logging In
The first step is to access the frevvo application in your browser and login. Point your browser to our frevvo hosting site: http://www.frevvo.com
Login by clicking on the “login” link in the upper right hand corner of the home page. If you do not already have a username and password, please contact us.
Create an Application
frevvo forms are organized into Applications. Applications contain one or more forms depending on your needs. Applications also contain other projects elements such as schemas, documents, and properties. Before you create your first form you will need to create an application.
Your First Application
Upon successful login, you will see a page labeled “Applications”. Click the 
icon to the left of the “Applications” text. This will create your first application. It is given a randomly generated name. We’ll edit that name to make it more meaningful soon. You can add additional applications here or delete the ones you no longer need by clicking the 
icon next to your application’s name.
Themes
The frevvo application header also contains a themes link. Themes are the frevvo way to customize the style of your forms so that they fit into the look & feel of an existing web application. For this simple example you can use one of frevvo's default themes
Building a Form
Once you’ve created an application you’re ready to start building your first cool form! Click on the 
icon next to your application's name on the Application page to begin working with your application. You will navigate to the Forms page. If you happened to click on the themes link in the frevvo header, you’ll first have to click back to the applications link to see your Applications.
On the Forms page, notice the navigation links in the frevvo header. You'll see links to Properties, Forms, Schemas, and Documents.
First, rename your application to something more meaningful by clicking on the properties link in the frevvo header. Give your application a new name and a meaningful description so that when you see it in your application list you’ll be able to quickly tell what it’s about. The properties page also enables you to set your application’s theme and base URLs for form actions. For this simple example, use the default theme narrow-verticle-green. And leave the base URLs empty.
Add a Form
Click on the forms link in the navigation bar. This navigates you to the Forms page. Click on the icon next to <My App>::Forms to add your first form. You can add as many forms as you need. Each form is given a randomly generated name. You can edit that name to make it more meaningful from within the form designer. You can delete forms you no longer need by clicking the icon next to each form’s name.
Edit a Form
Click the icon below your form’s name in the <My App>::Forms page. This launch the frevvo Live Forms™ Designer . Here is where you design your form by dropping and laying out controls such as input text boxes, phone number, dates, radios, dropdowns, etc.. controls from frevvo's palette or from your own schema.
First, modify the name and description of your form. Hover your mouse over the green area at the top of the form containing the form’s default name. An icon will appear. This icon opens an edit properties panel where you can change your form’s name and description. Give your form a new name and description. Then close the properties window, by again hovering over the green title and clicking on the icon.
Add Controls
Now add controls to your form. You can do this either by adding controls from the control palette or from elements of any schemas that you uploaded into your application.
Adding Controls from the Palette
Controls are added from the frevvo control palette by clicking a control button, like text or number or phone, etc... As you click on a control, it will be added to the top of your form. Then you can drag/drop the controls to organize them in your form.
Add a Text control to your form now by clicking on the Text button in the control palette. Add a second Text control. And finally add a Money control.
Editing Controls
Each control is given a random label indicative of the control’s type. Hover over the control and several icons will appear. Click the icon to open the control's properties. Type a new name into the label field. Click the icon to close the control's properties. Controls have many properties in addition to the label property.
Arranging Controls
You can organize and rearrange the controls in your form by dragging controls and dropping them in the appropriate place via the control's drag handle 
which becomes visible when you hover over any control. As you drag your controls you will see visual indicators helping you place your control where you want it. Read the section on Drag & Drop for helpful details.
Preview your form
The form designer window contains three tabs. By default the form designer displays with the Edit tab selected. This tab is where you add controls, organize controls and edit control properties.
The Preview tab displays your form as it will look when deployed for use. In Preview, notice that any panel grouping elements you may have added to your form are not displayed visually. Also notice that the form designer icons such as those to add, delete controls and edit control properties are no longer displayed when you hover, since this is the case when the form is deployed for use.
The Rules tab is where you add dynamic behavior to your form.
Saving your Form
To save any changes to your form, click on the Commit button at the bottom of the page.
Using a Form
Once your form is created, it’s time to try using it. From your <My App>::Forms page, click on the 
icon to the right of your form. This brings up your form on frevvo’s web server. Go ahead and enter values into your form. Notice how each time you tab to another field frevvo immediately validates the data in the prior field and immediately displays an error icon when there is a problem. For instance, try to enter a text string in an input that is a numeric control. See the Validation section for details on validation rules
frevvo prevents submisson of incomplete forms by keeping your form's submit button grey'd until all required fields are filled in. As soon as all required fields contains values and all of those values have valid data (eg: phone fields contain aaa-bbb-cccc format) the submit button will become clickable.
Submitting Form Data
Where does the form data go when the user clicks the submit button? This is controlled by your form's Action properties. Let’s go back into the frevvo form designer for one of your forms. Hover over the form header that contains your form’s name and click the icon to edit your form’s properties again. Initially all we changed was your form’s name and description. Now we’re going to use the properties: Form Action, Message / URL, and Doc Action, E-Mail Address / URL
Set the Form Action property to Get URL. And set the URL property to http://www.google.com. Set the Doc Action to E-mail document. And put your email address in the E-mail Address property. Commit the changes and use the form. Now when you click the submit button rather than navigating to a page with a default message "Your form has been submitted", you navigate to google.com. And also the form's data will be emailed to you. This is of course a simple example. A more likely scenario is to set the action to Post URL and set the URL to your servlet.
Making Forms Public
By default your forms are private and only accessible when you are logged into frevvo. While developing your form, you can test it in use mode by clicking on the icon to the right of the form's name. Once you are satisfied with your form you can make it public by clicking on 
icon on the Form page to the right of your form's name. Public forms are accessible to anyone who knows the form's URL. If you want to make the form private again click on the 
which replaced the when you made the form public.
Using Your Own Schemas
Frevvo can quickly and easily create forms from your own XSD schemas. First, upload your .xsd into your frevvo applications. From within your application, click on the schemas link in the frevvo header. Next click on the icon next to <My App>::Schemas to add your first schema. You can add as many schemas as you want. Each time you will enter an upload dialog window where you can browse to your schemas on disk and give them a meaningful name and description. You can delete schemas you no longer need by clicking the icon next to each schemas name.
See the form designer Schemas section for details on adding controls from schema types into your form.
Styling Forms
Once you create the forms you need, you’re going to want to give them your own custom styling touches. Frevvo themes are the way to do that. Frevvo supports several built-in themes, but most likely you will want to modify them to fit into the look & feel of your existing web site. One easy way to get started on your own theme is to download one of frevvo’s. See the Customizing Forms chapter in the Users Guide.
Integration
Eventually you will want to integate your cool new frevvo forms into your existing web application or with other products such as BPM product, SOA, Web Services. Because frevvo is XML compiant and schema aware this is a straight forward task. See Integration for details.
