How to put a control into your page

To make a Quickforms control running need three part: JavaScript Code, HTML Code and Database.

Here is an example of putting a form with some controls into a webpage. We use the sample code that have been used in basic tutorial [How to Create a Form](How to Create a Form).

1. JavaScript Code

In the header of a page these two lines must be added.

<link rel="stylesheet" href="../quickforms/css/quickforms/quickforms.css" />
<script src = "../quickforms/js/require.min.js" ></script>

quickforms.css is the basic style sheet of Quickforms controls. require.min.js is a JavaScript module loader that used in Quickforms controls.

Then in the body part, add the following code.

<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:'Registration' });
					});
		});

	});
</script>

In this code, the require function like this require(['xxx.js'],function(){ ... }); is the a function of RequireJS which means load the xxx.js file first then run the function().

The first require() function is loading the basic Quickforms library for the control. The second require() function is loading all the Quickforms control that need to be used in the form. In this case, we load the checkbox, select, data and text controls in this page.

At last, we populate the form by calling the function quickforms.parseForm({formId:'mainForm',fact:'Registration' });. The formId will be the id attribute of the form in this page. The fact will be the fact table name in database.

2. HTML Code

Here's the html code for the form.

<form id ="mainForm" method="POST" action="putFact">

	<!--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="DateofBirth" class ="ui-input-text">Date of Birth</label>
	<input name="DateofBirth" id="DateofBirth" type="text" class="date">

	<label for="Age" class ="ui-input-text">Age</label>
	<input id ="Age" name ="Age" type ="text"/>

	<label for="Gender" class ="ui-input-text">Gender</label>
	<select id ="Gender" name ="Gender" data-native-menu="false" >
		<option>Gender</option>     
	</select>

	<label for="Status" class ="ui-input-text">Status</label>
	<select id ="Status" name ="Status" data-native-menu="false">
		<option>Status</option>     
	</select>

	<label for="Department" class ="ui-input-text">Department</label>
	<select id ="Department" name ="Department" data-native-menu="false">
		<option>Department</option>     
	</select>

	<label for="Agreement">Register for the Term</label>
	<input type="checkbox" name="Agreement" id="Agreement" value="1">

	<div class= "buttons">
		<a onclick="quickforms.putFact(this,'forms.html');" data-role="button" data-icon="check" data-theme="b" data-inline="true">Register</a>
		<a href="forms.html" onclick="history.back();" rel="external" data-role="button" data-inline="true" data-icon="back">Back</a>
	</div>

</form>

As we said, the id attribute form id ="mainForm" should be the same as in the JavaScript function quickforms.parseForm.

The following are the key html codes for these controls.

Text Input

<input type="text" id ="FirstName" name ="FirstName" />

Date

<input name="DateofBirth" id="DateofBirth" type="text" class="date">

Select

<select id ="Gender" name ="Gender" data-native-menu="false" >
	<option>Gender</option>     
</select>

Checkbox

<input type="checkbox" name="Agreement" id="Agreement" value="1">

Note: The name attribute of the control must be the same as the column name of the fact table in the database, in this case is the FACT_Registration table. And if it's a select control the name attribute must be the same as the name of the lookup table in the database too, so that the content of the dropdown in the select control could be populated by Quickforms.

3. Database

The fact table structure in database is the following.

As we said before, the JavaScript code quickforms.parseForm({formId:'mainForm',fact:'Registration' }); must use the right fact table name in database.

And the name attribute of control must be the same as column name of the table.

For the select control 'Department' you must have a lookup table called LKUP_Department that store the data to populate the dropdown.

Reference

You can find all Quickforms Control Template here.

For more information about RequireJS you could find it here.