SPFx Interview Questions and Answers - 01

What are isolated webparts?

• Isolated webparts are used when there is a need to access api secured with azure ad securely. Isolated webparts are like normal webparts but they are displayed using and iframe pointing at a unique domain of an Azure AD application. Thus other components cannot access any context token or data of webpart.
• Reference: https://tutorialsinhand.com/tutorials/sharepoint-framework-spfx-tutorial/sharepoint-framework-webparts/isolated-web-parts-in-sharepoint-framework.aspx

How can you make a existing webpart as isloated webpart? 

• Can do that by adding isDomainIsolated:true in package-solution.json file. 
• Reference: http://www.suhail.cloud/2021/10/spfx-routing-is-not-reflecting-in.html

How can we create site collection level app catalog? 

the debug executable "" specified in the "" debug profile does not exist Error in VB.Net

 Issue

I got the "the debug executable "" specified in the "" debug profile does not exist Error in VB.Net" error when I teach VB.Net to some of the students. 

Solution

The Startup object which usually a form is missing from the project properties. So as the solution we will have to set the start up object. 

Add SPFx webpart to full-width column

By default, SPFx web parts cannot added in full-width column page layouts. To do it, in the web part manifest (the *.manifest.json file next to the web part *.ts file) set the supportsFullBleed property to true.

SPFx Routing is not reflecting in browser

 Problem

I was trying to implement routing in my SharePoint Framework webpart. The webpart working fine but only the issue is the Hash url is not reflected in the browser. 

This is because if the isDomainIsolated  is set to true. When it is set to true the webpart is embedded into a iFrame. 

Solution

Change the isDomainIsolated into false in package-solution.json under config folder. 

"isDomainIsolated": false,

Office Ui Fabric Pivot control Overflow issue in SPFx

Problem

office-ui-fabric-react is recommended to use with SharePoint Framework. 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components

With the Office UI Fabric React there is a overflow issue in Pivot. The overflow doesn't work as expected. 

Solution

• Install @fluentui/react-tabs 
• npm -i @fluentui/react-tabs
• Import the package to your React component 
• import { Pivot, PivotItem } from '@fluentui/react-tabs';
• Add overflow code to the Pivot 
• overflowBehavior="menu"

Conclusion 

SharePoint Framework (SPFx) starting points

 Introduction

In this blog post we will look at some basic SPFx ideas for a easy start on SPFx. These points can be changed according to the individual and I'm sharing these points based only on my own experience. 

• Its easy to use React framework for SPFx
• As UI framework its great to use office-ui-fabric-react
• npm install office-ui-fabric-react
• For the controls its better to use sp-dev-fx-controls-react from pnp
• Visit https://pnp.github.io/sp-dev-fx-controls-react/
• npm install @pnp/spfx-controls-react --save --save-exact
• Also better to user Reusable property pane controls for the SharePoint Framework solutions
• Visit https://pnp.github.io/sp-dev-fx-property-controls/
• npm install @pnp/spfx-property-controls --save --save-exact
• Use functional components with React
• You can use the below GitHub repository to start your project. 
• https://github.com/SuhailCloud/hello-spfx 
• Use PnPJS npm packages for CRUD Operations in SharePoint 
• https://pnp.github.io/pnpjs/packages/
• npm install @pnp/sp --save

gulp : File is not digitally signed. during gulp serve

Problem

I was trying to create SPFx solutions and when I try to debug the solution using gulp serve command I got the below error “gulp : File C:\Users\suhail\AppData\Roaming\npm\gulp.ps1 cannot be loaded. The file C:\Users\suhail\AppData\Roaming\npm\gulp.ps1 is not digitally signed.”

Solution

To fix the issue  we will have to run the below command.

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

This command sets the execution policy to bypass for only the current PowerShell session, when you open again you may need to run again.

Happy SPFx building