How to Add List View command Set To both List And Document Library using SPFX Extension

SharePoint Framework extensions extend the user experience toward the SharePoint Online Modern Framework List and Library to render custom components.

There are three types of SharePoint framework extensions:

1. Application level customizer – basically used to render custom component to defined placeholder example Top Navigation, Footer, etc.
2. Fields level customizer – basically used to render the field level modification within views.
3. List View Command Set – basically used to render a new action at the list view level. 

In this article, we are going to discuss how to enable List view command set to Generic List and Document library level.

Let’s get started.

Step 1 - Generate SharePoint Framework Extension

Open the command prompt and create a blank folder

1. md Extension  

Step 2

Navigate to the created directory.

Step 3

Run the  yeoman command,

1. yo@microsoft/sharepoint   

• Enter the name of Solution: Metadata
• Select “SharePoint Online” baseline package you want to target for your component(s).
• Select “Use the current folder” place the files.
• Select “Extensions” to the type of client-side component.
• Select “ListView Command Set” as a type of client-side extension
• Enter command Set name: Metadata

Yeomen will take a couple of minutes to install required dependencies and scaffolding the SPFX project. Finally, you will get the below “congratulations “ message.

Step 4

Navigate to Visual Studio Code to open the solution.

1. Type Code .  

It will open the project into an open source IDE, i.e., Visual Studio Code (condition - Visual Studio Code needs to be installed). Navigate to SharePoint Folder Structure -> assets -> element.xml.

Custom Action tag has Registration Id of 100 which means it's associated with Generic List. We need to change the Registration Id from 100 to 101 which means it will associate the SPFX extension component to Generic Library.

NoteIf you want to use the same custom SPFX extension to both list and library, copy and paste the same custom action and section one RegistrationId assign to 101. 

Step 5

Open Integrated Terminal to build sppkg package using gulp command,

Step 6 - Run Gulp Build

It will build a solution and create two new folders - Lib and Temp

Step 7 - Run Gulp Bundle –ship

It will bundle all JS and CSS files and make it ready to bundle files in CDN. It creates a dist folder.

Step 8 - Package Deployment at Site Collection Level

The package can be deployed at Tenant Level App Catalog or Site collection level App Catalog. It really depends on the project scenario and governance policies to the usage of the designed app which is the preferred option. Let's proceed with site collection level app catalog.

Navigate to Modern site collection.

Go to Site Content -> App for SharePoint -> Upload the .SPPKG file.

Click to deploy the solution.

Step 9 

Navigate to Site Content.

Click New -> Add APP.

Step 10

Add Apps to Site Collection Level.

NoteWait for a couple of seconds to activate the solution.

Step 11

Browse any generic template created  list and select item, you will find Command One and Command Two at the top of list view. Click on the command One text, it will prompt a custom message given in SPFX Extension solution.

Step 12

Browse any generic template created Library and select item, you will find Command One and Command Two at the top of list view. Click on the command One text, it will prompt a custom message given in SPFX Extension solution.

Hope you have learned something new in this article. Stay tuned for more related articles to get more insights and learning.

How To Enable Digital Signature In Digital Signed PDF Using Column Formatting

This article will walk you through one of the problems faced during the creation of a PDF and will provide a workaround solution.

 

Problem Statement

 

A business user uses a digital signature over a PDF file and stores into a SharePoint Online document library to maintain the document repository. When the user clicks the name of the document within the document library, it shows the signature space as empty.

Approach

 

When the user downloads the file locally from the document library and opens in the browser, it shows a digital signature.

To make it work the same in a document library, we need to follow the below steps to apply column formatting.

1. Browse the document library.
2. Select the name column.
3. Select "Column Settings".
4. Select "Format this column".

NoteA user needs a minimum to contribute access to do this operation. 

 

Column formatting needs to be applied with the column "name".

1. {  
2.    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",  
3.    "elmType": "a",  
4.    "txtContent": "@currentField",  
5.   
6.    "attributes": {  
7.       "target": "_blank",  
8.       "href": "='https://mittal1201.sharepoint.com/sites/CommSite01/DigitalSignedPDF/' + [$FileLeafRef]+'?web=1'"  
9.    }  
10. } 

