Versions Compared

Key

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

...

One place this is very useful is in business rules. See the section on templatized URls in business rules for more details. However anywhere that you can use templates in your form: labels, help, hint; display message, etc... the value can either come from the value in an actual form field or from _data values that are not in any way bound to the name of a control.

onInit/onSubmit

onInit and onSubmit are useful when you need to embed a  form in your own form and you want to programmatically submit the  form and initialize the form with your own document.

The value of onInit must be an in scope javascript function. This onInit javascript function will be called before the form is instantiated. For example &onInit=getData will cause  to call the getData() javascript function. The onSubmit function will be called after the submit button is clicked.

The onInit feature allows you to populate your embedded frevvo form with the data from your own HTML form. So if you want to pass some data from your web page to the frevvo form embedded into that same web page, you will use onInit. onInit function will execute when the frevvo form loads.

The onSubmit function allows you to copy the data from the frevvo form (when that frevvo form is submitted) into your HTML form. Then you can use your own JavaScript on your HTML page to process that data (for example save it somewhere else at your own convenience and time, etc.)

The embedding page and must be in the the same domain/origin.Typically this means same uri scheme, host and port.

The value of onInit must be an in scope javascript function. This onInit javascript function will be called before the form is instantiated. For example &onInit=getData will cause  to call the getData() javascript function. The onSubmit function will be called after the submit button is clicked.

Here is a sample html page an embedded  script tag and an onInit javascript function. The  script tag copied was from the Share dialog and the &onInit Url parameter was appended. Each xml document is placed inside a container element (input, textarea or any other element such as a div) and assigned and xml id. In this example there is a single xml document placed inside a <textarea> tag.

Code Block
<!DOCTYPE html   
  PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
        <head>   
                <script language="JavaScript" type="text/javascript">    
                        /**     
                                Called before the form is rendered in the iframe     
                                Return - docs - [{       
                                                xml: *      
                                        }]    
                        **/    
                        function getData(){     
                                alert('onInit called');     
                                var textarea = document.getElementById('form');     
                                return [{      
                                        xml: textarea.value     
                                }];    
                        }   
                        /**     
                                Called after the form is submitted     
                                Parameters:      
                                        docs - [{       
                                                element:{        
                                                        name: *,        
                                                        namespace: *       
                                                        },       
                                                        xml: *      
                                        }]    
                        **/    
                        function onSubmit(docs){     
                                alert('onSubmit called');     
                                var textarea = document.getElementById('form');     
                                if( textarea )      
                                        textarea.value = docs[0].xml;    
                        }   
            </script>  
        </head>  
        <body>      
         <textarea id="form" name="doc1" rows="4" cols="100">   
             <ns:form xmlns:ns="http://www.frevvo.com/schemas/_07IOYMUdEeCuRePmBeMwTQ" name="Order">
<Item> <Color>Red</Color> </Item> <Item> <Color>Blue</Color> </Item> <Item> <Color>Red</Color> </Item> <Item> <Color>Green</Color> </Item> </ns:form> </textarea> <script xmlns=http://www.w3.org/1999/xhtml src="http://localhost:8082/frevvo/web/tn/nancy.com/user/designer/app/_yVkhYcUdEeCuRePmBeMwTQ/ formtype/_07IOYMUdEeCuRePmBeMwTQ/embed?container=true&resize=true&onInit=getData" type="text/javascript" language="Javascript"></script> </body> </html>

...

  1. The Url parameter &onInit=getData used matches exactly the name of a javascript method in the html page also named getData(). 
  2. The xml data is also embedded in the html page in the <textarea> tag.
  3. The <ns:form> content came directly from a prior form submission and was copied out of the  submission repository's Documents tab.

Image Removed

This is how the form looks when initialized via the onInit method. The particular form used in this sample has a repeat control. By default this form has a single repeating item. When  initializes the form with repeating data returned from the getData() method it auto creates the additional items. This form also contained a Item Added Rule which is why there is also a value in the Quantity field.

...

  <Item>
                    <Color>Red</Color> 
              </Item>
               <Item> <Color>Blue</Color> 
              </Item> 
               <Item> <Color>Red</Color> 
              </Item> 
               <Item> <Color>Green</Color> 
              </Item> 
            </ns:form> 
        </textarea> 

       <script xmlns=http://www.w3.org/1999/xhtml 
        src="http://localhost:8082/frevvo/web/tn/nancy.com/user/designer/app/_yVkhYcUdEeCuRePmBeMwTQ/ formtype/_07IOYMUdEeCuRePmBeMwTQ/embed?container=true&resize=true&onInit=getData" type="text/javascript" language="Javascript">      
       </script> 
      </body> 
</html>


Things to note:

  1. The Url parameter &onInit=getData used matches exactly the name of a javascript method in the html page also named getData(). 
  2. The xml data is also embedded in the html page in the <textarea> tag.
  3. The <ns:form> content came directly from a prior form submission and was copied out of the  submission repository's Documents tab.

Image Added

This is how the form looks when initialized via the onInit method. The particular form used in this sample has a repeat control. By default this form has a single repeating item. When  initializes the form with repeating data returned from the getData() method it auto creates the additional items. This form also contained a Item Added Rule which is why there is also a value in the Quantity field.

Image Added

Post and XML Documents

If form A and form B both contain the same data source, and the Form Action in form A is set to '''Post''' to the form Url of form B, then form B's fields from schema will be initialized with the values entered into form 1.

This occurs because the Post request to the Form Server contains the XML document(s) from form A. If one data source was added from XSD schema to form A. Then it will contain two documents. The first is the form's from-scratch document containing elements for all controls added from palette. The second is the schema document.

Form B's from schema document is in the same namespace as form A's since we added the same XSD data source to both. So the values entered into form A's fields will be used as an initial instance document to initialize form B's fields.

See default field values to understand the precedence that XML documents sent in the Post request to form B take over the other possible methods of defaulting form field values.