SHAREPOINT ONLINE/OFFICE 365: HOW TO DEVELOP APPROVAL WORKFLOWS ON LIST ITEM UPDATE EVENT USING MICROSOFT FLOWS

In this article we will see how to deal with SharePoint Online List Item update event.

For the demo in this article I will consider a business scenario where on update of any Product in the Product list, an approval process will execute and an email is send to approver for the selection of Price Range for the Product just updated.

To start with a demo I have a Product List in SharePoint Online Site as shown below-

2

Go to “Flow” Menu and Click on “Create a Flow”

3

Here we have two choices either we can use any available workflow template that suites our requirements or we can create a new one from scratch

4

For this demo we will create a Flow using blank template

Go to Flow Site by clicking “See you flow” links

5

Click on “Create from blank” this will launch Workflow Designer

6

On the Workflow Designer, Select the Trigger

We can select trigger from the any of the available services as shown highlighted below-

7

Select SharePoint Online as target service & select for the Trigger “SharePoint-When an existing item is modified”

8

Provide the Title to the Workflow “Product Details Modification Approval Request”

9

Create SharePoint context by providing Site URL and List Name as shown-

10

You can optionally rename the Step by selecting “Rename” option as shown below-

11

Here I have changed the name of Step to “Get SharePoint Context”

12

Add another action to the workflow by clicking “Add an action” option

13

Send email by selecting “Office 365 Outlook” Service and “Office 365 Outlook-Send approval email” action

14

Rename the name of Step to “Request Approval”

15

Choose or approver’s email in “To”, here I am just selecting the email of the person who has originally created the Product in list by choosing “Created By Email” field

Specify Subject as applicable

Specify User Options that allows approver to select the approval options from within the mail

Specify the Body content as required. This content can consist of dynamic tokens provided by Workflow runtime as shown below-

16

Update List Item by selecting “SharePoint Online” Service and “SharePoint-Update item” action

17

Rename the step to “Update item”

Specify Site URL & List Name

In Id field select “ID” token provided by workflow runtime. This token represents the List item Id of the item that triggered this workflow to execute.

It is important to note that values to all mandatory fields in the list must be provided. If you don’t want to change the values you can choose same values again.

18

For Title field we have selected “Title” token that represent current value present in list for the Title field of this item

19

In “Product Price Range” field choose “SelectedOption” token that will hold the value selected by the approver from within the mail

20

Once all the Steps are configure as required we can save the workflow by clicking “Save flow”

21

Click “Done” to return back to the workflow dashboard

22

On the workflow dashboard we can see the details of services used with in this workflow

23

Now modify and the Product in Product List and notice the “Product Price Range” field which is currently set to “Low”

24

Once the Product details has been changed, this will trigger the workflow that we have developed

25

On execution the workflow we can see a new email hitting the inbox of the approver

26

Let’s consider the approver submitted “High” as approval option

27

This action will update the “Product Price Range” field for the list item to “High” as shown below-

28

Hope you find it helpful.

SharePoint Online/Office 365: How To Develop Approval Workflows On List Item Add Event Using Microsoft Flows

Microsoft introduces Flows that enables development of Workflows for SharePoint Online and other more than 50 services over the cloud.

In this article we will see the demonstration of Microsoft Flow around SharePoint Online and will deal with List Item Add Event.

For this demo let’s consider we have a Product Catalog List which required Approval to happen with each new item added.

We have a Product List as shown below-

2

Go to “Flow” Menu and Click on “Create a Flow”

3

Here we have two choices either we can use any available workflow template that suites our requirements or we can create a new one from scratch

4

For this demo we will create a Flow using blank template

Go to Flow Site by clicking “See you flow” links

5

Click on “Create from blank” this will launch Workflow Designer

6

On the Workflow Designer, Select the Trigger

We can select trigger from the any of the available services as shown highlighted below-

7

Provide the title of the Workflow

Select SharePoint Trigger “SharePoint-When a new item is created” that will fire when a new item is added to SharePoint Online List

8

