SharePoint Productivity Tools

SharePoint Productivity Tools

Share point productivity tools from Denis Molodtsov

List of all tools is on Github

SPPP Presentation

Sppp presentation from Denis Molodtsov

The Best Way to Develop SharePoint Client Side Applications

 

Please, read these articles by Andrew Koltyakov.

He explains in great detail how to properly develop client side solutions using tools like node, gulp, Visual Studio Code with SharePoint

Add jQuery to any page in a console

var script = document.createElement("script"); 
script.type="text/javascript"; 
script.src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"; 
document.getElementsByTagName('head')[0].appendChild(script);

Override Keyboard Keys in SharePoint

Here is a simple way to override keyboard keys in SharePoint:

 overrideKeys = function () {  
 /*This is a standard SharePoint Function, that listens to keyboard events*/  
   window.OnListViewKeyDown = function OnListViewKeyDown(a, b) {  
     var d = GetListContextFromContextNumber(String(b));  
     if (d == null || d.inGridMode) return;  
     var e = a.keyCode,  
       c = a.shiftKey || a.ctrlKey;  
     if (IsCallOutOn()) return;  
           console.log(e);  
     switch (e) {  
       case Sys.UI.Key.del:  
         //Oveeride Delete Button  
         break;  
       case Sys.UI.Key.up:  
         SelectNextRow(b, -1, c, a);  
         break;  
       case Sys.UI.Key.down:  
         SelectNextRow(b, 1, c, a);  
         break;  
       case Sys.UI.Key.enter:  
         if (IsEventTargetAnchor(a)) return;  
         if (a.target != null && !IsStrNullOrEmpty(a.target.className) && a.target.className.indexOf("ms-lstItmLinkAnchor") >= 0) OpenCallOutOrECB(b, a);  
         else ListItem_Open(b, a)  
           case Sys.UI.Key.esc:  
                 //override Esc  
                 brea;  
     }  
   }  
 };  
 $(function () {  
   setTimeout(overrideKeys, 600);  
 });  

You can have a look at the full list of Sys.UI.Keys here

Replacing InfoPath Forms in SharePoint – Do It Yourself! (Repost)

Here is a very nice article by Bjørn Furuknap on replacing InfoPath forms with HTML and JavaScript

\
You can start watching from 12th minute. It's where valuable stuff begins.

jQuery plugin for SharePoint 2010/2013 That turns on WYSIWYG Feature for Selected DIV Tags, Hack

Enable and disable native SharePoint WYSIWYG HTML Editor:

SharePoint 2010 Version:

 (function ($) {  
   $.fn.SPEditable = function () {  
     return this.each(function () {  
       $(this).addClass("ms-rtestate-write ms-rteflags-0 ms-rtestate-field").attr("role", "textbox").attr("aria-haspopup", "true").attr("style", "min-height: 84px;").attr("contentEditable", "true").attr("UseInlineStyle", "True").attr("aria-autocomplete", "both").attr("aria-multiline", "true");  
     });  
   };  
   $.fn.SPNonEditable = function () {  
     return this.each(function () {  
       $(this).removeClass("ms-rtestate-write ms-rteflags-0 ms-rtestate-field").removeAttr("role aria-haspopup style contentEditable UseInlineStyle aria-multiline");  
     });  
   };  
 })(jQuery);  

Usage:

 $("#myDiv").SPEditable();  

The result is amazing:

One thing to remember: this only works when you are in edit mode either in a list item or page.

An advanced example:

SharePoint 2013 version:

 (function ($) {  
   $.fn.SPEditable = function () {  
     return this.each(function () {  
       $(this).addClass("ms-rte-layoutszone-inner-editable ms-rtestate-write").attr("role", "textbox").attr("aria-haspopup", "true").attr("contentEditable", "true").attr("aria-autocomplete", "both").attr("aria-autocomplete", "both").attr("aria-multiline", "true");  
     });  
   };  
   $.fn.SPNonEditable = function () {  
     return this.each(function () {  
       $(this).removeClass("ms-rte-layoutszone-inner-editable ms-rtestate-write").removeAttr("role aria-haspopup contentEditable aria-autocomplete aria-multiline");  
     });  
   };  
 })(jQuery);   

 

Run Custom Function before "Save" Button is Clicked with PreSaveAction. SharePoint 2010

Add Javascript function to the page:

function PreSaveAction() 
{ 
    // your custom code goes here
    return true;  // OK to proceed with the save item }

For more information, check this post:
http://edinkapic.blogspot.ru/2007/10/add-javascript-date-validation-into.html

Detect Edit Mode with Javascript on SharePoint pages or SPListitem forms

This JavaScript function will tell you if we are in the List Edit form:

var isEditForm = function ()
{
    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    if (sPage == "EditForm.aspx")
    return true;
    else return false;
}

And this one will tell you if we are in edit mode on publishing, web part or wiki pages

var isinEditMode = function() {
    var isEditMode = false;
    try {
        var inDesignMode = document.forms[window.MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

        if (inDesignMode == "1") {
            isEditMode = true;

        }
    } catch(e) {
    }

    try {
        var wikiInEditMode = document.forms[window.MSOWebPartPageFormName]._wikiPageMode.value;
        if (wikiInEditMode == "Edit") {
            isEditMode = true;
        }
    } catch(e) {

    }

    return isEditMode;
};

Highlight Current Quick Launch Menu Item

1. Add a start-up script on your page

$(function () {
    $(".s4-ql li.selected").parents("li.static").find(":first-child").first().addClass("selected-menu-item");
 });

2. Take advantage of the added CSS class to highlight current menu item:

.s4-ql UL.root a.selected-menu-item {
    background-color: rgb(0,153,0);
}

Example of the highlighted menu item: