When you're creating your forms, you have the option of the Wizard or Source view.  To create advanced forms, we use the Source view.

You will notice that we have three tabs.  This allows you to essentially hand craft your form with a combination of HTML, JavaScript and CSS.


HTML

Because your form will live inside an existing element, you don't add any <html>, <head>, or <body> tags.  Example content would look like below:

       

<select name="status">
  <option value="open">Open</option>
  <option value="inProgress">In Progress</option>
  <option value="closed">Closed</option>
</select>
<br/ >
<select name="rating">
  <option value="low">Low</option>
  <option value="medium">Medium</option>
  <option value="high">High</option>
</select>
<br />
<input type="text" id="house_address" name="house_address" placeholder="address"/>
<br/ >
<input type="email" id="email_address" name="email_address" placeholder="email"/>
<br />
<div class="gogo">
  My div
</div>

       

Points to note:

  • No submit button, as that's taken care of for your.
  • The name attribute of any form elements is the field name that the content will be saved against in the database.  As such, it must be unique for this form, and contain no spaces.


Special input elements:

  • Status:  Every form needs a status field.  You can add as many values as you like, but does need to be able to be set to closed, otherwise there is no way for users to close the inspection.
  • Rating:  Every form needs a rating field.  This is to allow for easy filtering.  If you don't want a rating field, simply create a hidden input element with a default rating set, eg. <input type="hidden" name="rating" value="default"/>
  • Description:  Every form needs a description field.  When listing inspections in the app or the website, the value of the description field is used.  Feel free to label it as Short Title, or Address, as long as the name attribute is set to description.

JavaScript

The javascript tab allows you to add your own custom scripting in object literal syntax.  You will notice that there is already an init function pre-defined for you.  This function will run when the form is loaded, both when creating a new record, and editing an existing record.  It accepts a single parameter, which when being edited, will contain the form data.  The fields will automatically be populated, so the only time you would need to use the data parameter is when you want to show/hide or alter the form state based on the data.


 Your scripts have access to jQuery lite, which will allow you to easily access and manipulate your form elements.   

init: function(data){
	$('.gogo').click(
		function() {
			$('.gogo').append('Clicked<br />');
		}
	);
}

    


CSS

The CSS tab allows you to define any custom CSS rules for your form.


  

.gogo{
	border: 1px solid #cc0000;
	height: 5em;
	width: 50%;
}