Provide Site Url and List name to setup SharePoint context

Add an action to the Workflow by clicking “Add an action”

9

Select approval action by selecting “Outlook.com – Send approval email”

10

Select “Approver Email” in “To”, since this “Approver” is a People Field on SharePoint,

Workflow designer is intelligent enough to represent each property as a separate field

11

Add a condition to the workflow by clicking “Add a condition”

12

In the condition we are check if Approver Approved the Production or not.

If Approved then send approval email to requestor else delete the Product and send Email to requestor

13

Choose “Created By Email” field in “To” as it will hold the Email Id of the Requestor (Person added the Product)

Choose “Approver Email” field in “CC” to send a copy of the mail to Approver also

14

If not approved, delete the Product by choosing action “SharePoint – Delete item”

15

 

In the “Delete item” action specify SharePoint Site Url and List Name

Select “ID” token for the field “Id”. This token will hold the ID of the List Item that trigged the Workflow

16

After deleting the item we, send email to Requestor by choosing “Created By Email” in “To” field
Specify the body of email as desired
Choose “Approver Email” field in “CC” to send a copy of the mail to Approver also

17

Once all the actions are configured as required save the workflow by clicking “Save flow”

18

With this we are all done and now it is time to test the workflow

To test the Workflow, add a new item in the Product List. Specify Title and Approver and Save the Product.

Save action will trigger the Workflow that we just created

19

As a result of Workflow execution Approve will get the Email with “Approve” and “Reject” options

20

Beauty of this implementation is that Email contains clickable options for approver to submit the approver’s choices from within the email

Here Approver rejects the Product

21

As a result of this Rejection, the workflow will delete the Product from the List and send an Email Notification to Requestor and Approver informing same.

22

Product has been deleted from the list

23

Now again add a new Product to the list that will again trigger the event to execute the workflow

24

Product has been added

25

As a result of Workflow execution Approve will get the Email with “Approve” and “Reject” options

26

This time Approver approved the Product

27

As a result of this Approval, the workflow sends an Email Notification to Requestor and Approver informing same.

28

Hope you find it helpful.

PowerShell Automation: How to Send Email Notifications

While developing some of the automation tools I was required to send emails to the intended users sometimes to inform them about the operational progress or otherwise.

In this article I will take you through the steps to develop PowerShell functions that can send emails to the intended participants.

Let’s look into the code base used for this article-

Step – 1: This will be the final step where we are calling the “Send-Email” function, implementation of which can be seen in the upcoming steps.

Step – 2: In this step I have shown the distribution list comprising of intended participants, here in this article I choose to make it hard coded with in the code which is an absolutely bad idea J and should be avoided. Rather we should have external content source (CSVs, SharePoint Lists) to configure this list of intended recipients.

Step – 3: In this step we have declared a variable holding subject for the email

Step – 4: In this step we prepare the body of the email. It is worth noting that you can use any valid HTML to prepare the mail body. Make sure you don’t use CSS Classes as they won’t work here. You can use inline styles to format the html.

Step – 5: In this step we will call the helper function and pass on the data we have prepared in previous steps. This function has the responsibility to send the email to the required recipients.

1

 

Step – 6: In this step we get the Sender’s Id. As a part of the best practice this should be a generic Id.

Step – 7: In this we get SMTP Server Address to relay through the mail

Step – 8: In this step we are creating the array of recipient since “Send-MailMessage” function uses Array as parameter return type to “-To” parameter.

Step – 9: In this step we are calling “Send-MailMessage” function by passing required parameters as shown below-

2

That’s all for the code.

On successful execution we will get a new email in the Inbox as shown below-

3

That is all for this simple demo.

Hope you find it helpful.

SharePoint Online/2016/2013: How To Upload Large Files Using PowerShell Automation

Uploading large files to SharePoint On-Premise or Online is an obvious problem during data migration from any external systems like Lotus Notes.

Here is one of such errors which we might encounter while trying to upload a file of size greater than 250 MB-

1

In this article I will explain a data upload strategy where we can split a large file into multiple chunks of smaller size.

