SPAnyForm-LITE "The Tutorial" | Aerie Consulting

Posted by Beau Cameron on 07.12.16
Beau Cameron
Find me on:

There comes a time in every developer's life to make the decision whether or not a piece of software is "good enough" for public consumption. However, I've come to the realization that SPAnyForm-lite will never truly be finished, as it will continue to evolve over time. So here it is!


If this is your first time hearing about SPAnyForm please familarize yourself with it by going to my previous blog post and this post discussing the evolution of the framework. 

JavaScript & CSS References

<link rel="stylesheet" href="path/to/yourtheme/SPAnyForm.jquery-ui.css">
<
script type="text/javascript" src="path/to/SPAnyForm.jquery.min.js"></script> <script type="text/javascript" src="path/to/SPAnyForm.min.js"></script>

Example Usage


       SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady); 	     
		     function sharePointReady(){		 	 
				var element = document.getElementById('formId');
				var form2  = spAnyForm(element).init({
					'validate':true,
				 	'list':'EVentList',
				 	'contentType':'0x010061C7F68DF8D8AD408D93060426D6CECD'
				 }).create();
			 }

HTML Source

<div id="formId" class="form-body">

</div>

Options

  • validate: true/false, turns on and off required field validation.
  • list:title of the list you want to build form for
  • contentType: ID of the list ContentType you wish to build

Overrides

If you have chosen to turn validation ("validate":false) off because you'd like to do your own front-end validation, you have the ability to override the submit function on the SPAnyForm object. Be aware, SPAnyForm will turn off all required field validation, so you could have empty values in your SharePoint list if you aren't validating your fields correctly.

                                var element = document.getElementById('formId');
				var form2  = spAnyForm(element).init({
					'validate':false,
				 	'list':'EVentList',
				 	'contentType':'0x010061C7F68DF8D8AD408D93060426D6CECD'
				 }).create();
				 
				  form2.submit = function(){
						 //lets do some validation here
						 
						 //if validation passed
						 form2.save().done(function(data){
						 	//Success!
						 }).fail(function(error){						 
						 	//Unable to save item
						 });
				 }

Important

SPAnyForm-lite is a framework taken from my more robust framework SPAnyForm found here, therefore it has a limited feature set...which can be found at this blog post.

Multi-managed metadata fields do not update correctly if they have a space in their name, denoted by the internal field with "_x0020_";

A Special Thanks

While I developed the framework, I can't take full credit. The framework is a result of a vast community of developers who contribute to open source software.


 DOWNLOAD

 To download SPAnyForm-LITE click this link --> SPAnyForm

Topics: SharePoint 2013, SharePoint Apps, JavaScript, Development

Subscribe Here!

Recent Posts

Posts by Tag

See all