Techrobbers

Updating the SharePoint/SPFx web parts or other solution is very common requirement, Webparts we can add from the SharePoint store or can be uploaded by our organization. To update a SharePoint web part to the latest version, start by uploading the updated SPFx package to the App Catalog. Then, make sure to upgrade the web part on the site where it’s being used. In this blog will be discussing ways to upgrade both package from the SharePoint app store or the the custom uploaded from the organization Update the web part added from the SharePoint app store: Go to the tenant level app catalog site. Select the app which you want to upgrade. Once you select the app, go the top ribbon and select file and click on the "Upgrade Store App", updated version will be added on the appcatalog if the new version is available on the store. Note: If you built the custom webpart then upload it to the app catalog. Install the upgraded solution: Navigate to the site collection where you have ins...

We all are aware of the Image/Thumbnail column present in the SharePoint list. Whenever we want to store the image, we use this column, but recently I found that SharePoint image/thumbnail columns are behaving differently. What's happening : Previously, when we were saving the items in the list and when we fetched items using the code, it was giving a response like this: '{"type":"thumbnail","fileName":"MyPhoto.jpg","nativeFile":{},"fieldName":"ProfilePicture","serverUrl":"https://techrobbers.sharepoint.com","fieldId":"id","serverRelativeUrl":"/sites/SIteName/SiteAssets/Lists/ListID/MyPhoto.jpg","id":"ID"}' But now it is returning data in the below format: "{"fileName":"Reserved_ImageAttachment_[14][Photo][7][content][2]_[10].jpg"}" Also one catch here is that it's working fine for all the ex...

This article will walk you through the process of effortlessly integrating Google Gemini into the SharePoint Framework (SPFx), so you can use its strong features within your SharePoint environment. Whether you want to optimize content management, or increase overall user engagement, this step-by-step tutorial will provide you with the information and resources you need to get started with Google Gemini in SPFx. These steps will also be useful for integrating Google Gemini Pro AI with React application.  Get the API key: Initially, you'll require an API key. This key serves as your identification to Google Gemini, enabling authentication on your behalf. Create a API Key from Google AI Studio Click here Now follow the steps mentioned below: Create a SPFx web part.  Installing the " GoogleGenerativeAI " package for Node.js is necessary in order to utilize the Gemini API in your SPFx Webpart npm install @google/generative-ai Now we need to initialize the generative model, add...

If you're wondering about enabling special character usage with SharePoint REST API or filtering SharePoint Search REST queries involving special characters, this blog is tailored to address your concerns.  How to allow special characters using SharePoint REST API? SharePoint Search REST query filter with special characters. Special characters can indeed pose challenges when working with APIs like SharePoint REST API or libraries like PnP JS. These characters, if not handled properly, can cause issues such as code breaking or unexpected behavior. Let's see how we can handle this: Special characters in URLs need to be properly encoded to ensure they are transmitted correctly. In JavaScript, you can use the encodeURIComponent() function to encode special characters before making requests to the REST API or using them in PnP JS. For instance, if you possess a 'filterText' variable intended for passing to a function, it's advisable to encode it initially to manage speci...

"Part URI is not valid per rules defined in the Open Packaging Conventions specification" is very common issue and everyone who have worked with the SPFx, have faced this issue at least once. But interesting thing is that, User will not get any information about this error on the terminal or console. How to resolved "Part URI is not valid per rules defined in the Open Packaging Conventions specification" Let's discuss root cause of the problem and steps to resolve this error: Check your project folder name, if your project folder name have any underscore/space/dash remove them because this is one of a cause behind this issue. Check assets you have used in your solutions, check the CSS file, .tsx file, JS file, images, Ts file, font libraries and if they have any underscore/space/dash in the file name remove them.  Let's fixed this issue: Remove the  underscore/space/dash from project folder name and from css, ts, tsx, js, font library, images.   gulp clean ...

