European Sharepoint 2013 Hosting Blog

SharePoint 2013 Hosting – HostForLIFE.eu : React Vertical Timeline In SPFX

Oct 2nd

Posted by Peter in European SharePoint 2013 Hosting

Vertical Timeline is a graphical representation of a period of time, on which important events are marked. In this article we will learn how to implement vertical timeline in our SPFX webpart component.

Steps

Open a command prompt and create a directory for the SPFx solution.

md spfx-ReactTimeline

Navigate to the above-created directory.

cd spfx-ReactTimeline

Run the Yeoman SharePoint Generator to create the solution.

yo @microsoft/sharepoint

Solution Name

Hit Enter for the default name (spfx-ReactTimeline in this case) or type in any other name for your solution.

Selected choice – Hit Enter

Target for the component

Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice – SharePoint Online only (latest).

Place of files

We may choose to use the same folder or create a subfolder for our solution.

Selected choice – same folder.

Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.

Selected choice – N (install on each site explicitly).

Permissions to access web APIs

Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.

Selected choice – N (solution contains unique permissions)

Type of client-side component to create

We can choose to create a client-side web part or an extension. Choose the web part option.

Selected choice – WebPart

Web part name

Hit Enter to select the default name or type in any other name.

Selected choice – ReactTimeline

Web part description

Hit Enter to select the default description or type in any other value.

Framework to use

Select any JavaScript framework to develop the component. Available choices are – No JavaScript Framework, React, and Knockout.

Selected choice – React

The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command:

npm shrinkwrap

In the command prompt, type the below command to open the solution in the code editor of your choice.

npm i react-vertical-timeline-component
npm i csstype
npm install @material-ui/icons

VerticalTimeline Props

animate={ Boolean }	Enable or disable animations on elements (default: true).
className={ String }	Add extra class name to root div element.
layout={ String }	Choose if you want ‘1-column’ or ‘2-columns’ (default: ‘2-columns’).

VerticalTimelineElement Props

className={ String }	Add extra class name to root div element.
contentArrowStyle={ Object }	Add extra style to content arrow div element.
contentStyle={ Object }	Add extra style to content div element.
date={ String }	Date of the element.
dateClassName={ String }	Add extra class name to the element’s date.
icon={ String }	Icon of the element.
iconClassName={ String }	Add extra class name to the element’s icon.
iconOnClick={ Function }	onClick handler of the element’s icon.
onTimelineElementClick={ Function }	onClick handler of the vertical timeline element’s div.
iconStyle={ Object }	Style of the element’s icon.
position={ String }	Position of the element (left or right).
style={ Object }	Add extra style to root div element.
textClassName={ String }	Add extra class name to the text container.

in ReactTimeline.tsx,

import * as React from 'react';  
import { IReactTimelineProps } from './IReactTimelineProps';  
import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';  
import 'react-vertical-timeline-component/style.min.css';  
import SchoolIcon from '@material-ui/icons/School';  
import WorkIcon from '@material-ui/icons/Work';  
import StarIcon from '@material-ui/icons/Star';  
import LoyaltyIcon from '@material-ui/icons/Loyalty';  
  
import './mystyle.css';  
import * as CSS from 'csstype';   
var divStyle: CSS.Properties<string | number> = {     
  background: 'rgb(227, 227, 227)'      
  };  
export default class ReactTimeline extends React.Component<IReactTimelineProps, {}> {  
  public render(): React.ReactElement<IReactTimelineProps> {  
    return (  
      <div style={divStyle}>  
       <VerticalTimeline>  
  <VerticalTimelineElement  
    className="vertical-timeline-element--work"  
    contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}  
    contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}  
    date="2019 - 2020"  
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}  
    icon={<LoyaltyIcon />}  
  >  
    <h3 className="vertical-timeline-element-title">Most Valuable Proffesional</h3>  
    <h4 className="vertical-timeline-element-subtitle">MVP</h4>  
    <p>  
  1St time awarded as a C#Corner MVP  
    </p>  
  </VerticalTimelineElement>  
   
  <VerticalTimelineElement  
    className="vertical-timeline-element--work"  
    date="2019 - Till Date"  
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}  
    icon={<WorkIcon />}  
  >  
    <h3 className="vertical-timeline-element-title">Software Engineer,Smartek21</h3>  
    <h4 className="vertical-timeline-element-subtitle">SharePoint Developer</h4>  
    <p>  
    SharePoint Online ,Onpremise,M365 Development  
    </p>  
  </VerticalTimelineElement>  
  <VerticalTimelineElement  
    className="vertical-timeline-element--work"  
    date="2016 - 2019"  
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}  
    icon={<WorkIcon />}  
  >  
    <h3 className="vertical-timeline-element-title">Junior Software Engineer,Zylog Systems</h3>  
    <h4 className="vertical-timeline-element-subtitle">SharePoint Developer</h4>  
    <p>  
      SharePoint Online ,Onpremise,M365 Development  
    </p>  
  </VerticalTimelineElement>  
  <VerticalTimelineElement  
    className="vertical-timeline-element--education"  
    date="2012 - 2014"  
    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}  
    icon={<SchoolIcon />}  
  >  
    <h3 className="vertical-timeline-element-title">Master of Engineering</h3>  
    <h4 className="vertical-timeline-element-subtitle">M.E.</h4>  
    <p>  
      Computer and Communication  
    </p>  
  </VerticalTimelineElement>  
  <VerticalTimelineElement  
    className="vertical-timeline-element--education"  
    date="2009 - 2012"  
    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}  
    icon={<SchoolIcon />}  
  >  
    <h3 className="vertical-timeline-element-title">Bachelor of Engineering</h3>  
    <h4 className="vertical-timeline-element-subtitle">B.E.</h4>  
    <p>  
      Computer Science and Engineering  
    </p>  
  </VerticalTimelineElement>  
  <VerticalTimelineElement  
    className="vertical-timeline-element--education"  
    date="2007 - 2009"  
    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}  
    icon={<SchoolIcon />}  
  >  
    <h3 className="vertical-timeline-element-title">Diploma in Computer Engineering</h3>  
    <h4 className="vertical-timeline-element-subtitle">Diploma Degree</h4>  
    <p>  
      Computer Technology  
    </p>  
  </VerticalTimelineElement>  
  <VerticalTimelineElement  
    iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}  
    icon={<StarIcon />}  
  />  
