Sharepoint 2013 Hosting – HostForLIFE.eu :: Retrieve SP List Item’s Column Value In SPFx Application Customizer Using PNP

Jan 17th

Posted by Peter in European SharePoint 2013 Hosting

In this blog article, I am going to describe all the steps required to get SharePoint list field values by using SharePoint Framework model which is SPFx.

If you are already familiar with SPFx then you might have a better understanding on SPFx application customizer.

If you are new to SPFx then please go through this below-mentioned link from where you can get a better understanding on SPFx model.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

In this below-mentioned code example, I have taken application customizer of SPFx. I have also used PnP JavaScript library. The Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint and the SharePoint Framework.

To get more detailed information about PnP javascript library, please follow this link,

https://github.com/SharePoint/PnP-JS-Core.

This below-mentioned code example is very simple and straight forward. At first, you have to import ‘sp-pnp-js’ namespace, then you can use PnP library in code to retrieve SharePoint list and its field values.

This code snippet will help you to retrieve any column values of all list items present under a particular list. You just have to provide your list title and list field/column internal name in the following line,

pnp.sp.web.lists.getByTitle(“My List”).items.select(“Title”, “Id”, “CustomField_1”, “CustomField_2”).getPaged()

In the above piece of code “My list” is SP list title and “Title”, “Id”, “CustomField_1”, “CustomField_2” are list field/column internal names.

Accordingly you can change these values on your end,

    import { override } from '@microsoft/decorators';  
    import { Log } from '@microsoft/sp-core-library';  
    import {  
    BaseApplicationCustomizer  
    }  
    from '@microsoft/sp-application-base';  
    import {  
        Dialog  
    } from '@microsoft/sp-dialog';  
    require('mutationobserver-shim');  
    import * as strings from 'HelloWorldApplicationCustomizerStrings';  
    const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';  
    /** 
     * If your command set uses the ClientSideComponentProperties JSON input, 
     * it will be deserialized into the BaseExtension.properties object. 
     * You can define an interface to describe it. 
     */  
    export interface IHelloWorldApplicationCustomizerProperties {  
        // This is an example; replace with your own property  
        testMessage: string;  
    }  
    let _observer: MutationObserver;  
    /** A Custom Action which can be run during execution of a Client Side Application */  
    export default class HelloWorldApplicationCustomizer  
    extends BaseApplicationCustomizer < IHelloWorldApplicationCustomizerProperties > {  
        @override  
        public onInit(): Promise < void > {  
            Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);  
            let message: string = this.properties.testMessage;  
            if (!message) {  
                message = '(No properties were provided.)';  
            }  
            this.context.placeholderProvider.changedEvent.add(this, this.renderObserver);  
            return Promise.resolve();  
        }  
        private async renderObserver(): Promise < void > {  
            if (!_observer) {  
                // Register observable  
                let config = {  
                    childList: true,  
                    subtree: true  
                };  
                _observer = new MutationObserver(this.addMyCustomMenu);  
                _observer.observe(document, config);  
            }  
        }  
        private addMyCustomMenu(mutationsList) {  
            var o365Menus = document.querySelectorAll("*[class^=\"o365cs-mfp-linklist o365cs-segoeRegular o365cs-text-align-left\"]");  
            if (o365Menus.length > 0) {  
                for (var i in o365Menus) {  
                    try {  
                        var menuItem = o365Menus[i];  
                        var innerhtml = menuItem.innerHTML;  
                        var newhtml = '<div class="ms-fcl-tp o365cs-nfd-normal-lineheight"><a class="ms-fcl-tp o365button" role="link"';  
                        newhtml += 'href="javascript:alert(\"Hello\");" id="O365_SubLink_CustomMenu"';  
                        newhtml += 'aria-labelledby="_ariaId_9"><span class="_fc_3 owaimg" style="display: none;"></span>';  
                        newhtml += '<span class="_fc_4 o365buttonLabel" id="_ariaId_9">My Custom Menu</span></a></div>';  
                        menuItem.innerHTML = innerhtml.concat(newhtml);  
                    } catch (e) {}  
                }  
            }  
        }  
        private _onDispose(): void {  
            if (_observer) {  
                _observer.disconnect();  
            }  
            console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom.');  
        }  
    }

import { override } from '@microsoft/decorators';

import { Log } from '@microsoft/sp-core-library';

import {

BaseApplicationCustomizer

}

from '@microsoft/sp-application-base';

import {

Dialog

} from '@microsoft/sp-dialog';

require('mutationobserver-shim');

import * as strings from 'HelloWorldApplicationCustomizerStrings';

const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';

/**

* If your command set uses the ClientSideComponentProperties JSON input,

* it will be deserialized into the BaseExtension.properties object.

* You can define an interface to describe it.

export interface IHelloWorldApplicationCustomizerProperties {

// This is an example; replace with your own property

testMessage: string;

}

let _observer: MutationObserver;

/** A Custom Action which can be run during execution of a Client Side Application */

export default class HelloWorldApplicationCustomizer

