Peter, Author at European Sharepoint 2013 Hosting Blog

SharePoint 2013 Hosting – HostForLIFE.eu : How To Update The Hyperlink In The SharePoint Online List Items Using PnP PowerShell?

Jul 31st

Posted by Peter in European SharePoint 2013 Hosting

I have created multiple views in different lists (approximately 100) across the site and I am storing those list view URL’s in a link list. I have two different environments, INT and QA. When I migrate the link list from one environment to other environment the link list is migrated with all contents but the URLs have to be updated. For example, see the URL format below for each environment.

INT – Link 001 – https://c986.sharepoint.com/sites/dev-int/Lists/Demo/link001.aspx

QA – Link 001 – https://c986.sharepoint.com/sites/dev-qa/Lists/Demo/link001.aspx

In order to overcome this, I have written the below PnP PowerShell script which updates the URLs in the link lists.

You can download setup files from the releases section of the PnP PowerShell repository.

Copy the below script and paste it in a notepad. Save the file as UpdateHyperLink.ps1.

# Input Parameters   
$siteURL="https://c986.sharepoint.com/sites/dev-qa"  
$listName="Links"  
  
# Connect to SharePoint Online site  
Connect-PnPOnline -Url $siteURL -Credentials (Get-Credential)  
  
# Get the list items  
$itemColl=Get-PnPListItem -List $listName  
  