Solution Architecture Diagram

For better understanding we can refer to the following solution architecture diagram-

2

Based on this diagram we can conclude the following facts-
1. This solution can be hosted on multiple servers to launch parallel uploads
2. This solution can consume data from Network File Shares
3. Once data file is retrieved (say of size 300 MB), this solution will split the file (100 MB) automatically based on the pre-configured chunk size (which should not exceed the size limit of 250 MB)
4. Each chunk then appended to the file uploaded in multiple iterations

In order to start with this demo we would need a SharePoint Document Library in SharePoint Online (or On-Premise) Site as shown below-

3

Another prerequisite to demo is to have files of various sizes that we can use to upload to the document library.

I made use of following command line utility to generate files of various sizes. This utility takes destination folder path and size of the file in KBs as input.

Here is the usage example of the command line utility-

fsutil file createnew "C:\Prashant\Self Paced Training\Sample Files\2GB.txt" 2147483648

Similarly I have generated other files too as shown below-

4

Now let’s dive down into the code to understand the actual implementation.

Step 1: Declare a variables to hold the document library name & folder path. For production use I recommend to have these values in an external configuration file.

Step 2: Reading files from the folder specified in path variable in Step 1

Step 3: Loop through all the files and pass each file to the “UploadLargeFiles” function along with the document library name

5

Step 4: Generate unique upload id & get file name of the file to be uploaded

Step 5: Get handle on document library object and load the root folder (or any target folder) with in the document library

Step 6: Calculate the block size to be uploaded and total file size (as shown in the architecture diagram)

Step 7: Read the bytes from the source file and set the read buffer based on the block size

6

Step 8: Read the bytes based on the buffer limit that we set in earlier steps

7

Step 9: Check if this is the first chunk that is being uploaded, if yes then add a new file to SharePoint Document Library, get the file content based on the buffer size for the chunk and call “StartUpload” function that is defined under “Microsoft.SharePoint.Client.File” class. This will add the file to the document library but with small bunch of content only.

Step 10: Check if this is not the first chunk that is being uploaded, if yes then find the file in document library and get the handle on it

Step 11: If this is another chunk of data which is not the last chunk, this chunk will be appended to the same file by using “ContinueUpload” function that is defined under “Microsoft.SharePoint.Client.File” class. This will append the content to the file identified by Upload Id that we have initialized in earlier steps.

Step 12: If this is last chunk of data, this chunk will be appended to the same file by using “FinishUpload” function that is defined under “Microsoft.SharePoint.Client.File” class. This will append the content to the file identified by Upload Id that we have initialized in earlier steps and commits the changes to the file. Once this function completes successfully the changes will be made persistent to the file.

8

Step 13: Perform exception handling and call the “UploadLargeFileToLibrary”

9

I recommend to read the documentation on Microsoft.SharePoint.Client.File class and understand functions carefully before using it.

Once we execute this script we can see the following information-

  1. File Name to be uploaded
  2. Chunk size
  3. Total Time taken to upload the files

It is important to note that total time taken to upload the files may vary depending on the hosting environment.

File Size to be uploaded: 10 MB

10

File Size to be uploaded: 50 MB

11

File Size to be uploaded: 500 MB

12

File Size to be uploaded: 2 GB

13

Once the script executed successfully we can see the respective files uploaded to the SharePoint Online Site as shown below-

14

That is all for this demo.

This article is equally applicable for both SharePoint Online & On-Premise Versions.

Hope you find it helpful.

TypeScript: How to Include External JavaScript Frameworks to TypeScript Projects

While working in Typescript Projects I found it tricky to include external JavaScript Frameworks like JQuery.js, Moment.js and so on.

I tried to look over on google to find some help around it but don’t find any step by step tutorial to get it implemented.

The purpose of this blog post is help Typescript newbies with projects involving external JavaScript Frameworks.

1

Note: I am using Visual Studio 2015 as development IDE and these steps are specific to Visual Studio only.

In order to start with this demo, first we will create a “HTML Application with Typescript” project using Visual Studio Typescript Template

