SharePoint Framework Custom Form- React JS – SPFX – Complex Forms

In this blog I have create a simplest react project with complex form which can save others time to use in the project. Project is uploaded on Git, it is a SharePoint framework web part with react framework. In this project, a forms with DropDown, Datetime picker, Upload File to SharePoint, Input Fields, HtmlTextEdtir,CheckBoxes  which will submit data to SharePoint List using pnp. Below are components

(1) react-select to bind with SharePoint List

(2) react-datetime for Date Time on the Form

(3) react-file-reader to Upload File to SharePoint Document Library

(4) react-checkbox-group for Checkbox in the Form

(5)  sp-pnp-js to Upload file and submit data to List.

(6) react-medium-editor is used for rich textbox in the form.


Need to install below external compoenent.

react-file-reader  (for Uploading Files)

react-medium-editor (for Rich Textbox)

react-datetime (for DateTime Calender)

react-checkbox-group (for checkbox group)

Have a look

Upload button will upload the file to the SharePoint document Library, I used pnp framework to upload, which allow us to update metadata easily.

Now code will insert item to SharePoint List on button click.It will upload file to My Docs in the Same site and insert to list with unique Guid, to maintain relationship between List and document library.


SharePoint Framework Custom Form- React JS – SPFX – Complex Forms
SharePoint Framework Custom Form- React JS – SPFX – Complex Forms

Installing required libs i.e. jquery, pnpjs, checkbox, react-file-uploader



SharePoint Online – Update – default document mode will soon be 11 (Edge mode)

Display a classic SharePoint Online site in Internet Explorer 10 document mode to 11 (Edge mode)

When users browse SharePoint Online sites in Internet Explorer 11, the default document mode will soon be 11 (Edge mode), regardless of whether the site uses the new lists and libraries experience. We’ll no longer force the legacy compatibility mode 10. This will improve the performance and reliability of most pages. However, some custom master pages or custom web parts may contain custom code that relies on the older Internet Explorer 10 document mode.

Check if a site works in Edge document mode

Follow these steps to determine if the customization on a site will work in Edge mode:

  1. Open the site in Internet Explorer 11 and press F12 to open the developer tools.
  2. Select the Emulation tab, and under Document mode, select 11.

Revert site collections to Internet Explorer 10 document mode

If you find that a site collection has a customization that doesn’t work in Edge document mode, you can revert the site collection to Internet Explorer 10 document mode. To do this, you need to use a Microsoft PowerShell script with a CSOM (Client-side object model) wrapper. You must be a global admin in Office 365 to perform this task.

  1. Review the PowerShell execution policies.
  2. Copy the following code and paste it in a text editor such as Notepad.
    ##The first two lines of the script load the CSOM model:
    Add-Type -Path "C:\Users\{username}\downloads\Microsoft.SharePointOnline.CSOM.16.1.5026.1200\lib\net45\Microsoft.SharePoint.Client.dll"
    Add-Type -Path "C:\Users\{username}\downloads\Microsoft.SharePointOnline.CSOM.16.1.5026.1200\lib\net45\Microsoft.SharePoint.Client.Runtime.dll"
    $webUrl = 'https://{domain}[optional path to subweb]'
    $username = Read-Host -Prompt "Enter or paste the site collection administrator’s full O365 email, for example," 
    $password = Read-Host -Prompt "Password for $username" -AsSecureString
    [Microsoft.SharePoint.Client.ClientContext]$clientContext = New-Object Microsoft.SharePoint.Client.ClientContext($webUrl)
    $clientContext.Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
    ##To apply script to a site collection:
    	$site = $clientContext.Web; 
    $featureguid = new-object System.Guid "80E47777-D21C-46E0-9139-7C7741EB4B54"site.Features.Add($featureguid, $true, [Microsoft.SharePoint.Client.FeatureDefinitionScope]::None);
  3. Remove the code comment lines (which begin with ##) and save the file as an ANSI-encoded text file with the extension .ps1. For this example, we name the script file “IEMode.ps1.”
  4. Change to the directory where you saved the file.
  5. At the PowerShell command prompt, type:

source :

Summary : Honestly, It will really helpful for people if it was done before, currently most of them are encountered done with branding with their tenants with this tag in their design manger html page 🙂 happy sharing……


Office 365 navigation bar – New Feature -Pin apps to the navigation bar

With all improvements and enhancements, another best feature has started to roll out from today in office 365.

The app launcher enables you to navigate across your services and apps in Office 365. we can can also pin up to three apps in navigation bar .

This makes those apps available instantly, from any Office 365 page or app.It will be more beneficial for the admin users.

navigation bar short cut


Upload Docs to SharePoint Library & Update Columns using Pnp.js

Microsoft SharePoint Pattern and practices libraries makes it very simple to deal with SharePoint site. Less code and easy to understand. Link to SharePoint PNP-JS-Core.

In this article I will use pnp.js library to upload document and update the other fields in the same item uploaded in SharePoint document library.

(1 ) We need to reference the 4 files to work with pnp.js



(2)I have reference the bootstrap in my page and use bootstrap classes.

Html of upload file, I have attached the link of Html Code in the PDF file, just copy and paste.

(3)  Now Call Simple JS Function UploadFiles() to Upload file and update the fields in the same item uploaded. Copy the below Code in JS File.

function UploadFiles() {
var files = document.getElementById(‘exampleInputFile’).files;
var file = files[0]; //using File Api
if (file!=undefined || file!=null){
.files.add(, file, true)
.then(function (data) {
var RelativeUrls=”/Documents/”;

//Retrive Document which is uploaded. Start
$pnp.sp.web.getFolderByServerRelativeUrl(RelativeUrls).getItem().then(item => {
//update start Below Call to Doc List will update the Row baseed on Item.ID
ColumnName: ‘New Value’
}).then(r => {
alert( + ” upload successfully!”);
//update end
}); //Retrive Doc Info End
}); //Upload Document End




Below are the References to pnp js core library to deal with files and update item by id.  PDF file contain the html part.


SharePoint 2013 Search Administration Web Service Application stopped- Stuck

Recently I got stuck with the SharePoint Search Service application. It was deleted earlier from the Farm. But Search Administration Web  Service Application is stuck with stopped status.

Search Service Web application status Stopped
Search Service Web application status Stopped

Below Power shell Command will successfully remove Search remaining stuff form the Farm. with all the web services.
# Add SharePoint cmdlets reference
Add-PSSnapin microsoft.sharepoint.powershell -ErrorAction SilentlyContinue
$SSA = Get-SPEnterpriseSearchServiceApplication