Restricting Custom People Picker to only one Sharepoint group programatically

Refer the following script files in your page,

    <!-- For People Picker -->

    <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>

    <!--- -->

Now we have to create a div for our custom people picker control


    <div id="dvPicker">
    </div>

Now paste the following script which can restrict the custom people picker for one group.
Here we have to pass the Group name to get the corresponding Group ID

<script type="text/javascript">

        var reviewGroupId;

          SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
            (function () {
                LoadInitial();
            })();
        });

     
        function LoadInitial() {
            var requestUri =_spPageContextInfo.webAbsoluteUrl + "/_api/web/SiteGroups/getbyname('Board')";
            $.ajax({
                url: requestUri,
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                    "content-type": "application/json;odata=verbose",
                    "X-RequestDigest": $("#_REQUESTDIGEST").val()
                },
                success: onSuccess,
                error: onError
            });          
        }

       function onSuccess(data) {
         
            reviewGroupId = data.d.Id;
            alert(reviewGroupId);
            initializePeoplePicker('dvPicker', reviewGroupId);

        }

        function onError(error) {
            alert(JSON.stringify(error));
        }

        function initializePeoplePicker(peoplePickerElementId, Id) {

            var schema = {};

            schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';

            schema['SearchPrincipalSource'] = 15;

            schema['ResolvePrincipalSource'] = 15;

            schema['AllowMultipleValues'] = false;

            schema['MaximumEntitySuggestions'] = 50;

            schema['Width'] = '280px';

            schema['SharePointGroupID'] = Id;

            SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);

        }      

    </script>

Here we are restricting the people picker for only one SharePoint group "Board".
Apart from this group other group users will not resolve in this people picker.

Thanks,

CREATING SIMPLE JQUERY TREE VIEW WITH DYNAMIC VALUES / Display a SharePoint Document Library as Tree View using Jquery

As i showed how to create a simple jquery tree view, now we are going to do some small modifications to achieve it dynamically.

Refer this link for previous post: Simple Jquery Tree View

Now change the design part as like below:

<div class="tree">

////Dynamic Tree Nodes

</div>

Now create the dynamic values. Here i am going to get the values from SharePoint Document Library:

<script type="text/javascript">
        var sMenuString = "";
        var rootFolders;
        var getInternalDocName = "Test_Document";

        $(document).ready(function () {
            bindTreeView();

            $('.tree li').each(function () {
                if ($(this).children('ul').length > 0) {
                    $(this).addClass('parent');
                }
            });

            $('.tree li.parent > a').click(function () {
                $(this).parent().toggleClass('active');
                $(this).parent().children('ul').slideToggle('fast');
            });
        });

        function bindTreeView() {
            try {
                var div = document.getElementById("dvTreeView");
                sMenuString = "";
                $.ajax({
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Test_Document')/items?$expand=Folder,AttachmentFiles&$select=ID,Title,EncodedAbsUrl,FileRef,FSObjType,FileLeafRef,Folder/ServerRelativeUrl&$top=500&$orderby=ID%20asc", //assuming web part is added on same site :)  
                    type: "GET",
                    headers: { "accept": "application/json;odata=verbose" },
                    async: false,
                    success: function (docsData) {
                        if (docsData.d.results.length > 0) {
                            var getValues = docsData.d.results;

                            rootFolders = $.grep(getValues, function (e) {
                                if (e.EncodedAbsUrl.split(getInternalDocName + "/")[1] != null) {
                                    return e.EncodedAbsUrl.split(getInternalDocName + "/")[1].split('/').length == 1;
                                }
                            });
                            sMenuString += "<ul>";
                            $.each(rootFolders, function (i, rootFolder) {
                                sMenuString += "<li class='parent'><a>" + rootFolder.FileLeafRef + "</a>";

                                if (rootFolder.FSObjType == 1) {
                                    sMenuString += "<ul>";
                                    SubFoldersFiles(getValues, rootFolder.FileLeafRef.replace(/ /g, '%20'), rootFolder.EncodedAbsUrl);
                                    sMenuString += "</ul>";
                                }
                                sMenuString += "</li>";
                            });

                            sMenuString += "</ul>";
                            div.innerHTML = sMenuString;

                        }
                    }
                });
            } catch (e) {
                alert(e.message);
            }
            return false;
        }

        function SubFoldersFiles(listItems, currentItem, fullUrl) {
            var items = [];
            var subItems = $.grep(listItems, function (e) {
                if (e.EncodedAbsUrl.split(fullUrl + "/").length > 1) {
                    var fileUrl = e.EncodedAbsUrl.split(fullUrl + "/")[1];
                    if (fileUrl.split("/").length == 1) {
                        return true;
                    }
                }
            });

            if (subItems.length > 0) {
                $.each(subItems, function (i, subItem) {

                    if (subItem.FSObjType == 1) {
                        sMenuString += "<li class='parent'><a>" + subItem.FileLeafRef + "</a>";
                        sMenuString += "<ul>";
                        SubFoldersFiles(listItems, subItem.FileLeafRef.replace(/ /g, '%20'), subItem.EncodedAbsUrl);
                        sMenuString += "</ul>";
                    }
                    else {
                        sMenuString += "<li><input type='checkbox' class='chkTreeView' name='TreeView' value='" + subItem.FileRef + "' onclick='docDetails(this)' /><a>" + subItem.FileLeafRef + "</a></li>";
                    }
                });
            }
        }
    </script>

This above script will help you to bind all the root folders and documents and Sub-Folders from a document library.

