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

BUSINESS CONNECTIVITY SERVICES in SharePoint 2013

What is BCS?

The short answer is pretty simple – BCS enables you to connect to ‘other’ data sources outside of SharePoint and literally treat them as a SharePoint List.
With BCS, you can bring information into SharePoint from a variety sources. For example, you can bring data from an external SQL Server database, a traditional web service, a WCF service, proprietary systems, and OData services.

How to Implement with SQL External Data Source:

1. Open SharePoint Designer with the required URL:

2. Select the External Types from left menu and click on External Content type from ribbon menu

3. Change the name of External Content type information and select the Item type.

4. Select Click here to discover external data source and define operations.

5. Click Add connection and Choose External Data Source Type:

6. Here we selected SQL server, now we need to provide the Server credentials:

   Once we provided the server and DB details then our DB will be enabled here. As we can see i            have connected my Test DB for BCS.

7. Under our DB we can select any table and we can create operations for that [articular table:

    Here we can create any operation for that table. Here i am creating all operation for that student table

8. Next we will see the Operation properties:

9. Once the operations are created then we need to create an external list for that particular Table:

    Here select the BCS name and click ok.

Give a name for the external list. Once the list is created then we can see that list in our URL under site contents.

If you open that list you may see like this:

10. Open central admin. Under application management click on Manage Service Applications

   Under that we can see Business Data Connectivity Service if you click on that we can see our BCS 

   From that click our BCS and Select on Set permissios:

 There give permissions to corresponding users:

After that it will work. If don't then set Meta data store permissions same as set permission and give the required permissions to the corresponding users then it will surely work.

You can add items in that list which will reflect in that table. 

Thank you...

Default Sharepoint URL

(Remember for SharePoint 2013, 2016 you might want to add “15”, “16” respectively after “/_layouts/” but if you don’t SharePoint will take care of that for you) .. Also some of these are turned off on Office 365 SharePoint online.


Site collection level recycle bin:
      /_layouts/15/AdminRecycleBin.aspx

Site level recycle bin (Added by Steve Stewart):
      /_layouts/RecycleBin.aspx

Recreate default site sp groups (Added by Neal Bongers):
      _layouts/15/permsetup.aspx

Load document tab initial (Added by Dominik Gempeler)
      ?InitialTabId=Ribbon.Document

Delete user from Site collection (on-premises) (Added by SamDavid):
       /_layouts/15/people.aspx?MembershipGroupId=0

Display list in grid view. ‘True’ is case sensitive (Added by Antoine L.):
      ?ShowInGrid=True

Quick Launch settings page (Added by Ishani M.):
       /_layouts/quiklnch.aspx

Navigation Settings page (Added by Abdur Raheem):
        /_layouts/15/AreaNavigationSettings.aspx

Sandboxed Solution Gallery:
        /_catalogs/solutions/Forms/AllItems.aspx

Workflow history hidden list:
        /lists/Workflow History

Filter toolbar for Lists and libraries (Added by Asimaili):
?Filter=1
Site usage page (Added by @Dnyag):
       /_layouts/usage.aspx

Site content and structure  page (Added by @Dnyag):
      /_layouts/sitemanager.aspx

Site settings page (Added by Aowworld):
      /_layouts/settings.aspx

View all site content page (Site content) (Added by Aowworld):
      /_layouts/viewlsts.aspx

Manage site collection features – CASE SENSITIVE –  (Added by Vardhaman):
      /_layouts/ManageFeatures.aspx?Scope=Site

Manage site features (Added by Vardhaman):
      /_layouts/ManageFeatures.aspx

 Get the version of the SharePoint server (Patch level) (Added by: John Liu):
      /_vti_pvt/Service.cnf

Web Part Maintenance Page (Added by: Ricky):
?Contents=1

Show Page in Dialog View (Added by:Ricky):
?isdlg=1

Application page for registering SharePoint apps
     /_layouts/15/appregnew.aspx

Save Site as a template
     /_layouts/savetmpl.aspx

Sign in as a different user
     /_layouts/closeConnection.aspx?loginasanotheruser=true

Enable SharePoint designer
      /_layouts/SharePointDesignerSettings.aspx

Welcome Page (Default page settings)
      /_layouts/AreaWelcomePage.aspx

Change Site Master Page
      /_layouts/ChangeSiteMasterPage.aspx

Page Layouts and Site Templates
      /_Layouts/AreaTemplateSettings.aspx

Master Pages library
      /_catalogs/masterpage/Forms/AllItems.aspx

Quick Deploy List
Quick%20Deploy%20Items/AllItems.aspx

Open Page in Edit Mode
?ToolPaneView=2

Taxonomy Hidden List (MMS)
      Lists/TaxonomyHiddenList/AllItems.aspx

User Information List:
 _catalogs/users
_catalogs/users/simple.aspx

Force displaying the user profile in the site
collection:
      /_layouts/userdisp.aspx?id={UserID}&Force=True

Site hierarchy page (lists of sub sites) – (Added by community contributions)
     /_layouts/vsubwebs.aspx
     /_layouts/1033/vsubwebs.aspx

How to enable custom login page in SharePoint 2013

1. Enable anonymous for that web application

    1.1 Choose your web application
   

    1.2 Choose the Authentication Providers from top menu

  

    1.3 From that check the Enable anonymous access

2. Enable Forms Based Authentication (FBA)
   ASP.NET Membership provider name - wmembership
   ASP.NET Role manager name - wrolemanager
 

3. Change the Custom login page url in you webconfig. In authentication tab change the default URL
   <forms loginUrl="/_layouts/15/CustomLogin/Login.aspx" domain="domain.com" />
 
4. Add the following tag in Security token config file

<system.web>

    <membership defaultProvider="wmembership">

      <providers>

        <add name="wmembership" type="Nauplius.ADLDS.Provider.LdapMembership, Nauplius.ADLDS.Provider.2013, Version=1.0.0.0, Culture=neutral, PublicKeyToken=e1247d213b5ddc40" server="trigchn.com" port="389" useSSL="false" userDNAttribute="distinguishedName" userNameAttribute="sAMAccountName" userContainer="DC=trigchn,DC=com" userObjectClass="person" userFilter="(ObjectClass=person)" scope="Subtree" otherRequiredUserAttributes="sn,givenname,cn" />

      </providers>

    </membership>

    <roleManager defaultProvider="wrolemanager" enabled="true" cacheRolesInCookie="true" cookieName=".PeopleDCRole">

      <providers>

        <add name="wrolemanager" type="Nauplius.ADLDS.Provider.LdapMembership, Nauplius.ADLDS.Provider.2013, Version=1.0.0.0, Culture=neutral, PublicKeyToken=e1247d213b5ddc40" server="trigchn.com" port="389" useSSL="false" groupContainer="DC=trigchn,DC=com" groupNameAttribute="cn" groupNameAlternateSearchAttribute="samAccountName" groupMemberAttribute="member" userNameAttribute="sAMAccountName" dnAttribute="distinguishedName" groupFilter="((ObjectClass=group)" userFilter="((ObjectClass=person)" scope="Subtree" />

      </providers>

    </roleManager>

  </system.web>

5. Now do an IISREST and refresh your application. You can see your custom login page.

  

Creating SharePoint Timer Job

Timer Job:

Timer Job is a background process that are run by SharePoint. It is a periodically executed task inside SharePoint Server. It provides us a task execution environment.

Default Timer Jobs inside SharePoint:

There are many timer jobs inside SharePoint which do internal tasks like:

• Send emails
• Validate sites
• Delete unused sites
• Health analysis
• Product versioning
• Diagnostics

These tasks will having execution periods like:

• Minute
• Hour
• Day
• Week
• Month

1) Create an empty SharePoint project and add an class file in that project.

    Derive CustomTimerJob Class from SPJobDefinition which comes from 

    Microsoft.SharePoint.Administration.dll