extends BaseApplicationCustomizer < IHelloWorldApplicationCustomizerProperties > {

@override

public onInit(): Promise < void > {

Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

let message: string = this.properties.testMessage;

if (!message) {

message = '(No properties were provided.)';

}

this.context.placeholderProvider.changedEvent.add(this, this.renderObserver);

return Promise.resolve();

}

private async renderObserver(): Promise < void > {

if (!_observer) {

// Register observable

let config = {

childList: true,

subtree: true

};

_observer = new MutationObserver(this.addMyCustomMenu);

_observer.observe(document, config);

}

private addMyCustomMenu(mutationsList) {

var o365Menus = document.querySelectorAll("*[class^=\"o365cs-mfp-linklist o365cs-segoeRegular o365cs-text-align-left\"]");

if (o365Menus.length > 0) {

for (var i in o365Menus) {

try {

var menuItem = o365Menus[i];

var innerhtml = menuItem.innerHTML;

var newhtml = '<div class="ms-fcl-tp o365cs-nfd-normal-lineheight"><a class="ms-fcl-tp o365button" role="link"';

newhtml += 'href="javascript:alert(\"Hello\");" id="O365_SubLink_CustomMenu"';

newhtml += 'aria-labelledby="_ariaId_9"><span class="_fc_3 owaimg" style="display: none;"></span>';

newhtml += '<span class="_fc_4 o365buttonLabel" id="_ariaId_9">My Custom Menu</span></a></div>';

menuItem.innerHTML = innerhtml.concat(newhtml);

} catch (e) {}

}

private _onDispose(): void {

if (_observer) {

_observer.disconnect();

}

console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom.');

}

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options

Sharepoint 2013 Hosting – HostForLIFE.eu :: Sharepoint 2013 Hosting – HostForLIFE.eu ::

Jan 10th

Posted by Peter in Other Related Post

No comments

In this blog, I am going to perform two actions –

Identify if a page is a modern page or not.
Migrate or copy that modern page (including its content) to another site collection or site (destination location)

I am going to accomplish these tasks by using CSOM (Client Object Model). After identifying the modern page, I will copy the modern page into another site collection (destination location) and then, will migrate all the page contents of this modern page (including web parts and other properties of source modern page) to a destination web using CSOM.

We are using a console application to achieve the above functionality using CSOM. In the below-mentioned code logic, we will get all pages from ‘Site Pages’ page library which is present in the source web and looping each page to check if that is a modern page or not.

If the page is found to be a modern page, then we are migrating that page to the destination web ‘Site Pages’ library.

Please have a look at the below code. The code is self-explanatory because of the comments.

    using System;  
    using System.Net;  
    using System.Security;  
    using System.Text.RegularExpressions;  
    using Microsoft.SharePoint.Client;  
    namespace ConsoleApp1 {  
        class Program {  
            static void Main(string[] args) {  
                ClientContext sourceContext = null;  
                List sourceList = null;  
                ListItemCollection srcItemCollection = null;  
                ListItem sourceItem = null;  
                string userName = string.Empty;  
                string password = string.Empty;  
                SecureString srcSiteSecurePassword = new SecureString();  
                SharePointOnlineCredentials sourceOnlineCredentials = null;  
                try {  
                    using(sourceContext = new ClientContext("http://sourcesiteurl")) {  
                        userName = "TestUser";  
                        password = "Password";  
                        if (!string.IsNullOrEmpty(password)) {  
                            foreach(char c in password.ToCharArray())  
                            srcSiteSecurePassword.AppendChar(c);  
                        }  
                        // Setting credential for the above site  
                        sourceOnlineCredentials = new SharePointOnlineCredentials(userName, srcSiteSecurePassword);  
                        sourceContext.Credentials = sourceOnlineCredentials;  
                        sourceContext.Load(sourceContext.Web);  
                        sourceContext.ExecuteQuery();  
                        // Getting source list by Title  
                        sourceList = sourceContext.Web.Lists.GetByTitle("Site Pages");  
                        // Getting all items from source list using caml query  
                        srcItemCollection = sourceList.GetItems(CamlQuery.CreateAllItemsQuery());  
                        //Loading source items  
                        sourceContext.Load(srcItemCollection, IC => IC.Include(I => I.Id, I => I.DisplayName));  
                        sourceContext.ExecuteQuery();  
                        if (srcItemCollection != null && srcItemCollection.Count > 0) {  
                            for (int iCount = 0; iCount < srcItemCollection.Count; iCount++) {  
                                try {  
                                    sourceItem = srcItemCollection[iCount];  
                                    //Checking if current page is modern page or not  
                                    if (IsModernPage(sourceContext, sourceItem)) {  
                                        // Migrate modern page to anothen site  
                                        MigrateModernPageToAnotherWeb(sourceContext, sourceItem);  
                                    }  
                                } catch (Exception ex) {}  
                            }  
                        }  
                    }  
                } catch (Exception ex) {}  
            }  
            // Checking if the selected page is a modern page or not  
            private static bool IsModernPage(ClientContext sourceContext, ListItem sourceItem) {  
                bool isModernPage = false;  
                try {  
                    sourceContext.Load(sourceItem, srcItm => srcItm["CanvasContent1"], srcItm => srcItm["LayoutWebpartsContent"]);  
                    sourceContext.ExecuteQuery();  
                    // Check if modern page  
                    if (!string.IsNullOrEmpty(sourceItem["CanvasContent1"].ToString()) || !string.IsNullOrEmpty(sourceItem["LayoutWebpartsContent"].ToString())) isModernPage = true;  
                } catch {  
                    isModernPage = false;  
                }  
                return isModernPage;  
            }  
            // Migrating the modern page from source site to destination site  
            private static void MigrateModernPageToAnotherWeb(ClientContext sourceContext, ListItem sourceItem) {  
                ClientContext destSiteContext = null;  
                List destList = null;  
                ListItem destItem = null;  
                string userName = string.Empty;  
                string password = string.Empty;  
                SecureString destSiteSecurePassword = new SecureString();  
                SharePointOnlineCredentials destOnlineCredentials = null;  
                string canvasContent = string.Empty;  
                string metaInfo = string.Empty;  
                string layoutWebpartsContent = string.Empty;  
                try {  
                    using(destSiteContext = new ClientContext("http://destinationsiteurl")) {  
                        userName = "TestUser";  
                        password = "Password";  
                        if (!string.IsNullOrEmpty(password)) {  
                            foreach(char c in password.ToCharArray())  
                            destSiteSecurePassword.AppendChar(c);  
                        }  
                        // Setting credential for the above site  
                        destOnlineCredentials = new SharePointOnlineCredentials(userName, destSiteSecurePassword);  
                        destSiteContext.Credentials = destOnlineCredentials;  
                        destSiteContext.Load(destSiteContext.Web);  
                        destSiteContext.ExecuteQuery();  
                        // Getting destination list by Title  
                        destList = destSiteContext.Web.Lists.GetByTitle("Site Pages");  
                        // Loading destination list  
                        destSiteContext.Load(destList, L => L.RootFolder.ServerRelativeUrl);  
                        destSiteContext.ExecuteQuery();  
                        // Creating modern page in destination site  
                        destItem = destList.RootFolder.Files.AddTemplateFile(destList.RootFolder.ServerRelativeUrl.TrimEnd('/') + "/" + sourceItem.DisplayName + ".aspx", TemplateFileType.ClientSidePage).ListItemAllFields;  
                        destSiteContext.Load(destItem);  
                        destSiteContext.ExecuteQuery();  
                        // Loading source item properties  
                        sourceContext.Load(sourceItem, i => i.ContentType.Id, i => i["CanvasContent1"], i => i["MetaInfo"], i => i["LayoutWebpartsContent"]);  
                        sourceContext.ExecuteQuery();  
                        try {  
                            destItem["ContentTypeId"] = sourceItem.ContentType.Id.ToString();  
                            canvasContent = sourceItem["CanvasContent1"].ToString();  
                            // Replacing source Web ID with destination Web ID  
                            if (!string.IsNullOrEmpty(canvasContent) && canvasContent.Length > 0 && canvasContent.ToLower().Contains(sourceContext.Web.Id.ToString().ToLower())) canvasContent = Regex.Replace(canvasContent, sourceContext.Web.Id.ToString(), destSiteContext.Web.Id.ToString(), RegexOptions.IgnoreCase);  
                        } catch (Exception ex) {}  
                        try {  
                            metaInfo = sourceItem["MetaInfo"].ToString();  
                            // Replacing source Web ID with destination Web ID  
                            if (!string.IsNullOrEmpty(metaInfo) && metaInfo.Length > 0 && metaInfo.ToLower().Contains(sourceContext.Web.Id.ToString().ToLower())) metaInfo = Regex.Replace(metaInfo, sourceContext.Web.Id.ToString(), destSiteContext.Web.Id.ToString(), RegexOptions.IgnoreCase);  
                        } catch (Exception ex) {}  
                        try {  
                            layoutWebpartsContent = sourceItem["LayoutWebpartsContent"].ToString();  
                            // Replacing source Web ID with destination Web ID  
                            if (!string.IsNullOrEmpty(layoutWebpartsContent) && layoutWebpartsContent.Length > 0 && layoutWebpartsContent.ToLower().Contains(sourceContext.Web.Id.ToString().ToLower())) layoutWebpartsContent = Regex.Replace(layoutWebpartsContent, sourceContext.Web.Id.ToString(), destSiteContext.Web.Id.ToString(), RegexOptions.IgnoreCase);  
                        } catch (Exception ex) {}  
                        // Setting source page canvas content to destination page  
                        if (!string.IsNullOrEmpty(canvasContent) && canvasContent.Length > 0) destItem["CanvasContent1"] = canvasContent;  
                        // Setting source page metaInfo content to destination page  
                        if (!string.IsNullOrEmpty(metaInfo) && metaInfo.Length > 0) destItem["MetaInfo"] = metaInfo;  
                        // Setting source page layout webparts content to destination page  
                        if (!string.IsNullOrEmpty(layoutWebpartsContent) && layoutWebpartsContent.Length > 0) destItem["LayoutWebpartsContent"] = layoutWebpartsContent;  
                        // Updating the destination page  
                        destItem.Update();  
                        destSiteContext.ExecuteQuery();  
                    }  
                } catch (Exception ex) {}  
            }  
        }  
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

using System;

using System.Net;

using System.Security;

using System.Text.RegularExpressions;

using Microsoft.SharePoint.Client;

namespace ConsoleApp1 {

class Program {

static void Main(string[] args) {

ClientContext sourceContext = null;

List sourceList = null;

ListItemCollection srcItemCollection = null;

ListItem sourceItem = null;

string userName = string.Empty;

string password = string.Empty;

SecureString srcSiteSecurePassword = new SecureString();

SharePointOnlineCredentials sourceOnlineCredentials = null;

try {

using(sourceContext = new ClientContext("http://sourcesiteurl")) {

userName = "TestUser";

password = "Password";

if (!string.IsNullOrEmpty(password)) {

foreach(char c in password.ToCharArray())

srcSiteSecurePassword.AppendChar(c);

}

// Setting credential for the above site

sourceOnlineCredentials = new SharePointOnlineCredentials(userName, srcSiteSecurePassword);

sourceContext.Credentials = sourceOnlineCredentials;

sourceContext.Load(sourceContext.Web);

sourceContext.ExecuteQuery();

// Getting source list by Title

sourceList = sourceContext.Web.Lists.GetByTitle("Site Pages");

// Getting all items from source list using caml query

srcItemCollection = sourceList.GetItems(CamlQuery.CreateAllItemsQuery());

//Loading source items

sourceContext.Load(srcItemCollection, IC => IC.Include(I => I.Id, I => I.DisplayName));

sourceContext.ExecuteQuery();

if (srcItemCollection != null && srcItemCollection.Count > 0) {

for (int iCount = 0; iCount < srcItemCollection.Count; iCount++) {

try {

sourceItem = srcItemCollection[iCount];

//Checking if current page is modern page or not

if (IsModernPage(sourceContext, sourceItem)) {

// Migrate modern page to anothen site

MigrateModernPageToAnotherWeb(sourceContext, sourceItem);

}

} catch (Exception ex) {}

}

} catch (Exception ex) {}

}

// Checking if the selected page is a modern page or not

private static bool IsModernPage(ClientContext sourceContext, ListItem sourceItem) {

bool isModernPage = false;

try {

sourceContext.Load(sourceItem, srcItm => srcItm["CanvasContent1"], srcItm => srcItm["LayoutWebpartsContent"]);

sourceContext.ExecuteQuery();

// Check if modern page

if (!string.IsNullOrEmpty(sourceItem["CanvasContent1"].ToString()) || !string.IsNullOrEmpty(sourceItem["LayoutWebpartsContent"].ToString())) isModernPage = true;

} catch {

isModernPage = false;

}

return isModernPage;

}

// Migrating the modern page from source site to destination site

private static void MigrateModernPageToAnotherWeb(ClientContext sourceContext, ListItem sourceItem) {

ClientContext destSiteContext = null;

List destList = null;

ListItem destItem = null;

string userName = string.Empty;

string password = string.Empty;

SecureString destSiteSecurePassword = new SecureString();

SharePointOnlineCredentials destOnlineCredentials = null;

string canvasContent = string.Empty;

string metaInfo = string.Empty;

string layoutWebpartsContent = string.Empty;

try {

using(destSiteContext = new ClientContext("http://destinationsiteurl")) {

userName = "TestUser";

password = "Password";

if (!string.IsNullOrEmpty(password)) {

foreach(char c in password.ToCharArray())

destSiteSecurePassword.AppendChar(c);

}

// Setting credential for the above site

destOnlineCredentials = new SharePointOnlineCredentials(userName, destSiteSecurePassword);

destSiteContext.Credentials = destOnlineCredentials;

destSiteContext.Load(destSiteContext.Web);

destSiteContext.ExecuteQuery();

// Getting destination list by Title

destList = destSiteContext.Web.Lists.GetByTitle("Site Pages");

// Loading destination list

destSiteContext.Load(destList, L => L.RootFolder.ServerRelativeUrl);

destSiteContext.ExecuteQuery();

// Creating modern page in destination site

destItem = destList.RootFolder.Files.AddTemplateFile(destList.RootFolder.ServerRelativeUrl.TrimEnd('/') + "/" + sourceItem.DisplayName + ".aspx", TemplateFileType.ClientSidePage).ListItemAllFields;

destSiteContext.Load(destItem);

destSiteContext.ExecuteQuery();

// Loading source item properties

sourceContext.Load(sourceItem, i => i.ContentType.Id, i => i["CanvasContent1"], i => i["MetaInfo"], i => i["LayoutWebpartsContent"]);

sourceContext.ExecuteQuery();

try {

destItem["ContentTypeId"] = sourceItem.ContentType.Id.ToString();

canvasContent = sourceItem["CanvasContent1"].ToString();

// Replacing source Web ID with destination Web ID

if (!string.IsNullOrEmpty(canvasContent) && canvasContent.Length > 0 && canvasContent.ToLower().Contains(sourceContext.Web.Id.ToString().ToLower())) canvasContent = Regex.Replace(canvasContent, sourceContext.Web.Id.ToString(), destSiteContext.Web.Id.ToString(), RegexOptions.IgnoreCase);

} catch (Exception ex) {}

try {

metaInfo = sourceItem["MetaInfo"].ToString();

// Replacing source Web ID with destination Web ID

if (!string.IsNullOrEmpty(metaInfo) && metaInfo.Length > 0 && metaInfo.ToLower().Contains(sourceContext.Web.Id.ToString().ToLower())) metaInfo = Regex.Replace(metaInfo, sourceContext.Web.Id.ToString(), destSiteContext.Web.Id.ToString(), RegexOptions.IgnoreCase);

} catch (Exception ex) {}

try {

layoutWebpartsContent = sourceItem["LayoutWebpartsContent"].ToString();

// Replacing source Web ID with destination Web ID

if (!string.IsNullOrEmpty(layoutWebpartsContent) && layoutWebpartsContent.Length > 0 && layoutWebpartsContent.ToLower().Contains(sourceContext.Web.Id.ToString().ToLower())) layoutWebpartsContent = Regex.Replace(layoutWebpartsContent, sourceContext.Web.Id.ToString(), destSiteContext.Web.Id.ToString(), RegexOptions.IgnoreCase);

} catch (Exception ex) {}

// Setting source page canvas content to destination page

if (!string.IsNullOrEmpty(canvasContent) && canvasContent.Length > 0) destItem["CanvasContent1"] = canvasContent;

// Setting source page metaInfo content to destination page

if (!string.IsNullOrEmpty(metaInfo) && metaInfo.Length > 0) destItem["MetaInfo"] = metaInfo;

// Setting source page layout webparts content to destination page

if (!string.IsNullOrEmpty(layoutWebpartsContent) && layoutWebpartsContent.Length > 0) destItem["LayoutWebpartsContent"] = layoutWebpartsContent;

// Updating the destination page

destItem.Update();

destSiteContext.ExecuteQuery();

}

} catch (Exception ex) {}

}

Destination Page Library Before Migration,

Destination Page Library after Migration

After executing the above code behind, you can find the newly created modern page in the destination web ‘Site Pages’ library with the same page contents and “web parts” as they were in the source page.

SharePoint 2013 Hosting Recommendation

Sharepoint 2013 Hosting – HostForLIFE.eu :: Custom Search, Sorting And Paging Using CSOM

Dec 20th

Posted by Peter in European SharePoint 2013 Hosting

No comments

In this particular article I am showing data in tiles format. So now we can display data in any format and have custom paging, sorting, and search. For this you require a SharePoint site with Events List. The Events list needs to have the following columns. Also you need a Location List.This Location List has a Title column which we need to refer to in Events List. I am attaching both the list templates.

Owner is Title Column.

The Project basically contains a search box and a button and below the data is displayed in horizontal format. At the end you can see custom pager.

The Data is sorted on the basis of Title Column; i.e, Owner.

When you enter a key word in a search box and click on “Search Events”, it searches based on Title (Owner) column.
The code has page size 4 which can be changed.

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <title>Events</title>  
        <linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
        <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">  
        </script>  
        <scriptsrc="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"type="text/javascript">  
        </script>  
        <scripttype="text/javascript"src="/_layouts/15/sp.runtime.js">  
        </script>  
        <scripttype="text/javascript"src="/_layouts/15/sp.js">  
        </script>  
        <styletype="text/css">  
            .pager {  
                padding-left: 9px;  
                /*margin: 20px 0;*/  
                text-align: center;  
                list-style: none;  
                float: left;  
            }  
            .boxspace  
            {  
                padding:9px;  
            }  
  
  
        </style>  
        <scripttype="text/javascript">  
            var pageIndex = 1; // default page index value   
            var pageSize = 4;//defualt page size  
            var nextPagingInfo;  
            var previousPagingInfo;  
            var position;  
            var splistitems;  
            var searchvalue;  
            var sflag;  
            var sortColumn = 'Title';//name if sort column  
            var listname = 'Events';//name if list  
  
            //next click code  
            function btnnextclick() {  
                pageIndex = pageIndex + 1;  
                if (nextPagingInfo) {  
                    position = new SP.ListItemCollectionPosition();  
                    position.set_pagingInfo(nextPagingInfo);  
                }  
                else {  
                    position = null;  
                }  
  
                getListItems();  
            }  
            //prev click code  
            function btnprevclick() {  
                pageIndex = pageIndex - 1;  
                position = new SP.ListItemCollectionPosition();  
                position.set_pagingInfo(previousPagingInfo);  
                getListItems();  
            }  
            $(document).ready(function () {  
  
                //fetch items from list on page load  
                getListItems();  
  
            });  
            function getListItems(searchbtnclickflag) {  
  
                try {  
  
                    sflag = searchbtnclickflag;//value will be undefined as search button is not clicked  
                    var context = new SP.ClientContext.get_current();  
                    // Load the web object  
                    this.web = context.get_web();  
                    //Get the list  
                    var list = this.web.get_lists().getByTitle(listname);  
                    var spQuery = new SP.CamlQuery();  
                    //if search button is click then if condition will execute to set the default position of pager  
                    if (sflag == "1") {  
                        spQuery.set_listItemCollectionPosition(undefined);  
                    }  
                    else {  
                        spQuery.set_listItemCollectionPosition(position);  
                    }  
                    //on page load search input box is not created,hence this condition will execute.  
                    if (document.getElementById('search') == null) {  
                        spQuery.set_viewXml("  
            <View>  
                <Query>  
                    <OrderBy>  
                        <FieldRef Name='" + sortColumn + "' Ascending='True'/>  
                    </OrderBy>  
                </Query>" + "  
                <RowLimit>" + pageSize + "</RowLimit>  
            </View>");  
  
                    }  
            //when search box does not contain any text  
            elseif (document.getElementById('search').value == "") {  
                        spQuery.set_viewXml("  
                <View>  
                    <Query>  
                        <OrderBy>  
                            <FieldRef Name='" + sortColumn + "' Ascending='True'/>  
                        </OrderBy>  
                    </Query>" + "  
                    <RowLimit>" + pageSize + "</RowLimit>  
                </View>");  
                    }  
                    //when search value contains text  
                    else {  
                        searchvalue = document.getElementById('search').value;  
  
                        spQuery.set_viewXml("  
                <View>  
                    <Query>  
                        <Where>  
                            <Contains>  
                                <FieldRef Name='Title' />  
                                <Value Type='Text'>" + document.getElementById('search').value + "</Value>  
                            </Contains>  
                        </Where>  
                        <OrderBy>  
                            <FieldRef Name='" + sortColumn +  
                            "' Ascending='True'/>  
                        </OrderBy>  
                    </Query>" + "  
                    <RowLimit>" + pageSize + "</RowLimit>  
                </View>");  
                    }                   
                    splistitems = list.getItems(spQuery);  
                    context.load(splistitems);  
                    context.executeQueryAsync(Function.createDelegate(this,  
                    get_splistitems_onSuccess), Function.createDelegate(this,  
                    get_splistitems_onFailure));  
  
                }  
                catch (e) {  
                    alert("An error occurred while fetching data. Please contact your system administrator.");  
                }  
            }  
            function get_splistitems_onSuccess() {  
                if (splistitems.get_count() > 0) {  
  
                    var splistitemCollection = splistitems.getEnumerator();  
  
  
  
  
                    var table = "  
                        <input type='text'class='form-control' id='search' value='" + searchvalue + "'/>  
                        <br/>  
                        <button id='btnsearch' class='btn btn-default' type='button' onclick='getListItems(1)' value='Search Events'>Search Events</button>  
                        <br/>  
                        <table class='status'>  
                        <tr>";  
  
                    while (splistitemCollection.moveNext()) {  
                        var listItem = splistitemCollection.get_current();  
                        table += "  
                    <td class='boxspace'>  
                        <div class='well'>  
                            <span class='span2 title boldName id='" + listItem.get_item('ID') + "span1" + "'>" + listItem.get_item('Title') + "</span>  
                            <br/>  
                            <span class='span2 title boldCategory' id='" + listItem.get_item('ID') + "span2" + "'>" + listItem.get_item('StartDate') + "</span>  
                            <br/>  
                            <br/>  
                            <span class='span2 title boldCode' id='" + listItem.get_item('ID') + "span3" + "'>" + listItem.get_item('Location').get_lookupValue() + "</span>  
                        </div>  
                    </a>  
                </td>";  
                        }  
  
                    table += "  
            </tr>  
        </table>";  
                    tableview.innerHTML = table + "  
        <br/>  
        <div class='pager'>  
            <button id='btnBack' type='button' onclick='btnprevclick()'>"  
                    + "< Back" + "  
            </button>" +  
"  
            <span id='pageInfo'></span>" +  
"  
            <button id='btnNext' type='button' onclick='btnnextclick()'>Next></button>" +  
"  
        </div>";  
                    if (document.getElementById('search').value == "undefined") {  
                        document.getElementById('search').value = "";  
                    }  
                    managePagerControl();  
                }  
                else {  
                    alert("No Data found");  
                }  
            }  
            function managePagerControl() {  
  
                if (sflag == "1") {  
                    pageIndex = 1;  
                }  
                if (splistitems.get_listItemCollectionPosition()) {  
                    nextPagingInfo = splistitems.get_listItemCollectionPosition().get_pagingInfo();  
                } else {  
                    nextPagingInfo = null;  
                }  
  
                //The following code line shall add page information between the next and back buttons   
                $("#pageInfo").html((((pageIndex - 1) * pageSize) + 1) + " - " + ((pageIndex * pageSize) - (pageSize - splistitems.get_count())));  
                previousPagingInfo = "PagedPrev=TRUE&Paged=TRUE&p_ID=" + splistitems.itemAt(0).get_item('ID') + "&p_" + sortColumn + "=" + encodeURIComponent(splistitems.itemAt(0).get_item(sortColumn));  
  
  
  
                if (pageIndex <= 1) {  
                    $("#btnBack").attr('disabled', 'disabled');  
                }  
                else {  
                    $("#btnBack").removeAttr('disabled');  
                }  
  
                if (nextPagingInfo) {  
                    $("#btnNext").removeAttr('disabled');  
                }  
                else {  
                    $("#btnNext").attr('disabled', 'disabled');  
                }  
  
            }  
                function get_splistitems_onFailure() {  
                alert("An error occurred while fetching data. Please contact your system administrator."+e);  
            }  
  
    </script>  
</head>  
<body>  
    <!--HTML Content-->  
    <divclass="Status"id="tableview">  
    </div>  
</body>undefined</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Events</title>

<linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">

</script>

<scriptsrc="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"type="text/javascript">

</script>

<scripttype="text/javascript"src="/_layouts/15/sp.runtime.js">

</script>

<scripttype="text/javascript"src="/_layouts/15/sp.js">

</script>

<styletype="text/css">

.pager {

padding-left: 9px;

/*margin: 20px 0;*/

text-align: center;

list-style: none;

float: left;

}

.boxspace

{

padding:9px;

}

</style>

<scripttype="text/javascript">

var pageIndex = 1; // default page index value

var pageSize = 4;//defualt page size

var nextPagingInfo;

var previousPagingInfo;

var position;

var splistitems;

var searchvalue;

var sflag;

var sortColumn = 'Title';//name if sort column

var listname = 'Events';//name if list

//next click code

function btnnextclick() {

pageIndex = pageIndex + 1;

if (nextPagingInfo) {

position = new SP.ListItemCollectionPosition();

position.set_pagingInfo(nextPagingInfo);

}

else {

position = null;

}

getListItems();

}

//prev click code

function btnprevclick() {

pageIndex = pageIndex - 1;

position = new SP.ListItemCollectionPosition();

position.set_pagingInfo(previousPagingInfo);

getListItems();

}

$(document).ready(function () {

//fetch items from list on page load

getListItems();

});

function getListItems(searchbtnclickflag) {

try {

sflag = searchbtnclickflag;//value will be undefined as search button is not clicked

var context = new SP.ClientContext.get_current();

// Load the web object

this.web = context.get_web();

//Get the list

var list = this.web.get_lists().getByTitle(listname);

var spQuery = new SP.CamlQuery();

//if search button is click then if condition will execute to set the default position of pager

if (sflag == "1") {

spQuery.set_listItemCollectionPosition(undefined);

}

else {

spQuery.set_listItemCollectionPosition(position);

}

//on page load search input box is not created,hence this condition will execute.

if (document.getElementById('search') == null) {

spQuery.set_viewXml("

<View>

<Query>

</OrderBy>

</Query>" + "

<RowLimit>" + pageSize + "</RowLimit>

</View>");

}

//when search box does not contain any text

elseif (document.getElementById('search').value == "") {

spQuery.set_viewXml("

<View>

<Query>

</OrderBy>

</Query>" + "

<RowLimit>" + pageSize + "</RowLimit>

</View>");

}

//when search value contains text

else {

searchvalue = document.getElementById('search').value;

spQuery.set_viewXml("

<View>

<Query>

<Where>

<Value Type='Text'>" + document.getElementById('search').value + "</Value>

</Contains>

</Where>

<FieldRef Name='" + sortColumn +

"' Ascending='True'/>

</OrderBy>

</Query>" + "

<RowLimit>" + pageSize + "</RowLimit>

</View>");

}

splistitems = list.getItems(spQuery);

context.load(splistitems);

context.executeQueryAsync(Function.createDelegate(this,

get_splistitems_onSuccess), Function.createDelegate(this,

get_splistitems_onFailure));

}

catch (e) {

alert("An error occurred while fetching data. Please contact your system administrator.");

}

function get_splistitems_onSuccess() {

if (splistitems.get_count() > 0) {

var splistitemCollection = splistitems.getEnumerator();

var table = "

<br/>

<button id='btnsearch' class='btn btn-default' type='button' onclick='getListItems(1)' value='Search Events'>Search Events</button>

<br/>

<tr>";

while (splistitemCollection.moveNext()) {

var listItem = splistitemCollection.get_current();

table += "

<span class='span2 title boldName id='" + listItem.get_item('ID') + "span1" + "'>" + listItem.get_item('Title') + "</span>

<br/>

<span class='span2 title boldCategory' id='" + listItem.get_item('ID') + "span2" + "'>" + listItem.get_item('StartDate') + "</span>

<br/>

<span class='span2 title boldCode' id='" + listItem.get_item('ID') + "span3" + "'>" + listItem.get_item('Location').get_lookupValue() + "</span>

</div>

</a>

</td>";

}

table += "

</tr>

</table>";

tableview.innerHTML = table + "

<br/>

<button id='btnBack' type='button' onclick='btnprevclick()'>"

+ "< Back" + "

</button>" +

<span id='pageInfo'></span>" +

<button id='btnNext' type='button' onclick='btnnextclick()'>Next></button>" +

</div>";

if (document.getElementById('search').value == "undefined") {

document.getElementById('search').value = "";

}

managePagerControl();

}

else {

alert("No Data found");

}

function managePagerControl() {

if (sflag == "1") {

pageIndex = 1;

}

if (splistitems.get_listItemCollectionPosition()) {

nextPagingInfo = splistitems.get_listItemCollectionPosition().get_pagingInfo();

} else {

nextPagingInfo = null;

}

//The following code line shall add page information between the next and back buttons

$("#pageInfo").html((((pageIndex - 1) * pageSize) + 1) + " - " + ((pageIndex * pageSize) - (pageSize - splistitems.get_count())));

previousPagingInfo = "PagedPrev=TRUE&Paged=TRUE&p_ID=" + splistitems.itemAt(0).get_item('ID') + "&p_" + sortColumn + "=" + encodeURIComponent(splistitems.itemAt(0).get_item(sortColumn));

if (pageIndex <= 1) {

$("#btnBack").attr('disabled', 'disabled');

}

else {

$("#btnBack").removeAttr('disabled');

}

if (nextPagingInfo) {

$("#btnNext").removeAttr('disabled');

}

else {

$("#btnNext").attr('disabled', 'disabled');

}

function get_splistitems_onFailure() {

alert("An error occurred while fetching data. Please contact your system administrator."+e);

}

</script>

</head>

<body>

<divclass="Status"id="tableview">

</div>

</body>undefined</html>

SharePoint 2013 Hosting Recommendation

SharePoint 2013 Hosting – HostForLIFE.eu :: Wildcard Search Of Users Using CSOM In SharePoint

Dec 13th

Posted by Peter in European SharePoint Server 2013 Hosting

No comments

In this blog, I will explain how to find users using ClientPeoplePickerSearchUser class. There are many ways in CSOM to get the users from SharePoint site or the web but I could not find any proper way to perform a wildcard search of users from SharePoint site using CSOM. For example, let’s say I want to find all the users present in the site collection where the first name starts with “John” or the last name starts with “Patt”.

This below-mentioned code sample will help us to perform both wildcard and explicit search. The output will be matching the result whether it is a collection of users or a single user.

The script for this is given below.

using Microsoft.SharePoint.Client;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Security;  
using System.Text;  
using System.Threading.Tasks;  
namespace FindUserDetailsByPeoplepickerQuery {  
    class Program {  
        static void Main(string[] args) {  
            string userToFind = "userToFind"; //it may be full or partial name of the user  
            string webUrl = "<site url>";  
            string userName = "<user name>";  
            string password = "<password>";  
            SecureString passWord = new SecureString();  
            try {  
                //creating the context of the SharePoint site  
                using(ClientContext clientCtx = new ClientContext(webUrl)) {  
                    foreach(char c in password.ToCharArray())  
                    passWord.AppendChar(c);  
                    clientCtx.Credentials = new SharePointOnlineCredentials(userName, passWord);  
                    clientCtx.ExecuteQuery();  
                    //preparing the search query options  
                    Microsoft.SharePoint.ApplicationPages.ClientPickerQuery.ClientPeoplePickerQueryParameters peoplePickerQuery = new Microsoft.SharePoint.ApplicationPages.ClientPickerQuery.ClientPeoplePickerQueryParameters();  
                    peoplePickerQuery.AllowEmailAddresses = true;  
                    peoplePickerQuery.AllowMultipleEntities = false;  
                    peoplePickerQuery.ForceClaims = false;  
                    peoplePickerQuery.MaximumEntitySuggestions = 60;  
                    peoplePickerQuery.PrincipalType = Microsoft.SharePoint.Client.Utilities.PrincipalType.All;  
                    peoplePickerQuery.PrincipalSource = Microsoft.SharePoint.Client.Utilities.PrincipalSource.All;  
                    peoplePickerQuery.QueryString = userToFind;  
                    peoplePickerQuery.AllUrlZones = true;  
                    peoplePickerQuery.SharePointGroupID = 0;  
                    peoplePickerQuery.WebApplicationID = new Guid("00000000-0000-0000-0000-000000000000");  
                    //Using peoplepicker webservice and searchquery getting the matched userInformations from SharePoint  
                    ClientResult < String > resultData = Microsoft.SharePoint.ApplicationPages.ClientPickerQuery.ClientPeoplePickerWebServiceInterface.ClientPeoplePickerSearchUser(clientCtx, peoplePickerQuery);  
                    clientCtx.ExecuteQuery();  
                    if (resultData != null) {  
                        Object[] queryMatchesFound = (Object[]) clientCtx.ParseObjectFromJsonString(resultData.Value);  
                        for (var i = 0; i < queryMatchesFound.Length; i++) {  
                            try {  
                                Dictionary < string, object > obj = (Dictionary < string, object > ) queryMatchesFound[i];  
                                try {  
                                    string loginName = obj["Key"].ToString();  
                                } catch {} //this will give the loginName of the user  
                                try {  
                                    string email = obj["Description"].ToString();  
                                } catch {} //this will give the email of the user  
                                try {  
                                    string Title = obj["DisplayText"].ToString();  
                                } catch {} //this will give the title/DisplayName of the user  
                                try {  
                                    string entityType = obj["EntityType"].ToString();  
                                } catch {} //this will give the type of the object whether it is a group or user  
                            } catch {}  
                        }  
                    }  
                }  
            } catch {}  
        }  
    }  
}

using Microsoft.SharePoint.Client;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Security;

using System.Text;

using System.Threading.Tasks;

namespace FindUserDetailsByPeoplepickerQuery {

class Program {

static void Main(string[] args) {

string userToFind = "userToFind"; //it may be full or partial name of the user

string webUrl = "<site url>";

string userName = "<user name>";

string password = "<password>";

SecureString passWord = new SecureString();

try {

//creating the context of the SharePoint site

using(ClientContext clientCtx = new ClientContext(webUrl)) {

foreach(char c in password.ToCharArray())

passWord.AppendChar(c);

clientCtx.Credentials = new SharePointOnlineCredentials(userName, passWord);

clientCtx.ExecuteQuery();

//preparing the search query options

Microsoft.SharePoint.ApplicationPages.ClientPickerQuery.ClientPeoplePickerQueryParameters peoplePickerQuery = new Microsoft.SharePoint.ApplicationPages.ClientPickerQuery.ClientPeoplePickerQueryParameters();

peoplePickerQuery.AllowEmailAddresses = true;

peoplePickerQuery.AllowMultipleEntities = false;

peoplePickerQuery.ForceClaims = false;

peoplePickerQuery.MaximumEntitySuggestions = 60;

peoplePickerQuery.PrincipalType = Microsoft.SharePoint.Client.Utilities.PrincipalType.All;

peoplePickerQuery.PrincipalSource = Microsoft.SharePoint.Client.Utilities.PrincipalSource.All;

peoplePickerQuery.QueryString = userToFind;

peoplePickerQuery.AllUrlZones = true;

peoplePickerQuery.SharePointGroupID = 0;

peoplePickerQuery.WebApplicationID = new Guid("00000000-0000-0000-0000-000000000000");

//Using peoplepicker webservice and searchquery getting the matched userInformations from SharePoint

ClientResult < String > resultData = Microsoft.SharePoint.ApplicationPages.ClientPickerQuery.ClientPeoplePickerWebServiceInterface.ClientPeoplePickerSearchUser(clientCtx, peoplePickerQuery);

clientCtx.ExecuteQuery();

if (resultData != null) {

Object[] queryMatchesFound = (Object[]) clientCtx.ParseObjectFromJsonString(resultData.Value);

for (var i = 0; i < queryMatchesFound.Length; i++) {

try {

Dictionary < string, object > obj = (Dictionary < string, object > ) queryMatchesFound[i];

try {

string loginName = obj["Key"].ToString();

} catch {} //this will give the loginName of the user

try {

string email = obj["Description"].ToString();

} catch {} //this will give the email of the user

try {

string Title = obj["DisplayText"].ToString();

} catch {} //this will give the title/DisplayName of the user

try {

string entityType = obj["EntityType"].ToString();

} catch {} //this will give the type of the object whether it is a group or user

} catch {}

}

} catch {}

}

In this example, I am getting the values in a JSON String format. Then, I am converting it into an object and by looping the collection, we can get the required information of the users like loginname, displayname, email etc.

Conclusion

In this blog, I have explained how you can get multiple users based on wildcard search. I hope this information will help you out in a few scenarios.

SharePoint 2013 Hosting Recommendation

Sharegate Tips And Tricks For Migration To SharePoint

Dec 7th

Posted by Peter in European SharePoint 2013 Hosting

No comments

There are numerous third party tools available in the market to migrate the content from SharePoint OnPremise to SharePoint Online. Sharegate is one of the most widely used migration tools. In this article, we will discuss the tips and tricks that can be useful to carry out smoother migration and avoid any common mistakes.

Sharegate Migration Overview

From a SharePoint perspective, Sharegate supports two types of migration.

Copy Structure
This option helps to copy the site collections, sites, lists, libraries, permission and more directly from SharePoint (any version) to SharePoint (any version).
This option is useful when we want to migrate the site from source to target environment as it is without any change in data or location.
Copy Content
Copy content is a more granular way of migrating the content to the target environment. It helps to copy documents, list items, folders, and document sets from SharePoint (any version) to SharePoint (any version).
This option is useful when we want to migrate individual content (like document, list item) selectively from source to target environment.

Copying Document Libraries

Tip# 1: Missing Documents

This point is not specific to Sharegate but as a general perspective of SharePoint users. Even though after successful migration of documents, the number of documents appears less in the target location.

The major reason for this is SharePoint users who do not check-in any version of their files. Follow the below steps to avoid these kinds of situations,

Open Document library in SharePoint source environment.
Click Library Settings.
Under “Permissions and Management”, click “Manage files which have no checked in version”.
Select the listed documents.
Click “Take ownership of selection”.
Switch back to Sharegate, refresh the view.
The missing documents should be now available to migrate.

Tip#2 – Insane mode for a document copy

It is always preferable to use the insane mode to copy documents faster to source SharePoint environment. Here, we can also specify the custom storage account to use. Also, the insane mode will help to maintain the IDs of items from the source environment.

Migration of Choice Fields

In SharePoint, we commonly use Choice fields as part of our information architecture. The major issue with using choice field is that it does not keep track of changed values.

As an example, if we create a choice field called Status with below values to start with,

Draft
Approved
Rejected

Over time, we realize that we need to drill down more into the business process and need more choices to support our business scenarios. We then change the choice values as below,

Draft
Approved by Manager
Approved by HR
Approved by all
Rejected

Notice how the Approved status is broken down to support the business process. In this scenario, the items in the list which were created before with Status as Approved remain as they were. SharePoint does not complain about it. But when it comes to migration as we are no longer supporting “Approved” status, the items tagged with the “Approved” status start to complain. At this point, it might not be feasible to go back and change all approval statuses.

A simple resolution to this is to set the problematic choice column to allow fill-in choices.

This will allow Sharegate to enter any value in the choice column and proceed with the migration.

Version Mismatch or missing versions of documents

When any document has huge versions, it might occur that a few versions go missing. Sharegate simply skips the versions. To resolve this kind of issue, simply re-migrate the document with any of the below options.

Copy and Replace
Copy if newer (incremental)

Lookup Lists

Lists which have lookup are always troublesome to migrate. Firstly identify and start from parent list to avoid any reworking of migration.

Another solution is to set the default value in Sharegate to use when the source item contains an invalid value for the destination lookup column.

Support from Sharegate

Sharegate provides the best support to resolve our migration issues. For any outstanding issues, we can email support@sharegate.com and their representative will help us further.

Summary

Sharegate is one of the best migration tools available in the market. We cannot consider the migration will be always as easy as lifting and shifting the content. We may face few challenges due to data inconsistency. The above tips and tricks will definitely help to tackle common behaviors.

SharePoint 2013 Hosting Recommendation

SharePoint 2013 Hosting – HostForLIFE.eu :: Fetching All Attachments From A List Using SharePoint Framework WebPart

Dec 6th

Posted by Peter in European SharePoint 2013 Hosting

No comments

Often, in forums and SharePoint events, I receive a query on how to get all the attachments from all items in a SharePoint List. We can achieve this in several different ways as mentioned below.

Accessing the attachments folder from the SharePoint List using SharePoint Designer
Mapping the attachments folder to File Share.
Accessing the attachment folder of the list based on the path using a program
Get the attachments of each list item in a list using a program

Here, we are going to follow the last method for accessing the attachments in a list using PnP JavaScript library and render that in SharePoint Framework webpart.

First of all, create a SharePoint Framework webpart project using the Yeoman generator with the following command.

PS> yo @microsoft/sharepoint

1	PS> yo @microsoft/sharepoint

Generate the project with No JavaScript option, because I am going to show the example without any JavaScript framework so that, you can use the snippet of any JavaScript framework on creating the webpart.

After the creation of the project, add the PnP JS library dependencies by running the following npm commmand.

PS> npm install –save @pnp/common @pnp/sp @pnp/logging @pnp/odata

1	PS> npm install –save @pnp/common @pnp/sp @pnp/logging @pnp/odata

To access the item and attachment objects using PnP library, add the following import statements to the webpart’s TypeScript file.

import { sp, Item } from "@pnp/sp";

1	import { sp, Item } from "@pnp/sp";

If we want to download or upload the attachment files from the webpart, we have to include the following import statement below the sp import statement.

import { AttachmentFile, AttachmentFiles, AttachmentFileInfo } from '@pnp/sp/src/attachmentfiles';

1	import { AttachmentFile, AttachmentFiles, AttachmentFileInfo } from '@pnp/sp/src/attachmentfiles';

To show the attachments from all list items in a webpart, add the below methods under the _WebPart class within the _webpart.ts file.

//Retrieve all the attachments from all items in a SharePoint List  
  private getSPData(): void {  
    let attachmentfiles: string = "";  
   
    sp.web.lists.getByTitle("My List").items  
    .select("Id,Title,Attachments,AttachmentFiles")  
    .expand("AttachmentFiles")  
    .filter('Attachments eq 1')  
    .get().then((response: Item[]) => {  
       
      response.forEach((listItem: any) => {  
        listItem.AttachmentFiles.forEach((afile: any) => {  
          attachmentfiles += `<li>(${listItem.Id}) ${listItem.Title} - ${afile.FileName}</li>`;  
        });  
   
      });      
      attachmentfiles = `<ul>${attachmentfiles}</ul>`;;  
      this.renderData(attachmentfiles);  
    });  
  }  
private renderData(strResponse: string): void {  
  const htmlElement = this.domElement.querySelector("#pnpinfo");  
  htmlElement.innerHTML = strResponse;  
}

//Retrieve all the attachments from all items in a SharePoint List

private getSPData(): void {

let attachmentfiles: string = "";

sp.web.lists.getByTitle("My List").items

.select("Id,Title,Attachments,AttachmentFiles")

.expand("AttachmentFiles")

.filter('Attachments eq 1')

.get().then((response: Item[]) => {

response.forEach((listItem: any) => {

listItem.AttachmentFiles.forEach((afile: any) => {

attachmentfiles += `<li>(${listItem.Id}) ${listItem.Title} - ${afile.FileName}</li>`;

});

attachmentfiles = `<ul>${attachmentfiles}</ul>`;;

this.renderData(attachmentfiles);

});

}

private renderData(strResponse: string): void {

const htmlElement = this.domElement.querySelector("#pnpinfo");

htmlElement.innerHTML = strResponse;

}

The getSPData() method gets the attachment files from all items from the list “My List“. Add the “Attachments eq 1” to the filter to retrieve the items which contain attachments. Use the expand method to get the attachment files of the list items in a single request.
In response, we are generating the HTML as a list of attachment files with the associated Item Id and Title. The renderData() method adds the generated HTML to the webpart.Replace the render() method with the below code snippet. This is used to call the getSPData() and update the retrieved values within the element pnpinfo.

public render(): void {  
  this.domElement.innerHTML = `  
    <div class="${ styles.pnPDemos}">  
      <div class="${ styles.container}">  
        <div class="${ styles.row}">  
          <div class="${ styles.column}">  
            <div id="pnpinfo"></div>  
          </div>  
        </div>  
      </div>  
    </div>`;  
  this.getSPData();  
}

public render(): void {

this.domElement.innerHTML = `

</div>

</div>`;

this.getSPData();

}

After running the webpart in the SharePoint page, it will display the Item id, title, and attachments. It will be nice to have a download link in the attachment file.

attachmentfiles += `<li>(${listItem.Id}) ${listItem.Title} - ${afile.FileName}</li>`;

1	attachmentfiles += `<li>(${listItem.Id}) ${listItem.Title} - ${afile.FileName}</li>`;

Replace the above line with the following code snippet. Then, the webpart renders the download link of each attachment file.

let downloadUrl = this.context.pageContext.web.absoluteUrl + "/_layouts/download.aspx?sourceurl=" + afile.ServerRelativeUrl;  

attachmentfiles += `<li>(${listItem.Id}) ${listItem.Title} - <a href='${downloadUrl}'>${afile.FileName}</a></li>`;

let downloadUrl = this.context.pageContext.web.absoluteUrl + "/_layouts/download.aspx?sourceurl=" + afile.ServerRelativeUrl;

attachmentfiles += `<li>(${listItem.Id}) ${listItem.Title} - <a href='${downloadUrl}'>${afile.FileName}</a></li>`;

SharePoint 2013 Hosting Recommendation

European Sharepoint 2013 Hosting Blog

Sharepoint 2013 Hosting – HostForLIFE.eu :: Retrieve SP List Item’s Column Value In SPFx Application Customizer Using PNP

SharePoint 2013 Hosting Recommendation

Sharepoint 2013 Hosting – HostForLIFE.eu :: Sharepoint 2013 Hosting – HostForLIFE.eu ::

SharePoint 2013 Hosting Recommendation

Sharepoint 2013 Hosting – HostForLIFE.eu :: Custom Search, Sorting And Paging Using CSOM

SharePoint 2013 Hosting Recommendation

SharePoint 2013 Hosting – HostForLIFE.eu :: Wildcard Search Of Users Using CSOM In SharePoint

SharePoint 2013 Hosting Recommendation

Sharegate Tips And Tricks For Migration To SharePoint

Migration of Choice Fields

Summary

SharePoint 2013 Hosting Recommendation

SharePoint 2013 Hosting – HostForLIFE.eu :: Fetching All Attachments From A List Using SharePoint Framework WebPart

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

European Sharepoint 2013 Hosting Blog

Sharepoint 2013 Hosting – HostForLIFE.eu :: Retrieve SP List Item’s Column Value In SPFx Application Customizer Using PNP

SharePoint 2013 Hosting Recommendation

Sharepoint 2013 Hosting – HostForLIFE.eu :: Sharepoint 2013 Hosting – HostForLIFE.eu ::

SharePoint 2013 Hosting Recommendation

Sharepoint 2013 Hosting – HostForLIFE.eu :: Custom Search, Sorting And Paging Using CSOM

SharePoint 2013 Hosting Recommendation

SharePoint 2013 Hosting – HostForLIFE.eu :: Wildcard Search Of Users Using CSOM In SharePoint

SharePoint 2013 Hosting Recommendation

Sharegate Tips And Tricks For Migration To SharePoint

Migration of Choice Fields

Summary

SharePoint 2013 Hosting Recommendation

SharePoint 2013 Hosting – HostForLIFE.eu :: Fetching All Attachments From A List Using SharePoint Framework WebPart

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Tags