# Loop through each item  
foreach($item in $itemColl)  
{     
   # Get the item URL value  
   $url=$item["URL"].Url;  
  
   # Update the URL  
   $updatedURL=New-Object Microsoft.SharePoint.Client.FieldUrlValue   
   $updatedURL.Url=$url.Replace("dev-int","dev-qa");  
   $updatedURL.Description=$item["URL"].Description;  
   $values = @{"URL"=[Microsoft.SharePoint.Client.FieldUrlValue]$updatedURL }  
  
   # Get the item Id  
   $id=$item.Id     
  
   # Update the list item  
   Set-PnPListItem -List Links -Identity $id -Values $values  
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

# Input Parameters

$siteURL="https://c986.sharepoint.com/sites/dev-qa"

$listName="Links"

# Connect to SharePoint Online site

Connect-PnPOnline -Url $siteURL -Credentials (Get-Credential)

# Get the list items

$itemColl=Get-PnPListItem -List $listName

# Loop through each item

foreach($item in $itemColl)

{

# Get the item URL value

$url=$item["URL"].Url;

# Update the URL

$updatedURL=New-Object Microsoft.SharePoint.Client.FieldUrlValue

$updatedURL.Url=$url.Replace("dev-int","dev-qa");

$updatedURL.Description=$item["URL"].Description;

$values = @{"URL"=[Microsoft.SharePoint.Client.FieldUrlValue]$updatedURL }

# Get the item Id

$id=$item.Id

# Update the list item

Set-PnPListItem -List Links -Identity $id -Values $values

}

Open PowerShell window and run the following command.

>cd "<folderlocation>"

1	>cd "<folderlocation>"

folderlocation –UpdateHyperLink.ps1 file location

Run the following command

.\ UpdateHyperLink.ps1

1	.\ UpdateHyperLink.ps1

Thus in this blog, you saw how to update the hyperlink in the SharePoint Online List Items using PnP PowerShell.

SharePoint 2013 Hosting – HostForLIFE.eu : PowerApps In SharePoint Online

Jul 26th

Posted by Peter in European SharePoint 2013 Hosting

No comments

I will be discussing the features provided by PowerApps and how we can utilize them and customize based on our requirement.

PowerApps is a software to build custom business applications without the knowledge of app development or custom coding. It is included in most Office 365 subscription plans and is yet another feature of Office 365, just like OneDrive, Planner, and others.

PowerApps is independent of SharePoint, however, is tightly integrated with it, being part of the Office 365 suite. While PowerApps is designed to work with a number of different sources, like external databases, you can also easily connect PowerApps to any SharePoint list, library or OneDrive, which allows you to store and retrieve information without a need to know databases or SQL.

As we can see that when we create a list, we get options to customize in PowerApps as:

When we click on “Create an app”, it will create new PowerApps, which will run independently outside of SharePoint context. But it will be using SharePoint list/library internally which was configured at the time of app creation.

But when we click on “Customize form”, it will customize the default list view form of SharePoint like view/edit/new form. So any changes on one form will be visible to all three forms.

So you can click on “Customize forms” if you want to change look and feel of the form but if you want to make some logic/condition which will trigger some event, you need to create an app in PowerApps.

Steps to create PowerApps

Click on create an app, provide app name and click Ok, it will navigate you to PowerApps studio. I have used Demo as my app name.
As it opens PowerApps studio, we are presented with 3 options on the left side as by default and our dashboard will display the record from the list we configured PowerApps.

However, we can add multiple screens based on our condition.

For demo purpose, I will be adding new screen which will be redirected based on columns value.

Scenario
I have kept the Status column in my list which contains Approved, Pending and Complete as their value. Now, I want that if the request is in a complete stage, it should be redirected to view page only else it should be redirected to Edit page.

Step 1
Click on New Screen from the top left screen and rename as ViewOnly.

Step 2
Click on Connect to data, give the URL of your SharePoint site, and select the list.

Step 3
Select ViewOnly from the left panel and from top, select Insert > Forms > Display.

As you can see we have by default all columns coming from the list, but we can uncheck columns under Fields in right panel if we do not want those fields to be displayed on our page.

Step 4
Select FormViewer1 under ViewOnly and from the top drop-down, select “Item” and type “BrowseGallery1.Selected” in the textbox next to fx. It will bring records from the list and bind it with controls on the page.

Step 5
Select BrowseScreen1 and select arrow icon on the dashboard and type in the textbox next to fx button as below.

Select(Parent);
If(ComplainStatus.Value = “Completed”, Navigate(ViewOnly, ScreenTransition.Cover), Navigate(BrowseScreen1, ScreenTransition.Cover), Navigate(BrowseScreen1, ScreenTransition.Cover))

Click Save and publish. It will be saved to the list and once we click on the view arrow mark on the dashboard, it will redirect us to ViewOnly page if the status is completed; else, it will be navigated on default edit page based on a Status column value.

SharePoint 2013 Hosting – HostForLIFE.eu : How to Implement Custom Image Handler n SPFx Rich Text Editor Using Angular 4?

Jul 24th

Posted by Peter in European SharePoint 2013 Hosting

No comments

In my previous article, I described how to integrate Rich Text Editor in SharePoint Framework (SPFx) Angular webparts. Now, let’s see how do we implement custom image handler in the same. So, you are able to save the images uploaded in Rich Text Editor to the desired destination folder. Let’s directly go to the implementation with the below steps.

Get the ngx-quill editor instance.

Once the editor is created/rendered in our View, we will need to get the ngx-quill editor instance. It will be helpful to add our custom handlers to the controls in the editor or even you could add your own custom controls.

Use the onEditorCreated event to get the editor instance. Please find the below code snippet.

Component HTML file.

<quill-editor [(ngModel)]="DescriptionHF" (onEditorCreated)="editorCreated($event)">  
</quill-editor>

1 2	<quill-editor [(ngModel)]="DescriptionHF" (onEditorCreated)="editorCreated($event)"> </quill-editor>

Component.ts file

private editorInstance: any;  
private editorCreated(quill: any) {  
    this.editorInstance = quill;  
    var toolbar = this.editorInstance.getModule('toolbar');  
    toolbar.addHandler('image', this.imageEditorHandler.bind(this));  
}

1

2

3

4

5

6

private editorInstance: any;

private editorCreated(quill: any) {

this.editorInstance = quill;

var toolbar = this.editorInstance.getModule('toolbar');

toolbar.addHandler('image', this.imageEditorHandler.bind(this));

}

This event will be raised once the editor is created in the page, so we will have access to the toolbar of the Quill Editor. In the second line of the method, we get the toolbar module in the variable toolbar. Image control name in the quill toolbar is image. In the toolbar instance, we do have a method to add handlers.

The last line of code in the above method demonstrates how to register the custom image handler in quill-editor toolbar.

How to get current page context in the quill editor handler method?

If you notice in the above method, highlighted content bind(this) will get you the current page context inside the handler whenever an image icon is clicked in the quill editor toolbar.

How to insert the selected image in quill editor using image handler?

Once we are into the handler method the first thing we need to do is to get the selection range, i.e, to get the cursor range so we could insert the image where the cursor points to. To get the range of index use the below line of code in the handler,

const range = this.editorInstance.getSelection();

1	const range = this.editorInstance.getSelection();

Now, let’s pop up the image selection window using the default image control in the HTML. Create image control dynamically inside the handler and use its change event to process the selected image.

Please find the below handler method with all the functionalities,

private imageEditorHandler() {  
    if (this.editorInstance != null)) {  
    const range = this.editorInstance.getSelection();  
    if (range != null) {  
        let input = document.createElement('input');  
        input.setAttribute('type', 'file');  
        input.setAttribute('accept', 'image/*');  
        input.addEventListener('change', () => {  
            if (input.files != null) {  
                let file = input.files[0];  
                if (file != null) {  
                    var reader = new FileReader();  
                    reader.readAsDataURL(file);  
                    reader.onerror = function(error) {  
                        console.log('Error: ', error);  
                    };  
                    reader.onloadend = function() {  
                        //Read complete  
                        if (reader.readyState == 2) {  
                            var base64result = reader.result;  
                            //Write your code to upload image in your custom location  
                        }  
                    };  
                }  
            }  
        });  
        input.click();  
    }  
}  
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

private imageEditorHandler() {

if (this.editorInstance != null)) {

const range = this.editorInstance.getSelection();

if (range != null) {

let input = document.createElement('input');

input.setAttribute('type', 'file');

input.setAttribute('accept', 'image/*');

input.addEventListener('change', () => {

if (input.files != null) {

let file = input.files[0];

if (file != null) {

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onerror = function(error) {

console.log('Error: ', error);

};

reader.onloadend = function() {

//Read complete

if (reader.readyState == 2) {

var base64result = reader.result;

//Write your code to upload image in your custom location

}

};

}

});

input.click();

}

The change event listener should be registered before clicking the dynamically created file control.

We will be using FileReader to read the file and convert it into a base64 string and in the above code snippet, we got base64String in the variable base64result.

Once we got the base64string you can insert the image in the editor by using the insertEmbed method of quill editor instance like below,

this.editorInstance.insertEmbed(range.index, 'image', base64result);

1	this.editorInstance.insertEmbed(range.index, 'image', base64result);

In the above line, if you notice, there is range.index which is used to insert the image at the appropriate location in the editor.

How to save the image in a library in SPFx?

SharePoint provides a lot of REST API endpoints which could be helpful to manipulate data in SharePoint. Now, let’s see how to upload image to SharePoint from SPFx using REST API.

Method – POST

URL
{ReplaceYourSiteUrl}//_api/web/GetFolderByServerRelativeUrl(‘{ServerRelativeUrlOfFolder}’)/Files/add(url='{FileName}’,overwrite=true)

let requestUrl = currentWebUrl.concat(“/_api/web / GetFolderByServerRelativeUrl('{ServerRelativeUrlOfFolder}') / Files / add(url = '{FileName}', overwrite = true)”);  
let spOpts = {  
    headers: {  
        "Accept": "application/json;",  
        "Content-Type": "multipart/form-data",  
        'Content-Length': ""  
    },  
    body: FileObject  
};  
this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts);

1

2

3

4

5

6

7

8

9

10

let requestUrl = currentWebUrl.concat(“/_api/web / GetFolderByServerRelativeUrl('{ServerRelativeUrlOfFolder}') / Files / add(url = '{FileName}', overwrite = true)”);

let spOpts = {

headers: {

"Accept": "application/json;",

"Content-Type": "multipart/form-data",

'Content-Length': ""

},

body: FileObject

};

this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts);

The beauty of this code is that you have no need to pass the base64 to this API. You can directly pass the FileObject selected from the file control. Since we are mentioning content-type as multipart/form-data in API Request, SharePoint will handle it for you.

This article described just a sample about integrating the custom image handler in ngx-quill editor and how to insert it in the cursor point position and upload it at the desired location in SharePoint.

If you have any questions/issues about this article, please let me know in the comments.

SharePoint 2013 Hosting – HostForLIFE.eu : Migrate Files From Folder Share To SharePoint Online Using PowerShell

Jul 19th

Posted by Peter in European SharePoint 2013 Hosting

No comments

This tool allows you to migrate lists or files from your SharePoint on-premises document libraries or from your on-premises file shares and easily move them to either SharePoint or OneDrive in Office 365. It is available to Office 365 users.

In the latest version, Microsoft has introduced PowerShell cmdlets to perform migration that has all features of the SharePoint Migration Tool (SPMT).

Click here to download the SPMT latest version 2.1.100.0 (currently in open beta). The PowerShell .dll’s will be copied to %userprofile%\Documents\WindowsPowerShell\Modules location.

Copy the below script and paste it in a Notepad. Save the file as SPMTMigration.ps1.

# Module Location
$Global:ModulePath = "C:\Users\Sharepoint\Documents\WindowsPowerShell\Modules\Microsoft.SharePoint.MigrationTool.PowerShell"

# File Share Source Location
$Global:FileShareSource = "C:\Users\Sharepoint\Desktop\DeploymentAutomation"

# SharePoint Online Target Site Details
$Global:SPOUrl = "https://c986.sharepoint.com/sites/dev"
$Global:SPOCredential = Get-Credential
$Global:ListName="Documents"

# Import SPMT Module
Import-Module ($modulePath + "\Microsoft.SharePoint.MigrationTool.PowerShell.psd1")

# Create a migration session and initialize it
Register-SPMTMigration -SPOCredential $Global:SPOCredential -Force

# Add a new migration task to the registered migration session
Add-SPMTTask -FileShareSource $Global:FileshareSource -TargetSiteUrl $Global:SPOUrl -TargetList $Global:ListName

# Start the registered SPMT migration
Start-SPMTMigration

# Cancel the current migration session

Stop-SPMTMigration 

# Remove the SPMT migration session created
Unregister-SPMTMigration

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

# Module Location

$Global:ModulePath = "C:\Users\Sharepoint\Documents\WindowsPowerShell\Modules\Microsoft.SharePoint.MigrationTool.PowerShell"

# File Share Source Location

$Global:FileShareSource = "C:\Users\Sharepoint\Desktop\DeploymentAutomation"

# SharePoint Online Target Site Details

$Global:SPOUrl = "https://c986.sharepoint.com/sites/dev"

$Global:SPOCredential = Get-Credential

$Global:ListName="Documents"

# Import SPMT Module

Import-Module ($modulePath + "\Microsoft.SharePoint.MigrationTool.PowerShell.psd1")

# Create a migration session and initialize it

Register-SPMTMigration -SPOCredential $Global:SPOCredential -Force

# Add a new migration task to the registered migration session

Add-SPMTTask -FileShareSource $Global:FileshareSource -TargetSiteUrl $Global:SPOUrl -TargetList $Global:ListName

# Start the registered SPMT migration

Start-SPMTMigration

# Cancel the current migration session

Stop-SPMTMigration

# Remove the SPMT migration session created

Unregister-SPMTMigration

Open PowerShell window and run the following command.

>cd "<folderlocation>"

1	>cd "<folderlocation>"

folderlocation – where the SPMTMigration.ps1 file is saved

Run the following command

>.\SPMTMigration.ps1

1	>.\SPMTMigration.ps1

Enter the SharePoint Online site credentials in the pop-up and enter OK. After a few minutes, the files from folder share will be migrated to SharePoint Online site.

Thus, in this blog, you saw how to migrate files from Folder Share to SharePoint Online using PowerShell based on the SharePoint Migration Tool (SPMT) migration engine.

SharePoint 2013 Hosting – HostForLIFE.eu : How to set the list view scope in SharePoint Online using PnP PowerShell?

Jul 18th

Posted by Peter in European SharePoint 2013 Hosting

No comments

I have a documents library named “Shared Documents” in which I want to set “Show all items without folders” property for “All Documents” list view.

You can download setup files from the releases section of the PnP PowerShell repository. Copy the below script and paste it in a notepad. Save the file as SetListView.ps1.

# Input Parameters  
$siteURL="https://c986.sharepoint.com/sites/dev"  
$listName="Shared Documents"  
$viewName="All Documents"  
  
# Connect to SharePoint Online site  
Connect-PnPOnline –Url $siteURL –Credentials (Get-Credential)  
  
# ViewScope Enum  
$viewScope=[Microsoft.SharePoint.Client.ViewScope]::Recursive  
  
# Update the list view  
Set-PnPView -List $listName -Identity $viewName -Values @{Scope=$viewScope}

1

2

3

4

5

6

7

8

9

10

11

12

13

# Input Parameters

$siteURL="https://c986.sharepoint.com/sites/dev"

$listName="Shared Documents"

$viewName="All Documents"

# Connect to SharePoint Online site

Connect-PnPOnline –Url $siteURL –Credentials (Get-Credential)

# ViewScope Enum

$viewScope=[Microsoft.SharePoint.Client.ViewScope]::Recursive

# Update the list view

Set-PnPView -List $listName -Identity $viewName -Values @{Scope=$viewScope}

ViewScope enum:

Open PowerShell window and run the following command.

>cd "<folderlocation>"

1	>cd "<folderlocation>"

folderlocation – SetListView.ps1 file location

Run the following command

>.\SetListView.ps1

1	>.\SetListView.ps1

SharePoint 2013 Hosting – HostForLIFE.eu : Is Server Side Code Dying Out In SharePoint?

Jul 10th

Posted by Peter in European SharePoint 2013 Hosting

No comments

SharePoint Online is a Software as a Service (SaaS) offering from Microsoft which is part of Office 365 suite. In the SaaS model, we only consume the service provided by the service provider that we need to run our business. These services or applications run on the provider’s cloud infrastructure. We can consume these services on various devices including browsers and mobile devices. As we only consume the services, we do not have any control or permissions on the infrastructure.

This means a lot in SharePoint development. As we cannot deploy our solutions or assemblies to the server, the only possible way of development is remote development. SharePoint has provided numerous client-side APIs, REST APIs to connect to the SharePoint site remotely and perform the work.

End of Server Side Development?

There are two major scenarios to consider while developing the solutions for SharePoint irrespective of whether it is OnPremise or Online version.

Point 1 – Future compatibility of your solution

While developing the solutions for SharePoint OnPremise, we can use the full trusted farm solutions by making use of most server-side APIs. There is nothing absolutely wrong in it. But, what are the CONS of this approach?

The server-side code is version dependent. That means the same code might not work for the next version of SharePoint or the APIs used might get deprecated.
The server-side code needs to be tested every time after the cumulative updates to the server.
How to migrate this code when the business decision demands SharePoint version upgrade or moving to cloud (SharePoint Online)?

Point 2 – Future directions from Microsoft

The future directions from Microsoft are to develop solutions using remote APIs. The major advantage of this is the code will work independently of the SharePoint platform being used. It may be any version of OnPremie or SharePoint online. The same code will work effectively irrespective of the SharePoint version it is running on. The future OnPremise version of SharePoint i.e. SharePoint 2019 has more focus on client-side development.

Commonly used SharePoint Client Side Development Scenarios

To have the solutions developed in future ready manner, here are few approaches being commonly used by SharePoint developers.

Approach 1 – SharePoint Framework (SPFx)

Although SPFx launched recently, it attracted the attention of all developers. SPFx offers easy development option for Modern sites in SharePoint. Microsoft has started to support SharePoint framework based development on SharePoint 2016 OnPremise environment by releasing Feature pack 2 and are promoting the development using SPFx on both OnPremise and Online environments. Microsoft has also announced that SharePoint Framework will be an integral part of the new OnPremise version of SharePoint i.e. SharePoint 2019. SPFx development is purely based on HTML and JavaScript, which offers faster performance.

Approach 2 – Client Side Object Model (CSOM)

CSOM offers remote APIs to connect to SharePoint environment and perform the operations. It is generally used to perform CRUD operations with SharePoint.

Approach 3 – Client-Side JSOM

JavaScript Object Model (JSOM) supports performing operations remotely against SharePoint using JavaScript. JSOM is used widely by web developers.

Approach 4 – Content Editor (CEWP) and Script Editor WebParts

Content Editor (CEWP) and Script Editor WebParts are more close the SharePoint developers. These WebParts are used very commonly to perform an operation on a single page. These can be effectively used to add HTML content on SharePoint page, as well as running scripts for any DOM (Document Object Model) manipulation on SharePoint page.

Although heavy usage of these webparts brings in the governance issues, these webparts are most popular in SharePoint developer community.

Approach 5 – PowerShell

The PowerShell scripting tool also offers APIs to connect to local as well as remote SharePoint and perform the complex tasks. Initially, PowerShell was of only SharePoint Administrator’s favorite tool. However, over the time it catched the attention of developers too.

Approach 6 – REST APIs

REST APIs offers to perform basic CRUD operations against SharePoint objects such as lists, libraries, and sites. REST APIs can be combined with any of the above-mentioned approaches to achieve the certain functionality in SharePoint. SharePoint out of the box supports a vast range of REST APIs for developer needs.

Approach 7 – SharePoint Designer (SPD)

SPD is being used since ages now. The SharePoint Designer tool allows to connect to SharePoint environment remotely and customize it. SharePoint Designer is the obvious choice for developers to customize SharePoint forms, develop workflows, copy or move the documents.

Microsoft did not release the SharePoint Designer version after 2013, but the same can be effectively used against SharePoint 2016 and Online version.

Approach 8 – JS Link

JS Link supports customizing rendering of list views and list forms. This is replacing the approach of directly adding content or script editor webparts on-page and helped bring some governance around how JavaScript can be injected to SharePoint site.

Approach 9 – Graph APIs

Microsoft Graph provides unified APIs to securely connect to Office 365 applications including SharePoint Online and fetch the information. Graph APIs are not yet available on the OnPremise version of SharePoint.

Approach 10 – Use of supporting infrastructure

SharePoint development can be effectively combined with additional supporting infrastructure like MS Flow, Power Apps, Power BI, MS Azure, etc.

Peter

Posts by Peter

SharePoint 2013 Hosting – HostForLIFE.eu : How To Update The Hyperlink In The SharePoint Online List Items Using PnP PowerShell?

SharePoint 2013 Hosting – HostForLIFE.eu : PowerApps In SharePoint Online

SharePoint 2013 Hosting – HostForLIFE.eu : How to Implement Custom Image Handler n SPFx Rich Text Editor Using Angular 4?

SharePoint 2013 Hosting – HostForLIFE.eu : Migrate Files From Folder Share To SharePoint Online Using PowerShell

SharePoint 2013 Hosting – HostForLIFE.eu : How to set the list view scope in SharePoint Online using PnP PowerShell?

SharePoint 2013 Hosting – HostForLIFE.eu : Is Server Side Code Dying Out In SharePoint?

BLOGROLL

Featured On

Peter

Posts by Peter

SharePoint 2013 Hosting – HostForLIFE.eu : How To Update The Hyperlink In The SharePoint Online List Items Using PnP PowerShell?

SharePoint 2013 Hosting – HostForLIFE.eu : PowerApps In SharePoint Online

SharePoint 2013 Hosting – HostForLIFE.eu : How to Implement Custom Image Handler n SPFx Rich Text Editor Using Angular 4?

SharePoint 2013 Hosting – HostForLIFE.eu : Migrate Files From Folder Share To SharePoint Online Using PowerShell

SharePoint 2013 Hosting – HostForLIFE.eu : How to set the list view scope in SharePoint Online using PnP PowerShell?

SharePoint 2013 Hosting – HostForLIFE.eu : Is Server Side Code Dying Out In SharePoint?

BLOGROLL

Featured On

Tags