Once you deployed then you out put will looks like below:

CREATING SIMPLE JQUERY TREE VIEW WITHOUT PLUGIN

Here we are going to create a Simple Tree View with out using any plugins

Use the below code for tree view nodes:

<div class="tree">
<ul>
    <li><a>First Level</a>
    <ul>
        <li><a>Second Level</a></li>
        <li><a>Second Level</a></li>
        <li><a>Second Level</a></li>
    </ul>
    </li>
    <li><a>First Level</a>
    <ul>
        <li><a>Second Level</a>
    <ul>
        <li><a>Third Level</a></li>
        <li><a>Third Level</a></li>
        <li><a>Third Level</a>
    <ul>
        <li><a>Fourth Level</a></li>
        <li><a>Fourth Level</a></li>
        <li><a>Fourth Level</a>
    <ul>
        <li><a>Fifth Level</a></li>
        <li><a>Fifth Level</a></li>
        <li><a>Fifth Level</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
        <li><a>Second Level</a></li>
    </ul>
    </li>
        <li><a>First Level</a>
    <ul>
        <li><a>Second Level</a></li>
        <li><a>Second Level</a></li>
    </ul>
    </li>
</ul>
</div>

Use the below code for tree view node expand and collapse:

$( document ).ready( function( ) { $( '.tree li' ).each( function() { if( $( this ).children( 'ul' ).length > 0 ) { $( this ).addClass( 'parent' ); } }); $( '.tree li.parent > a' ).click( function( ) { $( this ).parent().toggleClass( 'active' ); $( this ).parent().children( 'ul' ).slideToggle( 'fast' ); }); $( '#all' ).click( function() { $( '.tree li' ).each( function() { $( this ).toggleClass( 'active' ); $( this ).children( 'ul' ).slideToggle( 'fast' ); }); }); });

Use the below code for Tree View design:

body, a {
    color: #3B4C56;
    font-family: sans-serif;
    font-size: 14px;
    text-decoration: none;
}
#logo
{
width: 505px;
margin: 0 auto;
text-align: center;
}
#pgtitle
{
margin: 0px 0px 20px;
font-size: 18pt;
}
a{
cursor:pointer;
}
.tree ul {
    list-style: none outside none;
}
.tree li a {
    line-height: 25px;
}
.tree > ul > li > a {
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}
.tree li.parent > a {
    padding: 0 0 0 28px;
}
.tree li.parent > a:before {
    background-image: url("../images/plus_minus_icons.png");
    background-position: 25px center;
     content: "";
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}
.tree ul li.active > a:before {
    background-position: 0 center;
}
.tree ul li ul {
    border-left: 1px solid #D9DADB;
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}
.tree ul li ul li {
    position: relative;
}
.tree ul li ul li:before {
    border-bottom: 1px dashed #E2E2E3;
    content: "";
    left: -20px;
    position: absolute;
    top: 12px;
    width: 15px;
}
#wrapper {
    margin: 0 auto;
    width: 300px;
}

Now we can deploy the solution and we can get the simple tree view.

Thank you,

Get Values From Query String Using jQuery

 $(document).ready(function () {
            try {              
                var mode = GetParameterValues('Mode');
                alert(mode);
            } catch (e) {
                alert(e);
            }
        });

function GetParameterValues(param) {
            var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < url.length; i++) {
                var urlparam = url[i].split('=');
                if (urlparam[0] == param) {
                    return urlparam[1];
                }
            }
        }

How to hide a Yes/No column in NewForm.aspx and EditForm.aspx in sharepoint 2013

We can't hide the Yes/No field using OOB in sharepoint. Better we go for script editor to hide the particular column. Apply the following steps.

Add in the Content Editor Web Part located under the Media and Content category.

Paste the following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('nobr:contains("TestColumn")').closest('tr').hide(); 
});

</script>

you can use this for multiple columns also.


thank you.

How to add Custom validation for Newform.aspx and Editform.aspx in Sharepoint 2013

I am using PreSaveAction() JavaScript function to check whether start day is lower than End day or not. If it is lower than greater than end day then it will show an alert message;

Add in the Content Editor Web Part located under the Media and Content category.

Paste the following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
 var j = jQuery.noConflict(); 
 function PreSaveAction() { 
 var startDay= j(":input[title='Start_Day']").val(); 
var endDay= j(":input[title='End_Day']").val(); 
if(startDay=='')
{
alert("Please enter start day");
return false;
}
else if(endDay=='')
{
alert("Please enter end day");
return false;
}
else if(endDay < startDay)
{       
   alert("End day should be greater than start day");          
   return false;
}
else{
   return true;
    }
}

</script>

thank you..

Get the checkbox value is checked or not using Jquery

 $(document).ready(function () {
    $('#<%=chkValidateBabyName.ClientID%>').change(function () {
          if ($(this).is(":checked")) {
            alert("Check box checked");
          }
          else{
           alert("Check box un checked");
         }
    });
});

Include this code in document ready function. then you will get checkbox value when the check box value is changed..

How to create a static variable at client side

Actually we cant create a static variable at client side. But we can keep the value even after page postback using Hidden field control.

First we need to create a hidden control and need to set ClientIDMode as "Static"

Ex: <asp:HiddenField ID="hndControl" ClientIDMode="Static" runat="server" />

After that we need to assign the value to that hidden field.

document.getElementById('<%= hndControl.ClientID %>').value = "Static";

Here after we can use that value until we change hidden field value.