Skip to content

QF3Database

Jump to bottom
Katherine ChengLi edited this page Apr 6, 2015 · 1 revision

How to use Fact and Lookup Tables in your Forms

Back to table of Contents

  1. As one of the unique feature of Quickform framwork is that it enables mobile form connection with Star schema database. This tutorial is in continuity with previous tutorial in which we were getting javascript error log in form.html page. Now we will rectify that error by implementing supporting FACT and lookup tables which are basic building blocks of a Star Schema database modelling.

  2. Fact table are used to store form data and Lookup tables are being used for drop down selection (Gender, City). We continue from our last simpleform db. Execute this SCRIPT in MS SQL SERVER and also add Kimbals date dimension table from here. Rename your date dimension to LKUP_date .Make sure to make fulldate colum in date dimension table Primary key. Add foriegn key constraint of Reservationdate in FACT_reservation table with fulldate in date column in LKUP_date. Note: You will have to change fulldate column to not null before making it Primary Key.

Star schema diagram will look like this https://quickforms3.googlecode.com/svn/images/ReservationFormDBDiagram.png

**In your forms.html add the following code

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html class = "ui-mobile-rendering">
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">    
   <link rel="stylesheet" href="/quickforms/css/quickforms/quickforms.css" />
   <script src = "/quickforms/js/require.min.js" ></script>
  </head>
    <body> 
   <script type="text/javascript">
	 require(['/quickforms/js/quickforms.js'],function(){
			quickforms.registerReadyFunction(function()
			{
				// Do quickforms module loading here
				
				require(['dom/form/checkbox','dom/form/select','dom/form/date','dom/form/text'],// Add this module to the list
		 		function(){// ADD FACT TABEL NAME!
				quickforms.parseForm( //formId*, app, fact*, callback
							{formId:'mainForm',
							fact:'reservations'});
					});
			});
			
		});
	</script>
       <div data-role="page" id="form">
          <div data-role="header">
		    <h1> Simple Form Application </h1>
          </div><!-- /header -->
       <div data-role="content">
           <form id ="mainForm" method="POST" action="putFact">
		   
		    <div class= "buttons">
               <a href="#" onclick = "history.back()" rel="external" data-role="button" data-inline="true" data-icon="back">Cancel</a>
               <a href = "" onclick="quickforms.putFact(this)" data-role="button" data-icon="check" data-theme="b" data-inline="true">Submit</a>
             </div>
		   
          <!--ADD FORM ELEMENTS HERE-->
		    <label for="FirstName" class ="ui-input-text">First Name</label>
            <input type="text" id ="FirstName" name ="FirstName" />

            <label for="LastName" class ="ui-input-text">Last Name</label>
            <input id ="LastName" name ="LastName" type ="text"/>
		    <!--Date Picker-->
			<label for="ReservationDate" class ="ui-input-text">Reservation Date</label>
            <input name="ReservationDate" id="ReservationDate" type="text" class="date">
			
			
			<label for="Gender" class ="ui-input-text">Gender</label>
            <select id ="Gender" name ="Gender" data-native-menu="false">
            <option value ="1">-- Not Selected --</option>
                
            </select>
			<!-- Without date picker-->
			<label for="BirthDate" class ="ui-input-text">Date of Birth</label>
            <input name="BirthDate" id="BirthDate" type="text" class="date">
			
			<label for="City" class ="ui-input-text" >City</label>
             <select id ="City" name ="City">
			  <option value="-1">-- Not Selected--</option>
			  
			  </select>
			
			<label for="Agreement">Yes, I accept the terms and conditions</label>
            <input type="checkbox" name="Agreement" id="Agreement" value="1">
			
			 <div class= "buttons">
               <a href="#" onclick = "history.back()" rel="external" data-role="button" data-inline="true" data-icon="back">Cancel</a>
               <a href = "" onclick="quickforms.putFact(this)" data-role="button" data-icon="check" data-theme="b" data-inline="true">Submit</a>
             </div>
			
           </form><!--/form-->
      </div><!--/content-->
   
  <div data-role="footer">
	   <h4>-</h4>
  </div><!--/footer--> 
</div><!--/page-->
</body>
</html>
```**

Now when you enter localhost:8080/simpleform in your browser and enter your credentials (Username: admin, Password: admin) then you will see ayour form without error. As now our form is connected to our Star schema db and FACT\_reservations is storing our form data.

We have mentioned our Fact table name in form.html as shown below inside 

&lt;SCRIPT&gt;

 tag:

quickforms.parseForm( //formId*, app, fact*, callback {formId:'mainForm', fact:'reservations'});


Now we will not get Javascript error. Also, we are getting drop down menu items in Gender and City from our database lookup tables. Make sure to give same names as given in HTML file(Example: Gender--> Lkup\_Gender). We can enter form data and it will get stored as shown below in the table:

![https://quickforms3.googlecode.com/svn/QF3%20Apps/palis3/test/RservationFormTable.png](https://quickforms3.googlecode.com/svn/QF3%20Apps/palis3/test/RservationFormTable.png)
Clone this wiki locally