Enter “Project Name, Location and Solution Name” as required and click OK.

2

Once the Project has been created successfully we can add the require typescript code in “App.ts” file while html elements in “index.html” file

For the sake of this demo I have added simple code that requires JQuery.js

In the index.html file we can see JQuery code construct as “$(document).ready ()”, which requires “JQuery.js” as dependency.

3

In “App.ts” file I have added “$(#content).append()” which requires JQuery to be included into the typescript.

4

Now let’s try to run this project by pressing “F5” and see what we get.

And Boom. We get this error since we don’t have JQuery file included in this project as shown in the following screen shots-

5

We can further see the error message generated by runtime as below-

6

In type script projects that required external JavaScript Frameworks, we need to first install the Type Definition for the respective framework.

For example in this demo since we need to include JQuery to the project so what we need to first install Type Definition for JQuery

We can install JQuery Type Definition by using “NuGet Package Manager” from the “Tools” Menu as shown in the screen shot below

7

Once the Package Manager launches, search for “jQuery for SharePoint”

Search results will show you “jquery.TypeScript.DefinitelyTyped” which needs to be installed for this project

Select the Project and Click “Install” to install the type definitions as shown below-

8

Click “OK”, when asked to proceed with modifications to the project as shown below-

9

This will install the type definitions for this project and that we can see in the output window as shown below-

10

Once type definition has been installed we can see a new folder structure in the solution explorer which will  be having new definition file for JQuery “jquery.d.ts” as shown below-

11

Next Step is to include the reference of type definition in the code files (*.ts) like shown below-

Add /// <reference path=”scripts/typings/jquery/jquery.d.ts” /> at the top of (*.ts) files

12

Now in the html files, wherever you need to consume JQuery Framework add the reference of JQuery file as we usually do in normal web application projects

Add <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> to the html files

13

Once all the changes has been made to the code files, let’s run the project again using “F5” and this time we can see it through without any errors.

14

Though this demo talks about including JQuery but this holds true for other JavaScript Frameworks.

Hope you find it helpful.

TypeScript: How To Install TypeScript Plugin for Visual Studio 2015

In this article we see the simple step by step process to install Typescript Plugin for Visual Studio.

Important to note that Typescript is already included with the base installation of Visual Studio 2015 but using the Typescript Plugin we can get the latest version of the Typescript SDK to be used with Visual Studio. Though we will consider Visual Studio 2015 in this demo but process remains the same for Visual Studio 2015 and Visual Studio 2017.

We can download the Typescript Plugin from the following location-

http://www.typescriptlang.org/index.html#download-links

As highlighted select required version of Visual Studio that you want to install this plugin on to.

We will choose Visual Studio 2015 for this demo

1

On clicking the link will take us to the Plugin download page as shown below-

Click download to start the download

2

You can run or save the file as required

3

On execution of the Plugin executable, Install wizard triggers and we can see the following screens

Agree the License Terms and click Install

4

Monitor the progress and proceed

5

Close the Setup once it is completed.

6

Now launch Visual Studio, create new project and we can see a project template under TypeScript Node as shown below:

7

We can use this template to start with a TypeScript Project.

Hope you find it helpful.

SharePoint Framework: How to Prepare Environment for Development with SharePoint Framework

Microsoft have introduced another development methodology called as SharePoint Framework, which is claimed more flexible than earlier approaches like Farm Solutions, Sandbox Solutions, SharePoint Add-ins.

SharePoint Framework is compatible with a complete Web Development Stack with an inherent support to all modern JavaScript frameworks like React, Knockout, Type Script and so on.

In order to get a better insight I would recommend you to refer to the Webinar by Andrew Connell.

In this article, we will look for steps required to get developer machine ready for starting with SharePoint Development using SharePoint Framework.

Following image displays the steps to set up the development machine:

1

Step 1: Installation of Node JS

Search for “node js” or and navigate the link as shown below to reach to the official download page for Node JS.

You can also follow the direct link to download Node JS: https://nodejs.org/en/

2

As per recommendation from the Technical Community, it is advisable to go for LTS Version of Node JS.

Download the latest version available as shown below:

3

Run the installer and follow the default options as shown below:

Click Next

4

Accept license agreement and Click Next

5

Leave the default installation directory and Click Next

6

Continue with default features and Click Next

7

Click Install to start installation of Node JS

8

Wait until installation has been completed

9

Click Finish once the installation has been completed

10

Now in order to test the installation, launch Windows PowerShell Command Prompt with Administrator privilege

Type command “npm -v”, If installation is successful you can see the version of Package Manager (NPM).

Note: NPM is the Package Manager that used for dependency management, so that you no longer have to manually download and manage your scripts.

11

Step 2: Visual Studio Code

Search for “visual studio code” or and navigate the link as shown below to reach to the official download page for “Visual Studio Code”.

You can also follow the direct link to download Visual Studio Code:  https://code.visualstudio.com/

12

Since my development environment is using Windows Server 2012 R2 as base operating system, I can download the suitable version as per my needs.

1314

Once downloaded run the installer and proceed as follows-

Click Next to initiate the installation

15

Accept the license agreement and click Next to continue

16

Keep the defaults as it is and click Next to continue

17

18

Select required options and click Next

19

Click Install to start the installation

20

Wait until installation has been completed

21

Click Finish to complete the installation process

22

On completion, install will launch the Visual Studio Code window to ensure installation is successful.

23

Step 3: Install Yeoman  & Gulp

Yeoman scaffolds out a new application, writing your build configuration (e.g Gulpfile) and pulling in relevant build tasks and package manager dependencies (e.g npm) that you might need for your build.

Gulp is the Build System used to build, preview and test your project.

In order to install Yeoman & Gulp launch windows PowerShell command prompt with Administrator privilege

Enter command “npm  install  -g  yo  gulp” and enter

This command will perform global installation of Yeoman and Gulp

24

Wait until installation has been completed

25

262728

Once done successfully it will return with command prompt without any error message.

Step: 4 Install SharePoint Yeoman Plugin (SharePoint Client Side Libraries)

In order to install SharePoint Client Side Libraries enter following command

“npm install  -g  @microsoft/sharepoint”

29

Wait until the installation has been completed

3031

Step: 5 Install SPFX Developer Certificate

Local Workbench Site, which is used to test the WebParts locally with using SharePoint Context, will notify you with the error that it is not configured to load scripts from localhost.

In order to avoid this error message we need to install SPFX Developer Certificate by using the following command

“gulp trust-dev-cert”

32

Wait till installation has been completed

Click Yes on the Security Warning to accept installation of certificate

34

With this Step 5, SharePoint Framework and all related dependencies are installed successfully and it is the time verifies the installation and in the following steps, we will perform validations.

Step: 6 Create SharePoint Project

Enter following command “yo  @microsoft/sharepoint”

35

This command will initiate the Project Configuration for SPFX based SharePoint Solution

This command will take input from the user to configure the project attributes like project name, description, directory, development environment and so on.

36

Input all information required and enter to proceed with Project configuration.

Wait till Project has been created

3738

Once project has been created successfully, we will get command prompt returned without error.

Step: 7 Execute First Project

Now this is the time to finally run the Project and testify the SharePoint Framework.

In order to run the project enter the following command

“gulp  serve”                      (case sensitive so be careful)

39

Wait until the project initialize

40

Once the Project initialized successfully, we can see SharePoint Workbench launch WebPart placeholder, mimicking SharePoint Web Page.

On this page, you can add the WebPart that has been deployed locally without using SharePoint context.

41

On click of Add button we can see available WebParts listed, select the WebPart in question and add it to the Page

42

Once added we can see the WebPart on the Page, this ensures that we have done all configuration as expected

43

In order to open the Project Code we can right click the solution directory choose option “Open with Code”

44

And we can see the Visual Studio Code launched with project dependent files

45

Command Summary

46

That is all for this demo.

Hope you find it helpful.