How to check the compatibility between the SPFx version and the Node.js version The SharePoint Framework (SPFx) is a client-side development platform used to develop web parts and extensions for SharePoint. The SharePoint Framework (SPFx) is compatible with the Node.js versions. Existing SPFx solutions may have different SPFx versions as compared to the current solutions. To make the SPFx solution run, Node.js is required, and in this blog, I am sharing steps to check the compatible node module for SPFx.  Find the SPFx version from the solution:  Open the project solution and navigate to the "package.json" file. In package.json file you will find  "@microsoft/sp-core-library" key and value of this particular key is the version of the SPFx.       Ex:    "@microsoft/sp-core-library": "1.14.0" Another way to find the SPFx version is by command, open the command prompt and run the command mentioned below: npm ls -g --depth=0 @microsoft/generator-s...

In this article, we are going to see the ways in which we can test, and debug SPFx solutions on Modern Pages on SharePoint Sites. There are several ways to debug the SPFx client-side solutions with SharePoint Modern Pages. Why it's beneficial to test web parts on modern pages? It's easy to test web parts on the local workbench and it's a very time-saving approach. But in some cases, when you are developing web parts that interact with the content of the SharePoint site or you are using the SharePoint APIs local workbench will not work, because we need access to get data using SharePoint APIs that we will not get on local workbench.  Test SharePoint Framework web parts on Modern Pages in SharePoint sites without deploying to your app catalog site. Test your SPFx client-side solution (web part or extension) on the SharePoint Modern pages by loading the debug scripts.   Follow the steps: 1. Run the command (gulp serve –nobrowser ) 2. Go to the SharePoint site and n avigate t...

In this article, we will include SPFx interview questions based on the SPFx development. Write the steps to deploy SPFx web part to SharePoint online. To deploy the SPFx web part and extension in SharePoint online. We need to follow the steps mentioned below to deploy SPFx client-side solution (web parts, extension ) to SharePoint : App Catalog site is a prerequisite to the deployment of the SPFx client-side solutions. Hence, you need to ensure that an App Catalog site is present. Create Package : Open the command prompt and move to our SPFx web part directory. Run the command "gulp clean" , this command removes all files from previous builds. Run the command  "gulp bundle --ship" , you have to add the --ship or the --production argument to the bundle command, this command helps us to build solutions for production. Run the command  "gulp package-solution --ship" , one we run the previous command we need to run this command to create a package. Once the co...

In this article, we are going to discuss interview questions related to the SPFx (SharePoint Framework Development ). It will help you to prepare for the interview and in getting clarity on the core concepts of SPFx development. What is SPFx? SPFx, short for SharePoint Framework,  SPFx  allows us for client-side SharePoint development, we can easily connect with SharePoint data and it also supports for open source tools. What is the major difference between SPFx web part and the SharePoint app? Both the development model supports client-side development but the major difference between these two is that the SharePoint app(add-in) runs on the iframe. What you can build with SPFx? Using SPFx framework we can customize the SharePoint pages. We can build things mentioned below using the SharePoint Framework(SPFx). Web parts, Extensions, Adaptive Card, Library Component How many types of extensions we can create using SPFx? SPFx has three extension types: Application Customizers: U...

"How to set up SPFx development environment"  is the first question that came when we want to develop client-side solutions using SPFx. This blog will share the steps to set up the SPFx environment with multiple Node.js versions. This article also include steps to setup the nvm on windows machine. Using nvm we can manage multiple node versions on the windows. There may be times when using Node.js that you need to run numerous instances of the software on the same computer. To work with SPFx solutions which are created with different versions of  Node.js, You need multiple Node.js versions on your machine. To install and set up the SPFx environment with multiple Node.js versions, use the steps mentioned below.  If Node.js is already installed on your computer, use the instructions below to remove it. 1. Uninstall Node.js   2. Remove the Node.js  related folders from the location "C:\Users<user>\AppData\Roaming\npm" SPFx Node.js supported versions are: ...

In this article, we are going to learn about some common error we faced while developing and deploying the SPFx solution. There are several mistakes we make while working with the exsisting code, I will be sharing the solution to get rid from those errors. Error 1 : When you create a solution and run with the gulp everything seems fine but when you deploy the package to app catalog you see these errors : Component ID {0} exists in solution {1} already   or  Component ID {0} exists in solution {1} already. And having some correlation ID or  A solution with the same product ID already exists.  Please upload the file with the same name and replace the existing solution Solution:  This error stated that you are using the solution with same id which is already deployed at your app catalog. You can change the   Do the steps mentioned below: 1. Go to your solution, Under Config move to package-solution.json file and change the id. You need to replace the GUID...