</VerticalTimeline>  
      </div>  
    );  
  }  
}

100

101

102

103

import * as React from 'react';

import { IReactTimelineProps } from './IReactTimelineProps';

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';

import 'react-vertical-timeline-component/style.min.css';

import SchoolIcon from '@material-ui/icons/School';

import WorkIcon from '@material-ui/icons/Work';

import StarIcon from '@material-ui/icons/Star';

import LoyaltyIcon from '@material-ui/icons/Loyalty';

import './mystyle.css';

import * as CSS from 'csstype';

var divStyle: CSS.Properties<string | number> = {

background: 'rgb(227, 227, 227)'

};

export default class ReactTimeline extends React.Component<IReactTimelineProps, {}> {

public render(): React.ReactElement<IReactTimelineProps> {

return (

<VerticalTimelineElement

className="vertical-timeline-element--work"

contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}

contentArrowStyle={{ borderRight: '7px solid rgb(33, 150, 243)' }}

date="2019 - 2020"

iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}

icon={<LoyaltyIcon />}

<h3 className="vertical-timeline-element-title">Most Valuable Proffesional</h3>

<p>

1St time awarded as a C#Corner MVP

</p>

</VerticalTimelineElement>

<VerticalTimelineElement

className="vertical-timeline-element--work"

date="2019 - Till Date"

iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}

icon={<WorkIcon />}

<h3 className="vertical-timeline-element-title">Software Engineer,Smartek21</h3>

<h4 className="vertical-timeline-element-subtitle">SharePoint Developer</h4>

<p>

SharePoint Online ,Onpremise,M365 Development

</p>

</VerticalTimelineElement>

<VerticalTimelineElement

className="vertical-timeline-element--work"

date="2016 - 2019"

iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}

icon={<WorkIcon />}

<h3 className="vertical-timeline-element-title">Junior Software Engineer,Zylog Systems</h3>

<h4 className="vertical-timeline-element-subtitle">SharePoint Developer</h4>

<p>

SharePoint Online ,Onpremise,M365 Development

</p>

</VerticalTimelineElement>

<VerticalTimelineElement

className="vertical-timeline-element--education"

date="2012 - 2014"

iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}

icon={<SchoolIcon />}

<h3 className="vertical-timeline-element-title">Master of Engineering</h3>

<p>

Computer and Communication

</p>

</VerticalTimelineElement>

<VerticalTimelineElement

className="vertical-timeline-element--education"

date="2009 - 2012"

iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}

icon={<SchoolIcon />}

<h3 className="vertical-timeline-element-title">Bachelor of Engineering</h3>

<p>

Computer Science and Engineering

</p>

</VerticalTimelineElement>

<VerticalTimelineElement

className="vertical-timeline-element--education"

date="2007 - 2009"

iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}

icon={<SchoolIcon />}

<h3 className="vertical-timeline-element-title">Diploma in Computer Engineering</h3>

<h4 className="vertical-timeline-element-subtitle">Diploma Degree</h4>

<p>

Computer Technology

</p>

</VerticalTimelineElement>

<VerticalTimelineElement

iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}

icon={<StarIcon />}

</VerticalTimeline>

</div>

);

}

in mystyle.css,

.vertical-timeline::before {  
    content: "";  
    position: absolute;  
    top: 0px;  
    left: 18px;  
    height: 100%;  
    width: 4px;  
    background:black!important;  
}

.vertical-timeline::before {

content: "";

position: absolute;

top: 0px;

left: 18px;

height: 100%;

width: 4px;

background:black!important;

}

Output:

SharePoint 2013 Hosting – HostForLIFE.eu :: Easy Debugging With Developer Dashboard In SharePoint

Sep 24th

Posted by Peter in European SharePoint 2013 Hosting

As we know writing code for SharePoint sites is not difficult whether we are writing server side or client-side code for customizing features. The main point where everyone gets struck is troubleshooting or handling errors related to code. Also, error logging for SharePoint sites is done to both ULS and Windows Event Logs and finding or reading logs sometimes is really a mess. As, reading ULS (SharePoint Unified Logging Service) is not easy for everyone to get through. So, a new feature was introduced in SharePoint 2010 named Developer Dashboard.

What is developer dashboard?

Developer Dashboard is introduced as a new feature in SharePoint 2010. It’s a user interface which reflects useful diagnostic information. Developer dashboards are helpful to not only developers in debugging but also to administrators in handling issues related to farm.

Developer Dashboard gives the information about performance of controls used of a SharePoint page. Also, it tells about execution time taken by each control, log correlation ID, critical events, database queries with their handling time, service calls, SPRequests allocation whether used nominal or not and webparts event offsets (time taken in loading and rendering of webparts). This is a very helpful performance tuning feature. By default, this feature is disabled. We may enable it by:

Powershell script
STSADM command
using code

Enable developer dashboard SharePoint 2016/2013 using PowerShell script

We may easily enable or disable developer dashboard in SharePoint using PowerShell script as below,

Enable Developer Dashboard SharePoint

$var = Microsoft.SharePoint.Administration.SPWebService]::ContentService.DeveloperDashboardSettings;  
$var.DisplayLevel = [Microsoft.SharePoint.Administration.SPDeveloperDashboardLevel]::On  
$var.Update()

$var = Microsoft.SharePoint.Administration.SPWebService]::ContentService.DeveloperDashboardSettings;

$var.DisplayLevel = [Microsoft.SharePoint.Administration.SPDeveloperDashboardLevel]::On

$var.Update()

Enable on Demand

$var.DisplayLevel = ‘OnDemand’;

1	$var.DisplayLevel = ‘OnDemand’;

Display level for Developer dashboard can also be set as ‘OnDemand’.

Disable Developer Dashboard SharePoint

$var = Microsoft.SharePoint.Administration.SPWebService]::ContentService.DeveloperDashboardSettings;  
$var.DisplayLevel = [Microsoft.SharePoint.Administration.SPDeveloperDashboardLevel]::Off  
$var.Update()

$var = Microsoft.SharePoint.Administration.SPWebService]::ContentService.DeveloperDashboardSettings;

