Skip to main content

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.

1. How to add SPFx web part to full-width column
Answer: You need to set  "supportsFullBleed": true, on the component.menifest.JSON

2. What is a gulp? 
the term Gulp is an open-source JavaScript toolkit created by Eric Schoffstall used as a front-end web development streaming build system.
Work with Node.js and npm, used for automation of time-consuming and repetitive tasks.
Uses in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc

3. What is package.json in the SPFx?
the term package.json file is an application’s directory responsible for recording the package version number and dependencies.

4. What is the node_modules folder and what is its role.
the node_modules folder stores all your packages and dependencies. it also stores any dependencies of those, So, it’s a kind of tree structure which can be quite deep. for example, if an app uses jQuery and Reacts it will resolve the dependency as per the single library convenience.

5. What is the local workbench in SharePoint?
SharePoint workbench gives you the flexibility to test web parts in your local environment and from a SharePoint site.

6. Provisioning a list through the SPFx solution is possible?
Yes, it is possible using the SPFx, requiring Microsoft predefined steps to produce it. 

7. What is the manifest file in the SPFx and what is its uses?
According to the structure of the SPFx, It has two manifest files which spread information across the solution. one manifest file contains a list of all components available in SharePoint we can call it the SPFx master manifest, on the other hand, each component has its own manifest the defines its dependencies we can call it the SPFx component manifest.

8. How can I make an SPFx app available to only a few or selected Site Collections?
At the time of deployment, need to uncheck the label Make this solution available to all sites in the organization.

9. Is it possible to add Apply button on the property panel?
Yes, need to add some lines of code.

10. It is possible to hide/show property panel controls?
Yes, we can implement conditional controls fields by applying some logic in the main ts file.

11. Can we deploy the SPFx on a specific site collection, not on the tenant level?
Yes, We can create a site collection level app catalogue and deploy the SPFx package there, so that it will available only for the Site Collection where we deployed.

12. What challenge we can face when we are opening an existing the SPFx solution and making it run.
We can face versioning related challenges, because it might be the version of node, gulp and npm will be different at the time of solution creation.

13. How we can resolve the versioning related issues.
There is only one way that we can resolve it, we need to replace the version of the existing solution with a supported one.
for e.g. I have an existing solution named A, I need to open the package.json of A
then I need to create another solution with my current version, we can say name solution B
then open package.json of B and replace the versioning of A with B. 

14. Can we change the component name, once it was created?
Yes, We can change it by doing changes in the title field of componentWebPart.menifest.json

15. How we can change the default icon of a component?
Yes, we can change it, by changing the OfficeFabricIconFontName property, Click the link and you will get the list of icons.

16. How we can change the package name of the SPFx solution?
It is very easy to change the default package name in the SPFx solution, need to open package-solution.json and change the ZippedPackage file name for example new name is Solution/abcd.sppkg

17. What is the role of the constructor in the class.
In the SPFx, the architecture or structure is implemented to achieve concepts of object-oriented programing, as per that, a constructor is used in classes to initialize data members and dependencies of class in order to avoid errors and faults.

18. What is a super keyword instance for in class.?
The keyword super is used for the reference variable of the parent class object. 

19. What is the use of the OnInit method in the class.
The OnInit method is used to perform the Initialization of the page and it setup steps that are required to create the page instance.

20. How two components are communicating in the SPFx?
Yes, it is possible in the SPFx, using React js as a framework, React Js has a flexible architecture that provides feasibility between components to communicate.
  • From parent to child with Props/context.
  • From child to parent using callback functions.
21. What is the advantage of Fluent UI and Its framework.
Fluent UI is Microsoft's latest UI based framework, which is used to provide a rich user experience with the SharePoint custom development(SPFx), it has best suited with React Js and introduced Fluent UI React framework.
Click the link for more getting started.

22. How we can use Angular as a JavaScript framework in the SPFx?
Yes, we can use Angular as a JavaScript framework, on the previous releases, Microsoft directly provided the option of Angular as a template framework at the time of the chosen option, but now a day it is recommended that the best suit to use React as a Client-Side framework template.

For Now, If we want to use Angular as a framework, we need to select No-JavaScript as a framework template and need to install all the dependencies manually.

Hope it will help, kindly write your comments here!!!
Thank you:)


  1. This is really a good source of information, I will often follow it to know more information and expand my knowledge, I think everyone should know it, thanks Best web designer berlin service provider.

  2. Thank you so much to share such an amazing and informative article. Keep us updating with more interesting articles. Also, visit at Sharepoint Development

  3. Extremely useful information which you have shared here about web design abu dhabiThis is a great way to enhance knowledge for us, and also beneficial for us. Thank you for sharing an article like this.

  4. You've created an excellent post. Thank you for bringing this article to our attention. Hope you will share more information about
    website design Washington DC

  5. Thank You for sharing this post. I really Like your content. Hope you will share more information about
    web design San Jose

  6. This generation is almost fully dependent on IT devices. And the computer is the most useful from any of those devices. As it is become a part of our daily life so we need to take maintenance of it. For this, your only choice could be pc reparatur Frankfurt. Give us a call and make sure your 20% discount today!


Post a Comment

Popular posts from this blog

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 server and reducing the size of requested such as CSS and JavaScript. it dec

Top20 - SharePoint Framework (SPFx) Interview Questions

1.  Which tool we can use to generate a SharePoint Framework (SPFx) solution? Developer 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"     }  }