Skip to content

How to Create a Basic Quickforms App

Jump to bottom
Imaobong Eyoma edited this page Jun 12, 2015 · 3 revisions

This tutorial will teach you how to create the first home page for the sample application. The home page will look like this:

See a bigger version of this image

1 . Inside your sample app folder, create a new forms.html file.This is the first page you will see when you successfully login to sample application.

EXAMPLE: C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\sample\forms.html

The forms.html file looks like this:

<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>
<div data-role="page" id="visitSummaryPage">
	<script type="text/javascript">
	require(['../quickforms/js/quickforms.js'],function(){
			quickforms.registerReadyFunction(function()
			{
				require(['dom/navControl','dom/tableControl'],
										function(){
						var whereclause = "";
						if(getCookie('userRole') == 'User') whereclause = "addedBy = '"+getCookie('username')+"'";
						quickforms.loadNav('nav.html','nav');
						quickforms.loadTable(//appName, queryName*, parameterList,whereclause, callback, domId*,configFile 
							{queryName:'getTableDisplay',configFile:'js/summaryTable',whereclause:whereclause});
					});
			});
		});
	</script>
	<div data-role="header"><h1>HomePage</h1></div>
	<div id = "nav"></div>
	<div data-role="content">
		<form id="newform">
			<h1 align = "center">Student Registration Dashboard</h1>
			
			<a href="registrationForm.html	" data-theme="b" data-icon="plus" data-role="button" rel="external">New Registration Form</a>
			<table id ="mainData"></table>
			<a href="registrationForm.html" data-theme="b" data-icon="plus" data-role="button" rel="external">New registration Form</a>
		</form>
	</div>
	<div data-role="footer"><h1></h1></div>
</div>
</body>
</html>

Some key elements of the above code are as follows:

  • The require function for our sample app looks like this: See a bigger version of this image

  • We see that in the require function above we have included the navigation (navControl) and table controls (tableControl).

  • Next line defines the function used for the login.

  • The quickforms.loadNav is to load the navigation bar that will be created in our next tutorial [Add Navigation to your App](How\ to\ Add\ Navigation\ Options\ to\ your\ App).

  • The quickforms.loadTable is to load the table summary into the homepage. The queryName is used to define the attributes we would like to see in the table summary. While we need this functionality of table control, we need to add the summaryTable.js to our js folder (Step 2).

  • After </script> close tag, we have the following code: See a bigger version of this image

2 . Create a new summaryTable.js file into your sample/js folder.

EXAMPLE:C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\sample\js\summaryTable.js

The summaryTable.js file looks like this:

define([],function(){
	var config = {};
        config.sDom='<"top"lfi>rt<"bottom"ip<"clear">';
        config.bProcessing= true;
        config.iDisplayLength= 50;
        config.sPaginationType= "full_numbers";
        config.aaSorting= [[0,"desc"]];
        config.sScrollX= "100%";
		config.aLengthMenu = [[10,25,50,100,-1],[10,25,50,100,"ALL"]];
	config.sScrollXInner= "101%";
	config.bScrollCollapse= true;
        config.columnWidths = [];
        config.sDom= '<"top"lf<"clear">ip<"clear">>rt<"bottom"ip<"clear">';
        config.fnDrawCallback = function(oSettings) {
            // hide the bottom add button if the number of records displayed is less than 15 
            if (oSettings._iDisplayEnd % oSettings._iDisplayLength >= 15) {
                $('a.btmAdd').show();
            } else {
                $('a.btmAdd').hide();
            }
        };
		config.columnWidths = ['10%','10%','9%','23%','20%','25%'];
	return config;
});

Now you can test your sample app : http://localhost:8080/sample/

Notes:

  • We are missing nav bar after the Header line. We will implement it in our next tutorial [Add Navigation to your App](How\ to\ Add\ Navigation\ Options\ to\ your\ App).

  • Also, in [Create a Form](How\ to\ Create\ a\ Form ) tutorial we will create the form called registrationForm.html so that our 'New Registration Form' buttons become functional.

  • Note that inside your form.html file you have:

<a href="registrationForm.html	" data-theme="b" data-icon="plus" data-role="button" rel="external">New Registration Form</a>

In the above code we have defined a hyperlink to the button. It means when a user clicks on 'New Registration Form' button then registrationForm.html page gets loaded for the user to fill out the form.

Clone this wiki locally