Example:

    class TestTimerJob : SPJobDefinition

    {

     }

2) Add the three Constructors of the derived class : When ever we create the object of CustomTimerJob  class, corresponding constructor will execute.

   

Example:  

  public TestTimerJob() : base()

        {

        }

   public TestTimerJob(string sJobName, SPService service, SPServer server, SPJobLockType targetType)

            : base(sJobName, service, server, targetType)

        {

        }

   public TestTimerJob (string sJobName, SPWebApplication webApplication)

            : base(sJobName, webApplication, null, SPJobLockType.ContentDatabase)

        {

            this.Title = "Test Time Job";

        }

3) Override the Execute method: When ever the timer job start running then the code inside the Execute method will run.

Example: 

public override void Execute(Guid targetInstanceId)

        {

            try

            {

                SPSecurity.RunWithElevatedPrivileges(delegate()

                {

                    using (SPSite Osite = new SPSite(SPContext.Current.Site.ID))

                    {

                        using (SPWeb Oweb = Osite.OpenWeb())

                        {

                            SPList TestTasksList = Oweb.Lists.TryGetList("TestTasksList ");                          

                            SPListItemCollection TestTasksListCol = TestTasksList.GetItems();

                            foreach(SPListItem Oitem in TestTasksListCol)

                           {       

                                 Oitem["Title"]="TimerJob";

                                  Oitem.Update();   

                           }

                        }

                    }

                });

            }

            catch (Exception)

            {

                throw;

            }

        }

4) We need to create a Feature and Feature Receiver so on activation of this feature we are going the add our timer job to SharePoint farm.

    1. Create a new feature and set its scope as Site

    2. Add an event receiver by right clicking that feature. 

    3. And also create a name for your timer job;

const string JOB_NAME = "Test TimerJob";

       In that feature include the following code for Feature activated and Feature Deactivating

Feature Activated:

 public override void FeatureActivated(SPFeatureReceiverProperties properties)

        {

            SPSite site = properties.Feature.Parent as SPSite;

            foreach (SPJobDefinition job in site.WebApplication.JobDefinitions)

            {

                if (job.Name == JOB_NAME)

                    job.Delete();

            }

            OverdueTasksTimerJob listLoggerJob = new OverdueTasksTimerJob(JOB_NAME, site.WebApplication);

            //SPMinuteSchedule schedule = new SPMinuteSchedule();

            SPDailySchedule schedule = new SPDailySchedule();

            schedule.BeginSecond = 0;

            schedule.EndSecond = 59;

            //schedule.Interval = 5;

            listLoggerJob.Schedule = schedule;

            listLoggerJob.Update();

        }

Feature Deactivated:

       public override void FeatureDeactivating(SPFeatureReceiverProperties properties)

        {

            SPSite site = properties.Feature.Parent as SPSite;

            // Delete the timer job

            foreach (SPJobDefinition job in site.WebApplication.JobDefinitions)

            {

                if (job.Name == JOB_NAME)

                    job.Delete();

            }

        }

5) Next deploy you solution and check you timer job is comes under Job definitions in Monitoring option in central admin. If it doesn't come then activate the feature manually using Power shell command.

Example:

Enable-SPFeature FeatureFolderName -Url http://server/site/subsite

Note: you can get the Feature name from the following path:

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\FEATURES