$var.DisplayLevel = [Microsoft.SharePoint.Administration.SPDeveloperDashboardLevel]::Off

$var.Update()

Just and On/Off and it can be enabled or disabled.

Enable developer dashboard SharePoint 2010 STSADM

Below is the STSADM command to enable or disable developer dashboard in SharePoint.

Enable Developer Dashboard SharePoint

stsadm -o setproperty -pn developer-dashboard -pv on

Disable Developer Dashboard

stsadm -o setproperty -pn developer-dashboard -pv off

Enable on Demand (Recommended approach will be OnDemand)

stsadm -o setproperty -pn developer-dashboard -pv OnDemand

Enable developer dashboard SharePoint using Server Object Model

By using SharePoint server object model, we may do the enable or disable developer dashboard in SharePoint as below,

using Microsoft.SharePoint;  
using Microsoft.SharePoint.Administration;  
SPDeveloperDashboardSettings settings = SPWebService.ContentService.DeveloperDashboardSettings;  
settings.DisplayLevel = SPDeveloperDashboardLevel.On;  
settings.TraceEnabled = true;  
settings.Update();

using Microsoft.SharePoint;

using Microsoft.SharePoint.Administration;

SPDeveloperDashboardSettings settings = SPWebService.ContentService.DeveloperDashboardSettings;

settings.DisplayLevel = SPDeveloperDashboardLevel.On;

settings.TraceEnabled = true;

settings.Update();

Developer Dashboard on custom master page in SharePoint

To use Developer Dashboard on custom master pages, keep the Developer Dashboard Launcher and page rendering control on the custom master page.

For the developer dashboard launcher,

<Sharepoint:DeveloperDashboardLauncher ID="DeveloperDashboardLauncher" NavigateUrl="javascript:ToggleDeveloperDashboard()" runat="server" ImageUrl="/_layouts/images/fgimg.png" Text="<%$Resources:wss,multipages_launchdevdashalt_text%>" OffsetX=0 OffsetY=222 Height=16 Width=16 />

1	<Sharepoint:DeveloperDashboardLauncher ID="DeveloperDashboardLauncher" NavigateUrl="javascript:ToggleDeveloperDashboard()" runat="server" ImageUrl="/_layouts/images/fgimg.png" Text="<%$Resources:wss,multipages_launchdevdashalt_text%>" OffsetX=0 OffsetY=222 Height=16 Width=16 />

Page Rendering Control

<SharePoint:DeveloperDashboard runat="server" />

1	<SharePoint:DeveloperDashboard runat="server" />

Where on the page it will reflect and render the output.

Viewing Logs with Developer Dashboard

Using the below steps, we can view the ULS logs in developer dashboard.

Log to your site
From the right side of the ribbon, click on developer dashboard. Developer dashboard will pop up in new window.
Browse the link to troubleshoot. It will start logging the session requests.
Select the request you want to investigate and click on related ULS log entries.

Recommendation

Most important, it gets enabled to the whole farm and is not particular to any site collection. So, it’s recommended to use in test environments. Then turn it off in production environments.

SharePoint 2013 Hosting – HostForLIFE.eu :: Filtered/Connected Web Parts In Modern SharePoint Pages

Sep 17th

Posted by Peter in European SharePoint 2013 Hosting

For SharePoint power users, the Filtered/Connected Web parts is a very popular feature. While this feature has been in use in Classic SharePoint sites for a long time, it has been a more recent introduction to Modern SharePoint Pages. While the features in Modern SharePoint Pages may not be the same as in Classic SharePoint, I like the fact that the current web parts cover the most relevant functionalities used in Classic SharePoint sites.

Following are the filtered/connected web parts that are available in Modern SharePoint Pages as of today. Further in this article, I will explain how to use each one of them.

List Properties Web part: Displays properties of selected List Item
File Viewer Web part: Displays file content of selected document in Library
Embed Web part: Displays any type of content including Images and Videos
Filter Web part based on another list or library

List Properties Web Part

This web part is useful when users have a list with too many columns and you cannot display the relevant columns in a view without horizontal scrolling. List Properties web part allows users to configure the columns they want to display in a web part when a particular item is selected in List View web part. Here’s how to configure it,

Add a “List Web part” (select a List from the site) and “List Properties Web part” on the page
On the “List Properties Web part”, click “Connect”, it will open the properties pane of the web part
In the properties pane, click on the ellipsis (…), and click “Connect to source”
If you have more than one “List Web part” on the page, then select appropriate web part/list and choose the columns you want to display in the “List Properties Web part”
You can also select if properties should be editable or read-only in the web part
Save the page and test the webpart by selecting any item from “List Web part”

File Viewer Web Part

This web part allows users see the content of a selected file without a need to open each file in browser/desktop app. Here’s how to configure it,

Add a “Document Library Web part” (select a Document Library from the site) and “File Viewer Web part” on the page
On the “File Viewer Web part”, click “Edit”, it will open the properties pane of the web part
In the properties pane, click on the ellipsis (…), and click “Connect to source”
If you have more than one “Document Library Web part” on the page, then select appropriate web part/document library
Save the page and test the webpart by selecting any document from “Document Library Web part”

File Viewer Web part supports various file types apart from Office Documents like Images, Text and PDF.

Embed Web Part

This web part allows users to display dynamic content using links or embed code that can use variables. Below are a couple examples on how to configure it for Images; similar logic can be applied for other content too like YouTube Videos.

Create a List, add a Hyperlink Column to it that will contain the Image URL
Add a “List Web part” (select the List with Image URL’s) and “Embed Web part” on the page
On the “Embed Web part”, click “Edit”, it will open the properties pane of the web part
In the properties pane, click on the ellipsis (…), and click “Connect to source”, then select appropriate web part/list
Under “Web site address or embed code”, add the embed code. In this example, the embed code is,

<iframe width=”693″ height=”390″ src=”[$Image URL]” frameborder=”0″ ></iframe> where [$Image URL] is the variable that represents the column name for the Image URLs.

Save the page and test the web part by selecting any item from “List Web part”. Respective Image will be displayed in Embed Web part

Filter Web Part based on another list or library

This is the same feature as Connected Web parts in Classic SharePoint Sites. In Modern Experience, we enable the “Dynamic Filtering” on the secondary web part and provide the details on the filter. Here is how to do this,

