Skip to main content

Top20 - SharePoint Framework (SPFx) Interview Questions

1. Which tool we can use to generate a SharePoint Framework (SPFx) solution?

Developers can use Yeoman to generate SharePoint Framework (SPFx) solution, it is a client-side scaffolding open-source tool to help in web-based development.

2. How developer can ensure that the solution deployed was immediately available to all site collections in SPFx? 

To ensure the availability of the deployed solution on all the site collections developer has to configure skipFeatureDeployment: true in package-solution.json

    "solution": {
      "name": "theultimateresources-deployment-client-side-solution",
      "id": "as3feca4-4j89-47f1-a0e2-78de8890e5hy",
      "version": "",
      "skipFeatureDeployment": true
    "paths": {
      "zippedPackage": "solution/theultimateresources-deploy-true.sppkg"

3. What required changes need from the developer to configure the SPFx solution in the Teams Tab?

In that case, developers need to add a manifest file to the web parts folder in the solution.

4. In a SharePoint Framework (SPFx), How we can ensure that all the web part fields and controls adopt the theme of the site when you deploy the web part, how we can develop the web part?

To achieve, this kind of scenario, developers must use the Office UI Fabric React framework, which is designed to inherit the property of design.

5. If we have an SPFx with the lesser version, what is the first step so that developer can use the solution in the Microsoft Teams tab?

To use a solution in the Microsoft Teams Tab, first of all, the developer must have to upgrade the version of the SPFx solution with the latest one, because the previous version of SPFx was not supported by the Microsoft Teams adaptability feature.

after the upgrade, a further process can be performed.

6. We need to debug a web part from the local workbench, which tool should you use to debug the web part locally?

There are lots of tools but, as per the Microsoft recommendation, developers can use Microsoft Visual Studio Code to debug the web part locally, and it can be used as IDE for development.

7. You need to configure the service by the most secure authentication method process, What configuration need to perform?

The best way to secure a service is to use an SSL Certificate.

8. What is the best way to get the Microsoft Teams Membership by using a very minimal amount of code in the SPFx WebPart.?

To achieve this MSGraphClient is the best method that can perform with Microsoft Graph API and get the details about membership from MS Teams.

9. In the SPFx what technique we can use, so that, web part controls can adapt the theme colour?

Developers need to use the Office UI Fabric React framework, to achieve the same scenario.

10. What object needs to use to connect Azure Active Directory from the API?

To achieve it developer can use  AadHttpClient as an object, to fetch data from API.

11. What object can access the Membership from Microsoft Team using SharePoint Framework(SPFX)?

To achieve it developer can use MSGraphClient as an object in the SharePoint Framework (SPFx).

12. In SharePoint, how we can customize the header and footer section.?

To customize those sections, need to implement an SPFx Extension, SharePoint Frameworks provided two types of Extension techniques

1. an Application Customizer

2. a Field Customizer

coming to the scenario, an Application Customizer is used here to achieve the requirement.

13. What is ClientSideComponentId and ClientSideComponentProperties In the SharePoint (SPFx)?


ClientSideComponentIdis the unique identifier a GUID that is used in the SPFx extension and installed in the app catalog.

ClientSideComponentProperties: ClientSideComponentProperties is an optional parameter,it is used to provide the properties for the instance of the SPFx extension.

14. How developer can Isolate the web part?

This is the Unique Feature of SharePoint Framework, from that developer can completely isolate the web part and deploy it on a Unique domain, to achieve it, it required a separate Azure Active Directory account and API management, it can be defined which API can access and which don't have the permission.

It required SharePoint version 1.8 or later. It only supports modern page

SharePoint SPFx solution that can have isolated web parts can be uploaded to tenant app catalog.

Isolated and non-Isolated web parts both can communicate with Rest API in the same way.

and it is easy to convert from non-Isolated to Isolated web parts.

config/package-solution.json file, by setting the isDomainIsolated property to true.

    "solution": {
      "name": "theultimateresources-deployment-client-side-solution",
      "id": "as3feca4-4j89-47f1-a0e2-78de8890e5hy",
      "version": "",
      "skipFeatureDeployment": true,
     "isDomainIsolated": true
    "paths": {
      "zippedPackage": "solution/theultimateresources-deploy-true.sppkg"

16. What is zippedPackage package in SharePoint Framework(SPFx)? zippedPackage is related to the path of the SPFx package, it simply denotes the final SPFx package name, with its location from where
a developer can get it below example show the folder name with the package name
    "solution": {
      "name": "theultimateresources-deployment-client-side-solution",
      "id": "as3feca4-4j89-47f1-a0e2-78de8890e5hy",
      "version": ""     
    "paths": {
      "zippedPackage": "solution/theultimateresources-deploy-true.sppkg"

17. How you can publish your app on the Organizational level?
To avail the app on the organizational level, need to publish it on the organizational
app catalog.

18. What is the difference between
devDependencies and Dependecines
in the package.json

The difference between devDependencies and the dependencies: devDependencies are the modules required during development, if we talk about the dependencies, it is the modules that are also required at runtime. Node module provides different commands for installing dependencies for example: To use as a devDependency on just need to run
npm install --save-dev, instead of just an npm install --save.

19. What is the resolution in package.json? the attribute resolutions is simply a way of mapping
the packages name and the versions of the
packages that must be kept in the dependency

20. What is Yarn, How it's different from NPM? Yarn is a package manager for Node. js,
it was introduced due to the great ability to focus
on speed, security, and consistency. NPM and YARN both are used as package
management tools, both can use to install
dependencies NPM: NPM is the JavaScript package management
tools, worked within node js framework. to install the npm, Node Js must have installed. YARN: We can say YARN is the advanced
a version of NPM, it is implemented based on
the NPM focuses on speed, security and monitor and provide
consistancy developed by Facebook and now it
is an open-source tool YARN means Yet Another Resource Negotiator To install YARN NPM must have to be installed

npm install yarn --global

21. How we can set a limit in the rest of the API by passing query parameters?

We can use $top as a query parameter and it returns only a specified number of results.


Hope It will help, Please share your feedback

Thank you :)


Post a Comment

Popular posts from this blog

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (SPFx) web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question 1: How would you approach implementing this functionality in an SPFx web

Power Apps modern driven app Interview Question and answer

Question 1: What is a Power Apps modern driven app? Answer: A Power Apps modern driven app is a low-code/no-code application development platform provided by Microsoft. It allows users to create custom applications that can run on various devices and platforms without the need for extensive coding. These apps can be built using a visual interface and can integrate with different data sources. Question 2: What are the key components of a Power Apps modern driven app? Answer: The key components of a Power Apps modern driven app are: Screens : Screens serve as the user interface for the app and can include multiple layouts, controls, and data visualizations. Data sources : These are the various repositories where the app can retrieve and store data, such as SharePoint lists, SQL databases, Excel files, etc. Connectors : Connectors enable integration with external services and systems, allowing data to be fetched or updated. Formulas : Power Apps uses a formula language called Power Apps

Interview Question of Advanced SharePoint SPFx

1. What is WebPack? A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins. WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js. 2. What is PowerShell.? PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS. 3. What is bundling and Minification? The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the s