Office 365 Easy Form Development FORM7

Sometime back while doing office 365 project development, I came across with FORM7 framework. It really makes easy forms development. The scripts take care add, edit, display views and people picker, lookup column as well.

You can download the form7 js file from this URL.

Keep all the js file in Style Library or Asset Library. I have developed Leave application request form which is really quick. I am using two custom list Leave Request and Leave Type.

Leave Type is lookup column to Leave Request list.

Please find the .JS and .CSS file details below.




Requestform.js:
<link type=”text/css” rel=”stylesheet” href=”/SiteAssets/Form7Files/jquery-ui.css” />
<!– Reference jQuery on the Google CDN –>
<script type=”text/javascript” src=”/SiteAssets/Form7Files/jquery-1.8.3.min.js”></script>
<!– Reference jQueryUI on the Google CDN –>
<script type=”text/javascript” src=”/SiteAssets/Form7Files/jquery-ui.min.js”></script>
<!– Reference SPServices on cdnjs (Cloudflare) –>
<script type=”text/javascript” src=”/SiteAssets/Form7Files/jquery.SPServices-2014.02.min.js”></script>

<script type=”text/javascript” src=”/SiteAssets/Form7Files/jQuery.Forms7-0.0.081.js”></script>
<script type=”text/javascript” src=”/_layouts/15/clienttemplates.js” ></script>
<script type=”text/javascript” src=”/_layouts/15/clientforms.js” ></script>
<script type=”text/javascript” src=”/_layouts/15/clientpeoplepicker.js” ></script>
<script type=”text/javascript” src=”/_layouts/15/autofill.js” ></script>
<link type=”text/css” rel=”stylesheet” href=”/SiteAssets/Form7Files/custom.css” />

<style type=”text/css”>
.error
{font-family:’Tahoma’,sans-serif;font-size:10px;text-align:left;color:red;}
</style>

<script type=”text/javascript”>
$(document).ready(function() {
$(“#LeaveRequestForm”).Forms7Initialize({
queryStringVar: “formID”,
listName: “LeaveRequest”
});
$( “#StartDateField” ).datepicker({
changeMonth: true,
changeYear: true
});
$( “#EndDateField” ).datepicker({
changeMonth: true,
changeYear: true
});
$(“#LeaveSelect”).Forms7LoadDDL ({
listName: “LeaveType”,
firstOptionText: “Select Leave Type”,
fieldName: “Title”
});

});

function SubmitForm()
{
$(“#LeaveRequestForm”).Forms7Submit({
listName: “LeaveRequest”,
errorOffsetTop: 10,
errorOffsetLeft: 5,
completefunc: function(id) {
alert(“Save was successful. ID = ” + id);
window.location = window.location.pathname + “?formID=” + id;
}
});

}

</script>

<div id=”LeaveRequestForm” >
<table width=”100%” cellpadding=”10″ cellspacing=”0″ >
<tr><b>Leave Request form</b><td>
</td>
</tr>
<tr >
<td>Leave Title: </td>
<td><input type=”text” id=”TitleField” listFieldName=’Title’ class=’required formInput’ ></td>
</tr>
<tr ><td>Leave Description:</td>
<td> <input type=”text” id=”DescriptionField” listFieldName=’Description’ class=’required formInput’ >
</td>
</tr>
<tr >
<td> Manager:</td>
<td>
<div id=”peoplePicker1″ listFieldName=”Manager” data-Forms7Type=”PeoplePicker”></div>
</td>
</tr>

<tr >
<td>Start Date:</td> <td><input title=”Start Date” id=’StartDateField’ listFieldName=’StartDate’ class=’required formInput’ isDate=”yes” validate=”validDate” onchange=”validDate(this.value,this);”>
</td>
</tr>
<tr >
<td>End Date: </td><td><input title=”End Date” id=’EndDateField’ listFieldName=’EndDate’ class=’required formInput’ isDate=”yes” validate=”validDate” onchange=”validDate(this.value,this);”>
</td>
</tr>
<tr >
<td>Phone Number:</td><td> <input type=”text” id=”PhoneField” listFieldName=’Phone’ class=’required formInput’ >
</td>
</tr>

<tr >
<td>Leave Type:</td><td><select title=”Leave” id=’LeaveSelect’ listFieldName=’LeaveType’ class=’formInput’ ></select></td>
</tr>

</table>
<div class=”button_container”>
<input type=”button” value=”Submit” onclick=”SubmitForm();”><input type=”reset” value=”Reset” >
</div>
</div>

Custom.css:

#LeaveRequestForm{
width: 70%;
margin: 0 auto;
background: #EEE;
/* margin: 0 5px; */
padding: 0 5px;
}

#LeaveRequestForm b{
background: #527794;
color: #FFF;
padding: 5px 2px 5px 8px;
width: 100%;
float: left;
margin-left: -5px;}

#LeaveRequestForm td{
padding: 9px 35px;
}

#LeaveRequestForm td input{
width: 300px;
height: 25px;
}

.sp-peoplepicker-topLevel{
width: 285px !important;
margin-left: 6px;
}

.button_container{
text-align: center;
padding: 20px 0;
}

.button_container input{
background:#527794;
color:#FFF;
}

div#ui-datepicker-div {
background: #CCC;
padding: 15px;
}

a.ui-state-default {
color: #666;
font-size: 16px;
padding: 5px;
}
Now create publishing or web part page. Add content editor web part to the page and provide reference of the Requestform.js. So below screenshot will be the output.

Office 365 Easy Form Development FORM7
Office 365 Easy Form Development FORM7

Read some SharePoint 2013 workflow tutorials:

Hope this article will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Sambita Rath

I have 9 years of exprience into SharePoint implementation, architecture, Administrator, development and Training.Designing Information Architecture in SharePoint 2007, 2010,2013 and Office 365.

View all posts by Sambita Rath →

Leave a Reply