Posts

Getting Started with React SPFx CRUD & Search WebPart

Image
This blog explains how you can clone my GitHub repository , install dependencies, and run the SPFx React web part for: ✅ CRUD operations on SharePoint list items ✅ Searching list items ✅ Selecting list name from the property pane 👉 GitHub Repo: ReactSPFx 📌 Step 1 – Prerequisites Before you start, make sure you have: Office 365 / M365 tenant with SharePoint Online Node.js (LTS) compatible with SPFx version in the project npm (comes with Node.js) Yeoman and gulp installed globally Access to App Catalog if you want to deploy 📌 Step 2 – Clone Repository Open your terminal and run: install git to run below command git clone https://github.com/sunilshetty07/ReactSPFx.git  cd ReactSPFx 📌 Step 3 – Install Dependencies Run the following inside the folder: npm install This installs React, SPFx controls, PnP libraries, Fluent UI, etc. 📌 Step 4 – Run in Local Workbench Start the local dev server: gulp serve Now open the SharePoint Workbench : Local: https://l...

Part 3: Building Code Apps with SharePoint Online Integration

Image
 Step1 : Add the SharePoint Online list connection to your Code App using the following command: pac code add-data-source -a <connection name> -c <API ID> -d <SharePoint Site(encoded)> -t <list id> The process of retrieving the connection name and API ID has already been explained in Part 1 and Part 2 of the blog. Please refer to those sections if you are not familiar with how to obtain them. For the SharePoint site , you must provide the encoded URL . The required format is double URL encoding (also known as percent-encoding applied twice). How it works Normal characters in a URL are encoded once using percent-encoding (RFC 3986) : : → %3A / → %2F If you encode that result again , the % character itself becomes %25 : %3A → %253A %2F → %252F So: https: // → https% 3 A% 2 F%2F (once encoded) https% 3 A% 2 F%2F → https%253A%252F%252F In simple terms, you need to encode the SharePoint site URL twice. First, encode the Sha...

Part 2: Building Power Apps Code Apps – Adding Office 365 Users Connection

Image
Please refer to the following blog for a step-by-step guide on creating Code Apps :  https://mspowerplatformtips.blogspot.com/2025/08/creating-code-apps-in-power-apps-step.html Setting up connection to connector for code apps. Create and set up connections in Maker Portal  You will need to start by creating and configuring connections at https://make.powerapps.com and you’ll need to copy connection metadata from there for use in later steps. 1. Launch the Maker Portal Connections page Go to  https://make.powerapps.com  and navigate to the Connections page from the left-hand navigation. 2. Create an Office 365 Users connection Click “+ New connection” and select Office 365 Users. Click “Create”. Then open the connection in Url you can see connection ID Get connection metadata for all created connections  You can use the Power Apps CLI to list your available connections and retrieve their IDs: pac connection list This command will display a table of all your ...

Part 1: Creating Code Apps in Power Apps - A step-by-step guide (with real errors I faced & how I fixed them)

Image
Intro In this post I’ll walk you through how I set up a code-based app for Power Apps (React/Vite front-end + Power Platform CLI for packaging/deployment), the exact errors I ran into, and how I solved them. If you want a hands-on, copy-paste able guide that covers Node versions, pac auth, environment issues, and packaging tips, this is for you. Prerequisites Microsoft 365 account with access to a Power Platform environment Node.js ( 20.19+  recommended LTS) VS Code Install power platform tools extension in VS Code. Steps: Step 1 : Open Visual Studio Code and launch the integrated terminal. Step 2: In the terminal, run the following commands one by one.   mkdir D:\CodeApps - Force cd D:\CodeApps npm create vite @latest myfirstapp -- -- template react - ts cd D:\CodeApps\myfirstapp npm install Initially, I ran the command: npm create vite@latest MyFirstApp -- --template react-ts This gave the error: Invalid package.json name The issue was caused because package...

How to Create a Delegated Custom Connector in Power Platform to Call Microsoft Graph API

Image
When working with Microsoft Graph API inside Power Automate or Power Apps, many developers face this error: /me request is only valid with delegated authentication flow.   This happens because the HTTP connector with client credentials only works with application permissions , which do not provide a user context. If you need to call Graph API endpoints like /me , /me/messages , or /me/events , you must use delegated authentication . The best way to achieve this in Power Platform is by creating a Custom Connector with OAuth2 delegated flow . Step 1: Register an App in Azure AD  (Refer for more details: https://mspowerplatformtips.blogspot.com/2025/04/step-by-step-guide-power-automate.html ) Go to Azure Portal → Azure Active Directory → App registrations → New registration . Give your app a name (eg: Graph API Power Automate). Save the app and note down: Application (client) ID Directory (tenant) ID Step 2: Configure API Permissions In your register...

Important Power Fx formulas

Power Apps Formulas Reference (Top 50) A handy reference of the most commonly used Power Fx functions in Power Apps. # Function Description 1 If() Checks a condition and returns one value if true, another if false. 2 Switch() Compares a value against multiple cases and returns the first match. 3 IsBlank() Returns true if a value is blank. 4 IsNumeric() Checks if the value is a number. 5 Len() Returns the number of characters in a string. 6 Left() Extracts characters from the start of a string. 7 Right() Extracts characters from the end of a string. 8 Mid() Extracts a substring from a string. 9 Upper() Converts text to uppercase. 10 Lower() Converts text to lowercase. 11 Trim() Removes extra spaces from text. 12 Concatenate() Joins multiple text strings. 13 Concat() Joins values from a table into a single string. 14 Today() Returns the current date. 15 Now() Returns the current date and time. 16 DateAdd() Adds days,...

Model-Driven App Components

Model-Driven App Components Component Type / Variant Use / Purpose Limitations / Notes Form Main Form Display and edit single record details; most commonly used Complex forms can impact performance; may require role-based access control Form Quick Create Form Fast creation of a record with essential fields only Limited fields; cannot include all form components Form Quick View Form Embedded read-only display of related table record inside another form Cannot edit fields; limited formatting options Form Card Form Compact view for timelines, dashboards, subgrids Limited fields and layout options; mainly for mobile or card display View System View Default view provided by Dataverse; shows list of records Cannot be deleted; can be customized ...

Dataverse Column Types

Dataverse Column Types Column Type Description / Use Example Limitations / Notes Single Line of Text Stores text up to 4000 characters Employee Name: "John Doe" Max 4000 chars; no formatting (rich text limited to 100k if enabled) Multiple Lines of Text Longer text, supports multiple lines Description, Notes Max 1,048,576 characters; can enable rich text formatting Choice (Option Set) Predefined dropdown list of values Status: Active / Inactive Only allows values defined in option set; cannot add free text MultiSelect Choice Multiple options from predefined set Skills: Java, C#, Python Max 150 selections; cannot be indexed for filtering efficiently Whole Number Integer values Age: 25 Range depends on format; cannot store decimals ...