Know More

Introduction   Hi friends, this blog post will guide you through the usage of  Context API  which is one of the new features introduced in the latest version of React   in SPFx projects .  What is React Context and When to use it In a normal React application, the properties are passed top-down from parent to child and then to the grandchild via props. It works great in simple react applications, but this will be very tedious for complex applications.  Context  provides us an easy way to share the props without having them pass through all the intermediate components.  Context  should be primarily used when the properties must be accessible by many components at different nesting levels. We must apply it with cautious because sometimes it makes the reuse of the components more difficult. How can we use it in SPFx?   I hope many of you are aware of the SPFx development model, where we might need to pass the properties that are captured ...

Hi Friends, this post will walk you through setting up the SPFx development environment using WSL 2 in Windows 10 . This post covers only the environment setup for SPFx, not the setup of WSL 2. Please follow the below link to set up the WSL 2. https://docs.microsoft.com/en-us/windows/wsl/wsl2-install Once the above is done, navigate to the Microsoft Store and search for WSL .   You should be able to see many like the screenshot below You can use any of the distros listed above, but my suggestion is to use Ubuntu latest or Debian, which is tested. This post will use the Debian distro for the setup. Once you had chosen the distro, install it from the Microsoft Store . Start the distro from the start menu. When you start the distro for the first time, it will run some pre-requisites and install some required files. You will be asked to enter the username and password for the OS. Make sure you remember the username and password, which we may use it for later. O...

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data  --> You are here In this post, I am gonna show you how we can use  DetailsList   from  UI Fabric  and  PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' CSV ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  S...

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList &  PropertyFieldCodeEditor to show the JSON data --> You are here Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data In this post, I am gonna show you how we can use  DetailsList   from UI Fabric and PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' JSON ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  SharePoint Yeoman...

Hi Friends, today I am gonna show you one of the SPFx components developed by me. I hope, all the SharePoint users and developers are aware of the comment box in the modern page. The comments are tied to the page and are stored as metadata to the page. There are some features like a reply to the comment, likes etc., But there are some features missing in the comment box which may be required for the customers. One of my clients had asked for the feature of uploading files to the comment box. Based on the above use case and with many features, I took an initiative to develop an advanced comment box that can be used by switching off the out-of-box comment box. The custom comment box can be added to a page and once it is saved as a template, based on the template the page created will inherit the comment box. All the comments are stored in a separate list with the ' Page Title ' and ' Page URL ' as a key to the page comments. The component was developed using SPFx v...

Hi Friends, in this post, I am gonna walk you through the steps to update the SharePoint Online User Profile property from Azure AD. You may think, why this is necessary since SharePoint online will sync automatically with Azure AD. The tricky part is the auto-sync may take up to 24 hrs to sync Azure AD to SharePoint UPS. The next tricky part is not all the AAD profile properties are synced to SharePoint UPS. Only a few of the properties are synced and below are the list of properties relevant to the profile that is synced to SharePoint UPS User Name First name Last name Name Office phone Department Job title Manager Office Office phone What about the other properties like 'Mobile Phone' that are relevant to the user??? What about if there is a drastic change in the Organization structure and you want the SharePoint UPS to reflect immediately??? To resolve all these obstacles and issues, we need to use PowerShell Now you understand why there i...

Hi Friends, in this post, I am gonna walk you through one of the use case scenarios which I heard from my client using Power Automate . I hope many of you have heard about Power Automate which was named earlier as Microsoft Flow. Those who are not aware of Power Automate, please click here to get some basic knowledge. The use case is very simple, whenever the user uploads or modified a document to a document library and check-in the finalized version, an email has to be triggered to the author and cc to few users acknowledging the file has been created or modified with version related information. One of the most important requirements is to achieve with low code solution using power automate. Let us dive into the solution to achieve the same. Configure the document library Versioning Settings to allow ' Require Check Out ', so that whenever the user tries to create or modify a document, they have to use the check-in and check-out feature. Next is to configure the ...

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control --> You are here Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data In this post, I am gonna show you how you can leverage on the FilePicker and FileTypeIcon control from PnP Reusable controls on web parts. The code reference shown below will add the file as an attachment to the item in a SharePoint list called ' Demo ', which has only the ' Title ' field. Regarding the basic creation of the project and other stuff, please refer to my previous blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the sol...