Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

JQuery

You Might Not Need JQuery – VIDEO

Today I was looking at http://youmightnotneedjquery.com/ and how that could apply to SharePoint UI elements.   Check out the video and code samples below.    Often we need to hide simple page elements and can leverage newer browser JS features for common features like selector and forEach.

Enjoy! 

shades_smile

 

Video

You Might Not Need JQuery – VIDEO from Jeff Jones on Vimeo.

 

Screenshot

2016-07-29_17-14-29

Code – HTML


Code – CSS

/* CSS method */
#ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox {
    display:none;
}
a.ms-core-listMenu-item {
    display: none;
}

Code – JS

// JS approach - http://youmightnotneedjquery.com/
var elements = document.querySelectorAll('a.ms-core-listMenu-item');
Array.prototype.forEach.call(elements, function(el, i){
    el.style.display = 'none';
});

Form Library JS – an InfoPath replacement?

Microsoft announced InfoPath will go away in 2023.  It makes sense and they have good reasons.   However, form developers are confused about available options.  I have an idea for the InfoPath Roadmap and would appreciate your feedback in the comments below or Twitter (@spjeff) please.

Why not use JavaScript to create similar XML documents?


When people say “InfoPath” they generally are referring to a three part system outlined below.   InfoPath strictly speaking is the form input experience.  Form Library holds the saved XML output.  SharePoint Designer can then trigger email notifications based on status change.

image

 

InfoPath as a form input experience has many limitations based on the server postback and Dot Net architecture.  Just try a large repeating table and watch the slow “Loading…” experience as users click and rules postback to the SharePoint IFS backend.   HTML5 and JavaScript offer new options for client side validation, async loading, mobile touch input, responsive layout, and advanced rendering with framworks like JQueryUI  / Bootstrap / Angular.   That’s awesome form input technology!    However, InfoPath is normally chosen for ease of use and “no code”.   Let’s think about how that conversation might go …


Developer Conversation

DEV1 >  “Hey did you hear Microsoft is retiring InfoPath in 2023?”

DEV2 >  “Yeah, but it’s all we have today so I’ll keep using it.  Not sure what else to use.  Sure would be nice to have HTML5 and cooler input experience.”

DEV1 > “Definitely.  Coding from scratch is a lot of work.  I don’t really want to mess around with SPList REST connections for CRUD or make a SQL database with SVC/OData for simple forms.  My head hurts.”

DEV2>  “True, but I guess we’ll gave to make a schema first then form later.”

DEV1 > “InfoPath saved as XML.   I like XML.  It works well for import/export across all of our systems.   Could we keep XML but ditch InfoPath?”

DEV2 > “Cool idea, but I’m not sure how.”


Why throw out the baby with the bathwater?   

 

Can’t we make fantastic forms with HTML5/JS and then save back to a Form Library in order to leverage SharePoint for storage, views, and workflow?    Right now this is just an idea.  I don’t yet have a working prototype to show but think it would be straightforward to convert JSON to XML and upload.     InfoPath would still be used but by developers for schema only (define XML structure).   End users would never see it.

 

Please leave a comment below and let me know if you think this might be practical.  Thanks!  

Smile

 

FormLibraryJS

 


References

Merry Christmas – HTML5, JS, and CSS3

I wanted to thank all of you for reading my blog and wishing you a Happy Holiday season.   After passing exam 070-480 about HTML5, it seemed like a great time to practice new skills and draw a <CANVAS> based Christmas Tree here.   Enjoy!  

Smile

 

Screenshot of what it should look like:

image

Code behind:


 

Live working demo:



Merry Christmas!

JQuery Accordion – Expand Collapse All

I looked over many threads and posts on many sites and wasn’t able to find code that worked for me.    Some of it would be close.   Others buggy.   Below I’ve outlined the JQuery code that worked perfectly for my needs and I hope you find it helpful too.

This example was deployed to a SharePoint page so the “/_layouts/images/plus.gif” was used to leverage the OOTB graphics for a plus/minus icon feel.

Full Example Source Download     (accordion.zip  73KB)

 

image

 

image

 

Parent .HTML

Expand All

First Header

first body

Second Header

second body

Third Header

third body

Supporting .JS

// bind to accordion object
$(document).ready(function(){
	$('#container').accordion({
		header: “h3?
	});
});
// actions taken upon clicking the expand all (collapse all) link
$('#container #expand').click( function() {
	// if link was expand then show and toggle text
	var currHTML = $('#container #expand').html();
	if (currHTML.indexOf(“Expand All”)>0) {
		$('#container .section').slideDown();
		$('#container #expand').html(“
Collapse All”); } else { // if link was collapse then hide and toggle text $('#container .section').slideUp(); $('#container .section').each(function(i){ if (i==0) $(this).slideDown(); }); $('#container #expand').html(“
Expand All”); } });

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