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,

How to Create a Simple Alert using AngularJs on Button Click

First create a simple button which contains an ng-click Event:

<input id="btnTest" type="button" value="Show Alert" ng-click="ShowAlert()" />

 var app = angular.module('MyApp', []);

            app.controller('MyController', function ($scope, $window) {

                $scope.ShowAlert = function () {                   

                    $window.alert("Hello World");

                }

            });

From this method it will display the alert box.

Thank you, 

Create a Handler Page to Call Methods from Class file to JavaScript

Today i had a task which i need to call a code behind method from .ascx page. So i have created a handler page to achieve this task. Here i will tell you the steps to create a handler page:

1. Create a SharePoint 2013 empty project like below image:

2. Create a Mapped Layouts folder

3. In Visual Studio 2013 we don't have Dynamic Handler. So here we need to create Handler page by our selves. From add new item select an application page and rename it like below:

4. Now remove the designer.cs from the .ashx file. Here we don't need the designer file.

5. Open MyHandler.ashx.cs. It will look like below image:

6. Next we have to create GUID for this handler page. From tools select Create GUID

7. From that pop up select Create GUID and copy that ID

8. Now paste that GUID in top of our class file like below, make sure that all the alphabetical characters are in smaller case in that GUID:

   For this GUID we need to include the using System.Runtime.InteropServices; name space.

9. In class file remove the Page load method and add the default methods like below:

    and make sure that your handler page inherits from IHttpHandler not from layouts page. 

    Change that like the image:

10. Now we have to modify the MyHandler.ashx page. Delete everything from that page and replave         with the below code:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%@ WebHandler Class="$SharePoint.Type.4dcefb1c-d4d7-4dd4-9870-4d0f66c2e55d.FullName$" %>

Here paste our GUID after SharePoint.Type with all the alphabets are in smaller case.

11. Now Change the Solution settings:

First unload the project:

Then edit .csproject like settings:

Add the the below line after the <SandboxSolutions> tag

<TokenReplacementFileExtensions>ashx;</TokenReplacementFileExtensions>

Now reload the project:

Now deploy your solution and browse the following url:

http://siteurl/_layouts/15/TestHandlerPage/MyHandler.ashx

and we can get the Out put like below:

If you are facing any error while accessing the page then change the some settings like below:

Right click the MyHandler.ashx and select properties. From that properties change the build action to Content

Now we will get the out put.

12. Now we can see how to call that method from .ascx page

function OpenTreeViewPopUp() {

                try {                    

                    $.ajax({

                        url: '/cgmt/_layouts/15/TestHandlerPage/MyHandler.ashx',

                        contentType: "application/json; charset=utf-8",

                        success: function (result) {

                            alert(result);

                        },

                        error: function (data) {

                            //alert(result);

                        }

                    });

                } catch (e) {

                    alert(e.message);

                }

                return false;

            }

using ajax we can call the handler method like the above code. The result will return the values from code behind.

Reference : Click Here

Hope this will help,

Thank you

Deploy and Create Site Pages through Visual Studio for SharePoint 2013

Here i am going to explain about creating a site page using visual studio.

1. Create an empty SharePoint project

2. Create an application page

3. Create a Module from add new items. Once you add these items then your solution will look like the below image:

4. Now drag and drop the application page into module folder and remove the code behind file. We         don't need that. Refer the below image:

5. Go to aspx page and in our case its “ApplicationPage1.aspx” and remove the below line:

    <%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="ApplicationPage1.aspx.cs"
   Inherits="SitePages.Layouts.SitePages.ApplicationPage1"
    DynamicMasterPageFile="~masterurl/default.master" %>

   Here the master page also will get removed. So we have to add the reference to the master page.          Add the below code in your application page.

   <%@ Page Language="C#" MasterPageFile="~masterurl/default.master"
 Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>

6. Remove project assemble.
    Remove the below line which refer the the project. If not this is will throw an error when we try to     deploy in SharePoint online.

   <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

7. Add webpart zone
    Now add webpart zone into PlaceHolderMain.

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <WebPartPages:WebPartZone ID="WebPartZoneSearch" runat="server" Title="Webpart zone">
        <ZoneTemplate>
        </ZoneTemplate>
    </WebPartPages:WebPartZone>
</asp:Content>

8. Deploy the solution.

   After the deployment check your site pages. A new site page will be there in the name of
   ApplicationPage1.aspx

9. If we want to include our existing web part with our web part zone, then open the SharePoint designer and browse the site page which we need to include. Copy the below line and paste it in top of our application page

<%@ Register TagPrefix="WpNs0" Namespace="WP_TestWebPart" Assembly="TestWebpart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a5bf86caedf86e4c" %>

10. Copy the web part zone from designer and paste it in our webpart zone. The code will look like below:

<WebPartPages:WebPartZone runat="server" Title="loc:Header" ID="Header" FrameType="TitleBarOnly">
        <ZoneTemplate>
            <WpNs0:WP_TestWebPart runat="server" ChromeType="None" Description="Display Web Part" Title="WP_TestWebPart" ID="g_df62caba_d542_4728_b7dd_88c097775691" __markuptype="vsattributemarkup" __webpartid="{DF62CABA-D542-4728-B7DD-88C097775691}" webpart="true" __designer:isclosed="false"></WpNs0:WP_TestWebPart>
        </ZoneTemplate>
    </WebPartPages:WebPartZone>

11. Now deploy your solution and refresh the created site page. We can find our web part in this page.


Hope this will help you guys,

How to pass value from SharePoint modal dialog to Parent window

We can pass the value from SharePoint Modal dialog to its parent window.

After a long search i found the below solution:

Parent Window:

function OpenPopUp() {
                var siteCollectionURL = _spPageContextInfo.siteAbsoluteUrl;
                var options = {
                    url: siteCollectionURL + "/Sitepages/PopUpView.aspx",
                    dialogReturnValueCallback: CloseCallback,
                    height: 900,
                    width: 800
                };
                SP.UI.ModalDialog.showModalDialog(options);
                return false;
            }

function CloseCallback(result, target) {
              ///Value given at Popup window will come as target value
                alert(target);

            }

PopUp window:


function Successclosepopup() {
              var returnValue = "PopUp Successfully Closed";
              SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, returnValue);

            }

Hope this may help you.

Thanks.,