In order to have the dynamic filtering capabilities between two lists, there should be some kind of parent-child relationship that will allow the filters to work
Add a “List” or “Document Library” web part to the page that will act as the parent control
Add another “List” or “Document Library” web part to the page. This will be the child control.
On the second web part, click “Edit”
In the properties pane, enable the “Dynamic Filtering” toggle and provide the column to filter on
Select the Parent List and the column to filter by
Click on “Apply”
Save the page and test the web part by selecting any item/document from parent “List Web part”. Items in the second “List Web part” will be filtered accordingly.

These are some very useful web parts that makes the user experience and content rendering very friendly for end users. If you have not explored these web part features yet, then I encourage you to try them out now in Modern SharePoint Pages.

SharePoint Hosting – Upload Nested Folder Structure And Files On A SP Online Library

Aug 31st

Posted by Peter in European SharePoint 2013 Hosting

Hi guys, let’s explore some amazing ways to completely migrate a nested folder structure with lots of different files which is from your local path to a SP online library using PnP PowerShell.

Here is the script to run on Windows ISE Powershell:

#Function to Copy Multiple Files with Folder structure to SharePoint Online Document Library
Function Migrate - PnPFolderToSPO() {
param(
[Parameter(Mandatory = $true)][string] $SiteURL,
[Parameter(Mandatory = $true)][string] $SourceFolderPath,
[Parameter(Mandatory = $true)][string] $LibraryName,
[Parameter(Mandatory = $true)][string] $LogFile)
Try {
Add - content $Logfile - value "`n---------------------- File Upload Script Started: $(Get-date -format 'dd/MM/yyy hh:mm:ss tt')-------------------"
#Connect to PnP Online
Connect - PnPOnline - Url $SiteURL - UseWebLogin
#Get the Target Folder to Upload
$Web = Get - PnPWeb
$List = Get - PnPList $LibraryName - Includes RootFolder
$TargetFolder = $List.RootFolder
$TargetFolderSiteRelativeURL = $TargetFolder.ServerRelativeURL.Replace($Web.ServerRelativeUrl, "")
#Get All Items from the Source
$Source = Get - ChildItem - Path $SourceFolderPath - Recurse
$SourceItems = $Source | Select FullName, PSIsContainer, @ {
Label = 'TargetItemURL';
Expression = {
$_.FullName.Replace($SourceFolderPath, $TargetFolderSiteRelativeURL).Replace("\"," / ")}}
Add - content $Logfile - value "Number of Items Found in the Source: $($SourceItems.Count)"
#Upload Source Items from Fileshare to Target SharePoint Online document library $Counter = 1 $SourceItems | ForEach - Object {
#Calculate Target Folder URL
$TargetFolderURL = (Split - Path $_.TargetItemURL - Parent).Replace("\"," / ")
$ItemName = Split - Path $_.FullName - leaf #Replace Invalid Characters $ItemName = [RegEx]::Replace($ItemName, "[{0}]" - f([RegEx]::Escape([String]
'\"*:<>?/\|')), '_') #Display Progress bar $Status = "uploading '" + $ItemName + "' to " + $TargetFolderURL + " ($($Counter) of $($SourceItems.Count))"
Write - Progress - Activity "Uploading ..." - Status $Status - PercentComplete(($Counter / $SourceItems.Count) * 100) If($_.PSIsContainer) {
#Ensure Folder
$Folder = Resolve - PnPFolder - SiteRelativePath($TargetFolderURL + "/" + $ItemName)
Write - host "Ensured Folder '$($ItemName)' to Folder $TargetFolderURL"
Add - content $Logfile - value "Ensured Folder '$($ItemName)' to Folder $TargetFolderURL"
}
Else {
#Upload File
$File = Add - PnPFile - Path $_.FullName - Folder $TargetFolderURL
Write - host "Uploaded File '$($_.FullName)' to Folder $TargetFolderURL"
Add - content $Logfile - value "Uploaded File '$($_.FullName)' to Folder $TargetFolderURL"
}
$Counter++
}
}
Catch {
Write - host - f Red "Error:"
$_.Exception.Message
Add - content $Logfile - value "Error:$($_.Exception.Message)"
}
Finally {
Add - content $Logfile - value "---------------------- File upload Script Completed: $(Get-date -format 'dd/MM/yyy hh:mm:ss tt')-----------------"
}
}
#Call the Function to Upload a Folder to SharePoint Online
Migrate - PnPFolderToSPO - SiteURL "https://samplesharenet.sharepoint.com/sites/classictest" - SourceFolderPath "C:\Users\Bharat\Documents\Bharat\General Works for Internal Requirements" - LibraryName "PnPCopytoLib" - LogFile "C:\Users\Bharat\PnPTest\Migration-LOG.log"

#Function to Copy Multiple Files with Folder structure to SharePoint Online Document Library