After applying and refreshing the browser, again, click on the name of the digitally signed PDF. The browser shows a digital signature.

Hope you learned something new in this article.

Synchronize SharePoint Online Security Group Users To Lists Using MS Flow

Microsoft Flow is a SaaS-based platform that allows power users to send an email to a group of users. MS Flow doesn't support sending a direct email to SPO Group. Let's have a look at the scenario and solution to get started.

Scenario

If we need to send an email to SP Groups using MS Flow, it doesn’t support sending emails to SPO Groups. To make it work, a developer needs to store all the users as list items because an SPO List item can be used as “To” to send an email.

Start with the solution

Create a list with key & value pair as string type. Add Key as Group Name and MS Flow will add the users as the values against the defined key.

MS Flow at a glance

MS Flow is a scheduling activity that can be defined periodically as per the requirement, i.e., hourly, daily, weekly, monthly etc.

Let's start step by step.

Step 1

Recurrence is added as a trigger point to this flow. It can be defined as per the requirement and it works like a scheduled job.

Step 2

Initialize a variable, it will be used to store all email addresses with defined delimiter separator.

Variable name SPOGroupMembers of string type.

Step 3

Get Item from the list named GroupUsers. This list has two columns, consisting of a “Single Line Of Text”.

Step 4

Apply for each loop. The list can have multiple keys.

Add an action “Send an HTTP request to SharePoint”. Three properties are important for this action.

1. Site Address - It should be the URL of the site collection.
2. Method - Get request.
3. URL - “_api/Web/SiteGroups/getbyName(“Column Name”)/users?$select=Email

Step 5

Add the action Parse JSON. It expects the payload from the above request. To get the payload or JSON, the response can be obtained from the below article.

• How To Get Payload Request Data Using Microsoft Flow

Take out the payload from the HTTP request and paste it into the Schema section.

Step 6

Get the result after parsing the JSON. Loop through the result and store it into the above-created variable, i.e., SPOGroupMemebers with “;” as delimiter.

Step 7

Update the SPO List Item with SPOGroupMemebers Variable.

Output

SPO Group has two users -

SPList after running the flow will look like below.

Hope you will like it and Happy Coding.

How To Get Payload Request Data Using Microsoft Flow

To get the payload data from SharePoint Online, a developer needs to use either Postman or Custom Scripts. Usually, it’s a part of the solution or API. However, in some scenarios, developers need to use a payload outside the custom solution. Then, it’s not feasible to write a custom code or use Postman using the Client ID and Client Secret to get the payload or JSON response.

MS Flow is one of the easiest and quickest alternatives to get the JSON response from a SharePoint Online request. JSON response, i.e., the payload, can be used to identify the structure format, which helps to parse the data accordingly.

We can create a 3-step (trigger + action) flow that allows us to send an email quite securely (no need to handle the password separately).

Let’s explore how MS Flow is the quickest and easiest turnaround.

Step 1

Log in here with authorized credentials.

Step 2

Select My Flows -> New -> Create from blank.

Step 3

To start with the flow, we need to set the trigger point. So, I used recurrence as the trigger point to demonstrate.

Frequency can be set as per the requirement; I set it to 1 minute for demo purposes.

Step 4

Generate the payload for HTTP Request, i.e., Group Details - Group Name, “Approver” with the email selection.

Step 5

Send an email with the payload body.

Step 6

Save and wait for a minute. Also, you can trigger it manually.

Check your email account. You must have received a JSON payload with the data on the defined email address.

Example

