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 part? Explain the steps you would take and the key components you would use.

Answer:

To implement this functionality in an SPFx web part, I would follow the following steps:

Step 1: Set up the project

Create a new SPFx project using the Yeoman generator.

Choose the appropriate project configuration, such as React or Angular.

Configure the necessary project settings, including the target SharePoint environment.

Step 2: Configure authentication

Register an application in Azure Active Directory (AAD) to obtain the required client ID and client secret.

Configure the necessary permissions and API access in the AAD application registration.

Set up the SPFx project to use the AAD application for authentication by updating the project configuration.

Step 3: Implement the data retrieval

Create a service or utility class to handle the API communication and data retrieval.

Use a library like Axios or the built-in SPHttpClient to make authenticated requests to the external API.

Implement the necessary logic to handle the OAuth 2.0 authentication flow, including obtaining access tokens and refreshing them when needed.

Parse the API response and extract the required data.

Step 4: Build the web part UI

Create a React or Angular component that represents the web part UI.

Use the data retrieved from the API to populate the component's state or properties.

Design the UI to display the data in the desired format.

Implement any additional UI elements, such as a refresh button, to allow users to manually refresh the data.

Step 5: Deploy and test

Package the SPFx solution using the appropriate build commands.

Deploy the solution package to the target SharePoint environment.

Add the web part to a SharePoint page and test its functionality, including data retrieval and manual refresh.

Scenario 2: 

What are the key differences between SharePoint Framework (SPFx) and traditional SharePoint development models like farm solutions or sandboxed solutions?

Answer:

SPFx is a client-side development model that allows developers to build modern, responsive, and customizable SharePoint experiences using popular web development frameworks like React or Angular.

Unlike traditional development models like farm solutions or sandboxed solutions, SPFx runs entirely in the browser and does not require server-side code or deployment to SharePoint servers.

SPFx web parts are isolated from the SharePoint server and do not impact the overall SharePoint farm's stability or performance.

SPFx provides a more flexible and agile development experience by leveraging modern web development tools, practices, and frameworks.

Scenario 3: 

How would you implement custom field rendering in SharePoint Framework (SPFx)?

Answer:

To implement custom field rendering in SPFx, you can follow these steps:

Create a new SPFx field customizer extension or use an existing one.

In the extension's code, define a new field customizer class and implement the necessary methods like:

• onInit(), 
• onRenderCell(), 
• onDispose(), etc.

In the onInit() method, specify the field types or fields you want to customize by configuring the extension's manifest file (manifest.json).

In the onRenderCell() method, write the custom rendering logic to determine how the field's value should be displayed.

Utilize the available SPFx components, UI frameworks, or custom HTML/CSS to generate the desired visual representation of the field value.

Handle any required event bindings or interactions within the custom rendering logic.

Deploy the extension to the target SharePoint environment and attach it to the desired list or library using SharePoint's field customizer extension mechanism.

Scenario 4: 

How can you leverage SharePoint Framework (SPFx) to interact with external data sources, such as REST APIs?

Answer:

SPFx provides several options to interact with external data sources:

Utilize the built-in SPHttpClient or third-party libraries like Axios or Fetch to make HTTP requests to REST APIs securely.

Implement authentication mechanisms like OAuth 2.0 or Azure AD app-only permissions to authenticate and authorize the SPFx web part to access the external data source.

Leverage modern JavaScript frameworks like React or Angular to consume and display the retrieved data in the web part UI.

Implement pagination, filtering, or sorting options to provide a richer user experience when interacting with large datasets from external sources.

Cache the retrieved data using mechanisms like session storage or local storage to improve performance and minimize API calls.

Implement error handling and display appropriate error messages to users if API requests fail or encounter exceptions.

Scenario 5:

How can you handle state management in SharePoint Framework (SPFx) web parts?

Answer:

State management in SPFx web parts can be handled in multiple ways, depending on the complexity and requirements of the web part. Here are a few options:

React Context API: Utilize the React Context API to manage and share state across components within the web part. This allows for a centralized approach to state management and enables components to access and update shared state.

Redux or Flux: Implement a state management library like Redux or Flux in the SPFx web part. These libraries provide a predictable state container that can be used to manage complex state scenarios and enable actions and reducers to update the state.

Local Component State: For simpler scenarios, you can use local component states within individual React components. This is suitable when the state is confined to a single component and does not need to be shared with other components.

URL Parameters or Query Strings: Leverage URL parameters or query strings to store and manage the state within the URL itself. This approach allows users to bookmark or share specific states of the web part and provides a more dynamic and interactive experience.

The choice of state management approach depends on factors such as the complexity of the web part, the need for state sharing, and the familiarity of the development team with different state management libraries or techniques.

Scenario 6: 

How can you implement localization in SharePoint Framework (SPFx) web parts?

Answer:

To implement localization in SPFx web parts, follow these steps:

Prepare Resource Files: Create resource files (.resx) for each supported language, containing localized strings or messages that need to be displayed in the web part. Create a separate resource file for each language, naming them appropriately (e.g., MyWebPart.en-us.resx, MyWebPart.fr-fr.resx).

Load Resource Files: Load the appropriate resource file based on the user's selected language or the language set in the SharePoint site. You can use the SPHttpClient to retrieve the resource file from a SharePoint library or use a custom approach to load the resource file dynamically.

Implement Localization Logic: In your SPFx web part, implement the logic to retrieve the appropriate localized string from the resource file based on the current language. You can use a library like react-i18next or format.js to simplify the localization process and handle string interpolation or pluralization.

Display Localized Content: Update your web part's UI components to display the localized strings obtained from the resource file. This can include labels, messages, tooltips, and any other text that needs to be localized.

Test and Deploy: Test your web part with different language settings and ensure that the localized strings are displayed correctly. Package and deploy your SPFx solution to the SharePoint app catalog or the target environment.

Scenario 7:

How can you implement unit testing for SharePoint Framework (SPFx) web parts?

Answer:

To implement unit testing for SPFx web parts, you can use popular JavaScript testing frameworks like Jest or Mocha along with additional libraries like Enzyme or React Testing Library. Here's an overview of the steps involved:

Set up the Testing Environment: Install and configure the necessary testing frameworks and libraries in your SPFx project. This typically involves adding the required npm packages, setting up configuration files, and configuring test runners.

Write Unit Tests: Create unit tests for individual components, utility functions, or other logical units of your SPFx web part. Write test cases that cover different scenarios and edge cases to ensure comprehensive test coverage.

Mock Dependencies: Mock any external dependencies or APIs that your web part relies on, such as SharePoint libraries or custom services. This ensures that unit tests focus solely on the specific component or function being tested.

Run Tests: Execute the unit tests using the testing framework's command-line interface or integrated development environment (IDE) integration. Monitor the test results and check for any failures or errors.

Evaluate Test Results: Review the test results and identify any failed or erroneous test cases. Debug and fix issues as necessary, ensuring that the web part functions correctly according to the defined specifications.

Automate Testing: Integrate your unit tests into a continuous integration (CI) pipeline or a build process to automate the testing workflow. This ensures that tests are run automatically whenever changes are made to the codebase.

Others mostly ask questions

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:)

Learn More Topics
Interview Questions - Microsoft Teams Advance
Interview Questions - Graph API
Interview Questions - Power Virtual Agent
Power Apps Interview Questions - Canvas App
Microsoft Teams Development Interview Questions
Advanced Power Automate Interview Questions
2023 Mostly Asking SPFx Question
SharePoint SPFx Interview Questions
Interview Questions of Advanced JavaScript
Interview Question and Answer of ChatGPT
Interview Questions of SharePoint-to-SharePoint Migrations