Function Migrate - PnPFolderToSPO() {

param(

[Parameter(Mandatory = $true)][string] $SiteURL,

[Parameter(Mandatory = $true)][string] $SourceFolderPath,

[Parameter(Mandatory = $true)][string] $LibraryName,

[Parameter(Mandatory = $true)][string] $LogFile)

Try {

Add - content $Logfile - value "`n---------------------- File Upload Script Started: $(Get-date -format 'dd/MM/yyy hh:mm:ss tt')-------------------"

#Connect to PnP Online

Connect - PnPOnline - Url $SiteURL - UseWebLogin

#Get the Target Folder to Upload

$Web = Get - PnPWeb

$List = Get - PnPList $LibraryName - Includes RootFolder

$TargetFolder = $List.RootFolder

$TargetFolderSiteRelativeURL = $TargetFolder.ServerRelativeURL.Replace($Web.ServerRelativeUrl, "")

#Get All Items from the Source

$Source = Get - ChildItem - Path $SourceFolderPath - Recurse

$SourceItems = $Source | Select FullName, PSIsContainer, @ {

Label = 'TargetItemURL';

Expression = {

$_.FullName.Replace($SourceFolderPath, $TargetFolderSiteRelativeURL).Replace("\"," / ")}}

Add - content $Logfile - value "Number of Items Found in the Source: $($SourceItems.Count)"

#Upload Source Items from Fileshare to Target SharePoint Online document library $Counter = 1 $SourceItems | ForEach - Object {

#Calculate Target Folder URL

$TargetFolderURL = (Split - Path $_.TargetItemURL - Parent).Replace("\"," / ")

$ItemName = Split - Path $_.FullName - leaf #Replace Invalid Characters $ItemName = [RegEx]::Replace($ItemName, "[{0}]" - f([RegEx]::Escape([String]

'\"*:<>?/\|')), '_') #Display Progress bar $Status = "uploading '" + $ItemName + "' to " + $TargetFolderURL + " ($($Counter) of $($SourceItems.Count))"

Write - Progress - Activity "Uploading ..." - Status $Status - PercentComplete(($Counter / $SourceItems.Count) * 100) If($_.PSIsContainer) {

#Ensure Folder

$Folder = Resolve - PnPFolder - SiteRelativePath($TargetFolderURL + "/" + $ItemName)

Write - host "Ensured Folder '$($ItemName)' to Folder $TargetFolderURL"

Add - content $Logfile - value "Ensured Folder '$($ItemName)' to Folder $TargetFolderURL"

}

Else {

#Upload File

$File = Add - PnPFile - Path $_.FullName - Folder $TargetFolderURL

Write - host "Uploaded File '$($_.FullName)' to Folder $TargetFolderURL"

Add - content $Logfile - value "Uploaded File '$($_.FullName)' to Folder $TargetFolderURL"

}

$Counter++

}

Catch {

Write - host - f Red "Error:"

$_.Exception.Message

Add - content $Logfile - value "Error:$($_.Exception.Message)"

}

Finally {

Add - content $Logfile - value "---------------------- File upload Script Completed: $(Get-date -format 'dd/MM/yyy hh:mm:ss tt')-----------------"

}

#Call the Function to Upload a Folder to SharePoint Online

Migrate - PnPFolderToSPO - SiteURL "https://samplesharenet.sharepoint.com/sites/classictest" - SourceFolderPath "C:\Users\Bharat\Documents\Bharat\General Works for Internal Requirements" - LibraryName "PnPCopytoLib" - LogFile "C:\Users\Bharat\PnPTest\Migration-LOG.log"

Just enter your own respective details which are highlighted in the above script.

When it starts running, enter your Site Admin/Global Admin Tenant details to start the processing.

You can see the Uploading in Progress on your Windows Powershell ISE Interface. Just wait until it gets finished!

This script copies the contents of a folder to the SharePoint Online document library. It overwrites any existing file in the target SharePoint Online library. It creates a folder if it doesn’t exist on the target site already. We can also use this script to migrate files and folders from network file share to SharePoint Online document library!

Creative Idea

You can have the above script triggered through a Flow/Azure Flow[Logic Apps] to have an automated Copying and include Removal in the Source to establish an Automated Archival Process for your Business needs.

SharePoint Hosting – List All Content Editor Webparts Present In A SharePoint OnPremise Web Application Using PowerShell

Aug 24th

Posted by Peter in European SharePoint 2013 Hosting

In this article, I will provide information on how to get all the content editor webparts present under a web application using PowerShell.

Below are the components used in this document.

PowerShell
SharePoint 2016

Some time ago we get a request to collect an inventory on the current SharePoint environment; including how many content editor Webparts and the number of lists and libraries under a web application. Below is the step by step way to get all the content editor webparts present under a web application using PowerShell.

Power Shell File

Step 1

Create a text file. Name it as “GetTotalCEWP.ps1” file. Note that you will have to change the extension from “.txt” to “.ps1”

Step 2

Insert the below code to get the web application URL as an input from the user.

[CmdletBinding()]
param( [Parameter(Position=0,Mandatory=$true,ValueFromPipeline=$false,HelpMessage=“Input the Web Application URL.”)] [string]$WebApp)

Step 3

Insert the below code to load the SharePoint PowerShell snap in.

if ((Get - PSSnapin - Name Microsoft.SharePoint.PowerShell - ErrorAction SilentlyContinue) - eq $null) {  
    Write - Host "Loading SharePoint PowerShell"  
    Add - PSSnapin Microsoft.SharePoint.PowerShell  
}

if ((Get - PSSnapin - Name Microsoft.SharePoint.PowerShell - ErrorAction SilentlyContinue) - eq $null) {

Write - Host "Loading SharePoint PowerShell"

Add - PSSnapin Microsoft.SharePoint.PowerShell

}

Step 4

Insert the below code to get all the publishing pages and then fetch the content editor webparts from those pages.

$SPWebApp = Get - SPWebApplication $WebApp - EA SilentlyContinue  
if ($SPWebApp - eq $null) {  
    Write - Error "$WebApp url is not a valid!"  
} else {  
    $allsites = $SPWebApp.Sites  
    foreach($site in $allsites) {  
        try {  
            $allwebs = $site.AllWebs  
            foreach($web in $allwebs) {  
                try {  
                    if ([Microsoft.SharePoint.Publishing.PublishingWeb]::IsPublishingWeb($web)) {  
                        $pubpages = [Microsoft.SharePoint.Publishing.PublishingWeb]::GetPublishingWeb($web)  
                        $allpages = $pubpages.GetPublishingPages()  
                        foreach($page in $allpages) {  
                            GetCEWPFunction - url $page.Url  
                        }  
                    }  
                } catch {} finally {  
                    $web.Dispose()  
                }  
            }  
        } catch {} finally {  
            $site.Dispose()  
        }  
    }  
}

$SPWebApp = Get - SPWebApplication $WebApp - EA SilentlyContinue

if ($SPWebApp - eq $null) {

Write - Error "$WebApp url is not a valid!"

} else {

$allsites = $SPWebApp.Sites

foreach($site in $allsites) {

try {

$allwebs = $site.AllWebs

foreach($web in $allwebs) {

try {

if ([Microsoft.SharePoint.Publishing.PublishingWeb]::IsPublishingWeb($web)) {

$pubpages = [Microsoft.SharePoint.Publishing.PublishingWeb]::GetPublishingWeb($web)

$allpages = $pubpages.GetPublishingPages()

foreach($page in $allpages) {

GetCEWPFunction - url $page.Url

}

} catch {} finally {

$web.Dispose()

}

} catch {} finally {

$site.Dispose()

}

Step 5

There might be scenarios where we have added the content Editor webparts inside the List/Libraries forms (edit/view/display). Insert the below code to retrieve the same. We have to insert this code just before the first try/catch ends.

GetCEWPFunction - url $page.Url  
}  
}  
$lists = $web.GetListsOfType("DocumentLibrary") | ? {  
    $_.IsCatalog - eq $false  
}  
foreach($list in $lists) {  
    $allviews = $list.Views  
    foreach($view in $allviews) {  
        GetCEWPFunction - url $view.Url  
    }  
    $allforms = $list.Forms  
    foreach($form in $allforms) {  
        GetCEWPFunction - url $form.Url  
    }  
}  
}  
catch {} finally {  
    $web.Dispose()  
}  
}  
} catch {} finally {  
    $site.Dispose()  
}  
}  
}