1. {  
2.     "d": {  
3.         "results": [{  
4.             "__metadata": {  
5.                 "id": "https://mittal1201.sharepoint.com/sites/CommSite01/_api/Web/GetUserById(16)",  
6.                 "uri": "https://mittal1201.sharepoint.com/sites/CommSite01/_api/Web/GetUserById(16)",  
7.                 "type": "SP.User"  
8.             },  
9.             "Email": "demo@mittal1201.onmicrosoft.com"  
10.         }, {  
11.             "__metadata": {  
12.                 "id": "https://mittal1201.sharepoint.com/sites/CommSite01/_api/Web/GetUserById(6)",  
13.                 "uri": "https://mittal1201.sharepoint.com/sites/CommSite01/_api/Web/GetUserById(6)",  
14.                 "type": "SP.User"  
15.             },  
16.             "Email": "manoj@mittal1201.onmicrosoft.com"  
17.         }]  
18.     }  
19. }  

To verify the result, I have SP Group with two users. I have got the same in the above email.

That's it. I hope this article is helpful to you. Happy Coding!!!

Online Free Webinar | How to use Elevation with SharePoint Framework using Custom Web API

Speaking | How to use Elevation with SharePoint Framework using Custom Web API

Online Free Webinar: How to use Elevation with SharePoint Framework using Custom Web API

Click here to register:  https://www.c-sharpcorner.com/events/how-to-use-elevation-with-sharepoint-framework

#FreeWebinar #SPO #SPFX 

Online Webinar Recording | Automate Business Process using Microsoft Azure Bot, MS Flow,and SharePoint Online

I delivered an online webinar -> Automate Business Process using Microsoft Azure Bot, MS Flow and SharePoint Online.

Business Use Case -> How to automate the internal manual job like send and receive visa file as well as extract the information and consolidate & store in SharePoint Online List.

Talked about couple of component:-
1. Azure Bot Framework -Communication Framwork.
2. LUIS -> to identify the intent.
3. SharePoint Online as data repository
4. MS Flow Premium Connector i.e. DocParser
5. Outlook -> Send and Receive an email.

Online Webinar Recording:-

Demonstrated Solution i.e. Git hub link here

https://github.com/manoj1201/BotFrameworkSendReceiveFile

Happy Coding.

Online Webinar |Automate Business Process using Microsoft Azure Bot, MS Flow and SharePoint Online

Speaking | How to automate business process using Conversational Bot using Microsoft Flow and SharePoint Online. 

Online Free Webinar: Automate Business Process using Microsoft Azure Bot, MS Flow and SharePoint Online.

Click here to register now: https://goo.gl/Jqh4to

#FreeWebinar #SPO #MSFlow #BotFramework

SPFX | NPM Install Error | npm ERR! 404 Not Found: event-stream@3.3.6

npm ERR! 404 Not Found: event-stream@3.3.6

I created a SPFX solution almost a month back that time it was working fine but today a month later start getting below error which was quite strange. After getting lots of research got to know there was some malicious issue observed by NPM during securty check.

NPM security has decided to remove the "Flatmap-stream" and "event-stream@3.3.6" package.

Official Note from NPM: https://blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident

On November 26, 2018, the npm package manager released security advisory 737 regarding the flatmap-stream package. It was determined that this package was malicious, and contained harmful code. In addition, the popular event-stream package was modified to make use of the harmful flatmap-stream package.

NPM Error:-

Resolution:- To fix it you need to update your event-stream package.

1. Delete the node_modules folder.

2. Delete the package-lock.json file.

3. Run npm install.

MSDN Ref: https://blogs.msdn.microsoft.com/devops/2018/11/28/blocking-event-stream-and-flatmap-stream/

Office 365 Developer Bootcamp at Bangalore | Feedback

I am very pleased to share the attendee feedback at Office 365 Developer Bootcamp at Bangalore.

Below Screen says lots, Please have a look

Office 365 Developer Bootcamp | Speaker Slides

Thanks for attending Office 365 Developer Bootcamp at Bangalore on 24-Nov-2018. As promised, all the resources presented in the bootcamp is available in the below Git.

You can find all speaker slides at GitHub Link :- 

https://github.com/mstechcomin/office365dev-bootcamp-2018-blr


Please submit your valuable feedback here. This survey is completely anonymous and the results goes directly to Microsoft to improve the future events.