GetCEWPFunction - url $page.Url

}

$lists = $web.GetListsOfType("DocumentLibrary") | ? {

$_.IsCatalog - eq $false

}

foreach($list in $lists) {

$allviews = $list.Views

foreach($view in $allviews) {

GetCEWPFunction - url $view.Url

}

$allforms = $list.Forms

foreach($form in $allforms) {

GetCEWPFunction - url $form.Url

}

catch {} finally {

$web.Dispose()

}

} catch {} finally {

$site.Dispose()

}

Step 6

Insert the below code to have the function named “GetCEWPFunction “ which would actually count the content editor webpart.

function GetCEWPFunction([string] $url) {  
    $manager = $web.GetLimitedWebPartManager($url, [System.Web.UI.WebControls.WebParts.PersonalizationScope]::Shared)  
    $allwebParts = $manager.WebParts  
    if ($allwebParts.Count - ne 0) {  
        foreach($webPart in $allwebParts) {  
            if ($webPart.GetType() - eq[Microsoft.SharePoint.WebPartPages.ContentEditorWebPart]) {  
                if ($webPart.ContentLink.Length - gt 0) {  
                    $file = $web.GetFile($webPart.ContentLink)  
                    $data = $file.OpenBinary()  
                    $encode = New - Object System.Text.ASCIIEncoding  
                    $contents = $encode.GetString($data)  
                    if ($contents.ToLower().Contains("<script>")) {  
                        Write - Output "$($web.Url)/$url (CONTENTLINK)"  
                    }  
                    break  
                }  
                if ($webPart.Content.InnerText.Contains("<script>")) {  
                    Write - Output "$($web.Url)/$url (HTML)"  
                }  
            }  
        }  
    }  
}

function GetCEWPFunction([string] $url) {

$manager = $web.GetLimitedWebPartManager($url, [System.Web.UI.WebControls.WebParts.PersonalizationScope]::Shared)

$allwebParts = $manager.WebParts

if ($allwebParts.Count - ne 0) {

foreach($webPart in $allwebParts) {

if ($webPart.GetType() - eq[Microsoft.SharePoint.WebPartPages.ContentEditorWebPart]) {

if ($webPart.ContentLink.Length - gt 0) {

$file = $web.GetFile($webPart.ContentLink)

$data = $file.OpenBinary()

$encode = New - Object System.Text.ASCIIEncoding

$contents = $encode.GetString($data)

if ($contents.ToLower().Contains("<script>")) {

Write - Output "$($web.Url)/$url (CONTENTLINK)"

}

break

}

if ($webPart.Content.InnerText.Contains("<script>")) {

Write - Output "$($web.Url)/$url (HTML)"

}

Step 7

The full file will look as attached with this article.

Step 8

Save your PowerShell File and test it by running below command. It will list down all the content editor webparts present under a web application

.\GetTotalCEWP.ps1 -WebApp http://portal.intranet.com

That is it. I hope you have learned something new from this article and will utilize this in your work.

SharePoint Hosting – Navigation Bar In SPFx With Current User Greetings

Aug 13th

Posted by Peter in European SharePoint 2013 Hosting

Here we will see how to create a navigation bar using spfx extension. So let’s see how we can achieve this.

md ext2

cd ext2

yo @ microsoft/sharepoint

What is your solution name?: ext2

Which type of client-side como you want to target for your component(s)? SharePoint Online only (latest)

Component to create?: Extension

What is your Application Customizer name? ext2

What is your Application Customizer description? ext description

After the scaffolding run the below command to install the office fabric ui:

npm install @microsoft/sp-office-ui-fabric-core

Then code.

Create a new file named ./src/extensions/ext2/AppCustomizer.module.scss.

Update AppCustomizer.module.scss as follows:

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';.app {  
    .top {  
        height: 60 px;  
        text - align: center;  
        line - height: 2.5;  
        font - weight: bold;  
        display: flex;  
        align - items: center;  
        justify - content: center;  
        background - color: $ms - color - themePrimary;  
        color: $ms - color - white;  
    }.bottom {  
        height: 40 px;  
        text - align: center;  
        line - height: 2.5;  
        font - weight: bold;  
        display: flex;  
        align - items: center;  
        justify - content: center;  
        background - color: $ms - color - themePrimary;  
        color: $ms - color - white;  
    }  
}.topnav {  
    overflow: hidden;  
    background - color: black;  
}.topnav a {  
    float: left;  
    color: #f2f2f2;  
    text - align: center;  
    padding: 14 px 16 px;  
    text - decoration: none;  
    font - size: 17 px;  
}.topnav a: hover {  
        background - color: #ddd;  
        color: black;  
    }.topnav a.active {  
        background - color: #4CAF50;  
color: white;  
}

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';.app {

.top {

height: 60 px;

text - align: center;

line - height: 2.5;

font - weight: bold;

display: flex;

align - items: center;

justify - content: center;

background - color: $ms - color - themePrimary;

color: $ms - color - white;

}.bottom {

height: 40 px;

text - align: center;

line - height: 2.5;

font - weight: bold;

display: flex;

align - items: center;

justify - content: center;

background - color: $ms - color - themePrimary;

color: $ms - color - white;

}

}.topnav {

overflow: hidden;

background - color: black;

}.topnav a {

float: left;

color: #f2f2f2;

text - align: center;

padding: 14 px 16 px;

text - decoration: none;

font - size: 17 px;

}.topnav a: hover {

background - color: #ddd;

color: black;

}.topnav a.active {

background - color: #4CAF50;

color: white;

}

In the Ext2ApplicationCustomizer.ts

import {  
    override  
} from '@microsoft/decorators';  
import {  
    Log  
} from '@microsoft/sp-core-library';  
import {  
    BaseApplicationCustomizer,  
    PlaceholderContent,  
    PlaceholderName  
} from '@microsoft/sp-application-base';  
import {  
    Dialog  
} from '@microsoft/sp-dialog';  
import * as strings from 'Ext2ApplicationCustomizerStrings';  
import styles from './AppCustomizer.module.scss';  
import {  
    escape  
} from '@microsoft/sp-lodash-subset';  
const LOG_SOURCE: string = 'Ext2ApplicationCustomizer';  
export interface IExt2ApplicationCustomizerProperties {  
    Top: string;  
    Bottom: string;  
}  
/** A Custom Action which can be run during execution of a Client Side Application */  
export default class Ext2ApplicationCustomizer  
extends BaseApplicationCustomizer < IExt2ApplicationCustomizerProperties > {  
    private _bottomPlaceholder: PlaceholderContent | undefined;  
    @override  
    public onInit(): Promise < void > {  
        this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);  
        return Promise.resolve();  
    }  
    private _renderPlaceHolders(): void {  
        const topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, {  
            onDispose: this.onDispose  
        });  
        if (!topPlaceholder) {  
            console.error("The expected placeholder (Top) was not found.");  
            return;  
        }  
        if (topPlaceholder.domElement) {  
            topPlaceholder.domElement.innerHTML = `  
  
        <div class = "${styles.topnav}">  
            <a class = "${styles.active}" href = "https://dronzer.sharepoint.com/sites/Barcelona/SitePages/Home.aspx">Home</a>  
            <a href = "https://dronzer.sharepoint.com/sites/Liverpool">News</a>  
            <a href = "https://dronzer.sharepoint.com/sites/chelsea">About us</a>  
            <a href = "https://dronzer.sharepoint.com/sites/mancity">Find Mentor</a>  
        </div>  
        <span class = "${styles.top}">Hello! ${escape(this.context.pageContext.user.displayName)}</span>  
`;  
}  
        // Handling the bottom placeholder  
        if (!this._bottomPlaceholder) {  
            this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom, {  
                onDispose: this._onDispose  
            });  
            // The extension should not assume that the expected placeholder is available.  
            if (!this._bottomPlaceholder) {  
                console.error("The expected placeholder (Bottom) was not found.");  
                return;  
            }  
            if (this.properties) {  
                let bottomString: string = this.properties.Bottom;  
                if (!bottomString) {  
                    bottomString = "(Bottom property was not defined.)";  
                }  
                if (this._bottomPlaceholder.domElement) {  
                    this._bottomPlaceholder.domElement.innerHTML = `  
        <div class="${styles.app}">  
            <div class="${styles.bottom}">  
                <i aria-hidden="true"></i> ${escape(  
bottomString  
)}  
  
            </div>  
        </div>`  
                }  
            }  
        }  
    }  
    private _onDispose(): void {  
        console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');  
    }  
}

import {

override

} from '@microsoft/decorators';

import {

Log

} from '@microsoft/sp-core-library';

import {

BaseApplicationCustomizer,

PlaceholderContent,

PlaceholderName

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

import {

Dialog

} from '@microsoft/sp-dialog';

import * as strings from 'Ext2ApplicationCustomizerStrings';

import styles from './AppCustomizer.module.scss';

import {

escape

} from '@microsoft/sp-lodash-subset';

const LOG_SOURCE: string = 'Ext2ApplicationCustomizer';

export interface IExt2ApplicationCustomizerProperties {

Top: string;

Bottom: string;

}

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

export default class Ext2ApplicationCustomizer

extends BaseApplicationCustomizer < IExt2ApplicationCustomizerProperties > {

private _bottomPlaceholder: PlaceholderContent | undefined;

@override

public onInit(): Promise < void > {

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

return Promise.resolve();

}

private _renderPlaceHolders(): void {

const topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, {

onDispose: this.onDispose

});

if (!topPlaceholder) {

console.error("The expected placeholder (Top) was not found.");

return;

}

if (topPlaceholder.domElement) {

topPlaceholder.domElement.innerHTML = `

<a href = "https://dronzer.sharepoint.com/sites/chelsea">About us</a>

<a href = "https://dronzer.sharepoint.com/sites/mancity">Find Mentor</a>

</div>

<span class = "${styles.top}">Hello! ${escape(this.context.pageContext.user.displayName)}</span>

}

// Handling the bottom placeholder

if (!this._bottomPlaceholder) {

this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom, {

onDispose: this._onDispose

});

// The extension should not assume that the expected placeholder is available.

if (!this._bottomPlaceholder) {

console.error("The expected placeholder (Bottom) was not found.");

return;

}

if (this.properties) {

let bottomString: string = this.properties.Bottom;

if (!bottomString) {

bottomString = "(Bottom property was not defined.)";

}

if (this._bottomPlaceholder.domElement) {

this._bottomPlaceholder.domElement.innerHTML = `

<i aria-hidden="true"></i> ${escape(

bottomString

)}

</div>

</div>`

}

private _onDispose(): void {

console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');

}

Update the serve.json file as

{  
    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",  
    "port": 4321,  
    "https": true,  
    "serveConfigurations": {  
        "default": {  
            "pageUrl": "enter the site url",  
            "customActions": {  
                "716b612c-e184-4ccc-a24e-604a7c837821": {  
                    "location": "ClientSideExtension.ApplicationCustomizer",  
                    "properties": {  
                        "Top": "DRONZER10",  
                        "Bottom": "Nilanjan Mukherjee"  
                    }  
                }  
            }  
        },  
        "ext2": {  
            "pageUrl": "enter the site url",  
            "customActions": {  
                "716b612c-e184-4ccc-a24e-604a7c837821": {  
                    "location": "ClientSideExtension.ApplicationCustomizer",  
                    "properties": {  
                        "Top": "DRONZER10",  
                        "Bottom": "Nilanjan Mukherjee"  
                    }  
                }  
            }  
        }  
    }  
}

{

"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",

"port": 4321,

"https": true,

"serveConfigurations": {

"default": {

"pageUrl": "enter the site url",

"customActions": {

"716b612c-e184-4ccc-a24e-604a7c837821": {

"location": "ClientSideExtension.ApplicationCustomizer",

"properties": {

"Top": "DRONZER10",

"Bottom": "Nilanjan Mukherjee"

}

"ext2": {

"pageUrl": "enter the site url",

"customActions": {

"716b612c-e184-4ccc-a24e-604a7c837821": {

"location": "ClientSideExtension.ApplicationCustomizer",

"properties": {

"Top": "DRONZER10",

"Bottom": "Nilanjan Mukherjee"

}

Update the package-solution.json file as

{  
    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",  
    "solution": {  
        "name": "ext-2-client-side-solution",  
        "id": "8e90fd7b-a799-4834-82c6-d55b530af66c",  
        "version": "4.0.0.0",  
        "includeClientSideAssets": true,  
        "isDomainIsolated": false,  
        "developer": {  
            "name": "",  
            "websiteUrl": "",  
            "privacyUrl": "",  
            "termsOfUseUrl": "",  
            "mpnId": ""  
        },  
        "features": [{  
            "title": "Application Extension - Deployment of custom action.",  
            "description": "Deploys a custom action with ClientSideComponentId association",  
            "id": "e53cf4f6-9ca9-4060-8f09-bca3286ecf18",  
            "version": "1.0.0.0",  
            "assets": {  
                "elementManifests": ["elements.xml"]  
            }  
        }]  
    },  
    "paths": {  
        "zippedPackage": "solution/ext-2.sppkg"  
    }  
}

{

"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",

"solution": {

"name": "ext-2-client-side-solution",

"id": "8e90fd7b-a799-4834-82c6-d55b530af66c",

"version": "4.0.0.0",

"includeClientSideAssets": true,

"isDomainIsolated": false,

"developer": {

"name": "",

"websiteUrl": "",

"privacyUrl": "",

"termsOfUseUrl": "",

"mpnId": ""

"features": [{

"title": "Application Extension - Deployment of custom action.",

"description": "Deploys a custom action with ClientSideComponentId association",

"id": "e53cf4f6-9ca9-4060-8f09-bca3286ecf18",

"version": "1.0.0.0",

"assets": {

"elementManifests": ["elements.xml"]

}

}]

"paths": {

"zippedPackage": "solution/ext-2.sppkg"

}

Update the elements.xml file as,

<?xml version="1.0" encoding="utf-8"?>  
<Elements  
    xmlns="http://schemas.microsoft.com/sharepoint/">  
    <CustomAction  
Title="Ext2"  
Location="ClientSideExtension.ApplicationCustomizer"  
ClientSideComponentId="716b612c-e184-4ccc-a24e-604a7c837821"  
ClientSideComponentProperties="{"Top":"DRONZER10","Bottom":"Nilanjan Mukherjee"}"></CustomAction>  
</Elements>

<?xml version="1.0" encoding="utf-8"?>

<Elements

xmlns="http://schemas.microsoft.com/sharepoint/">

<CustomAction

Title="Ext2"

Location="ClientSideExtension.ApplicationCustomizer"

ClientSideComponentId="716b612c-e184-4ccc-a24e-604a7c837821"

ClientSideComponentProperties="{"Top":"DRONZER10","Bottom":"Nilanjan Mukherjee"}"></CustomAction>

</Elements>

You can test the extension in the local workbench using command gulp serve.

For using in sharepoint please package the solution

gulp bundle --ship
gulp package-solution --ship

1 2	gulp bundle --ship gulp package-solution --ship

Under the SharePoint folder find the ext-2.sppkg file. Here you can right click and then click on reveal in file explorer.

Upload the solution in the sharepoint app catalog. From the site content page add the solution. After the solution is added successfully, the extension will be visible in the modern page. If you do any enhancement in the solution please go to the package-solution.json file and update the version before uploading it to the Sharepoint app catalog.

SharePoint 2013 Hosting – HostForLIFE.eu : React Vertical Timeline In SPFX

Steps

SharePoint 2013 Hosting – HostForLIFE.eu :: Easy Debugging With Developer Dashboard In SharePoint

What is developer dashboard?

Enable developer dashboard SharePoint 2016/2013 using PowerShell script

Enable developer dashboard SharePoint 2010 STSADM

Enable developer dashboard SharePoint using Server Object Model

Developer Dashboard on custom master page in SharePoint

Viewing Logs with Developer Dashboard

SharePoint 2013 Hosting – HostForLIFE.eu :: Filtered/Connected Web Parts In Modern SharePoint Pages

List Properties Web Part

File Viewer Web Part

Embed Web Part

Filter Web Part based on another list or library

SharePoint Hosting – Upload Nested Folder Structure And Files On A SP Online Library

SharePoint Hosting – List All Content Editor Webparts Present In A SharePoint OnPremise Web Application Using PowerShell

Power Shell File

SharePoint Hosting – Navigation Bar In SPFx With Current User Greetings

BLOGROLL

Featured On

European Sharepoint 2013 Hosting Blog

SharePoint 2013 Hosting – HostForLIFE.eu : React Vertical Timeline In SPFX

Steps

SharePoint 2013 Hosting – HostForLIFE.eu :: Easy Debugging With Developer Dashboard In SharePoint

What is developer dashboard?

Enable developer dashboard SharePoint 2016/2013 using PowerShell script

Enable developer dashboard SharePoint 2010 STSADM

Enable developer dashboard SharePoint using Server Object Model

Developer Dashboard on custom master page in SharePoint

Viewing Logs with Developer Dashboard

SharePoint 2013 Hosting – HostForLIFE.eu :: Filtered/Connected Web Parts In Modern SharePoint Pages

List Properties Web Part

File Viewer Web Part

Embed Web Part

Filter Web Part based on another list or library

SharePoint Hosting – Upload Nested Folder Structure And Files On A SP Online Library

SharePoint Hosting – List All Content Editor Webparts Present In A SharePoint OnPremise Web Application Using PowerShell

Power Shell File

SharePoint Hosting – Navigation Bar In SPFx With Current User Greetings

BLOGROLL

Featured On

Tags