How to Connect SharePoint List to Power Apps Code Apps?

Connect SharePoint Online as a Data Source in Power Apps Code Apps using PAC CLI, React & TypeScript — Step-by-Step Tutorial! During the episode we will talk about how can we connect SharePoint Online list in our Power Apps Code Apps?

In this episode, you'll learn exactly how to set up a SharePoint Online List connection reference inside Power Apps Code Apps using Visual Studio Code and the Power Platform CLI (pac code add-data-source). We build a real-world Patient Tracker app that reads live data from a SharePoint list and displays it as dynamic cards using React and TypeScript.

📌 WHAT YOU'LL LEARN IN THIS VIDEO:
✔️ What are Power Apps Code Apps and why use them
✔️ How to create a SharePoint Online connection reference in Power Platform
✔️ How to run pac connection list to get your Connection ID
✔️ How to use the pac code add-data-source command with SharePoint
✔️ Understanding the -a (API), -c (Connection ID), -t (Table/List), -d (Data URL) parameters
✔️ Auto-generated Models and Services folder after data source setup
✔️ How to use React useEffect hook to fetch SharePoint list data
✔️ Reading all records from SharePoint using PatientTrackerService.getAll()
✔️ Rendering SharePoint data as beautiful cards in a Code App
✔️ Running and previewing your Code App locally using npm run dev

⏱️ CHAPTERS:
00:00 - Introduction & Series Overview
00:48 - Use Case: Patient Tracker SharePoint List
01:31 - SharePoint List Schema Walkthrough
02:06 - End Outcome Demo (Patient Card UI)
03:32 - Setting Up a New Code App Project in VS Code
04:47 - Changing Directory & Creating the Project
05:30 - Cloning GitHub Repo & Installing Packages
07:05 - Authenticating with Power Platform Environment (pac auth create)
08:31 - Running the Blank Project (npm run dev)
09:29 - Setting Up SharePoint Connection Reference
10:30 - Creating a New SharePoint Connection in Power Platform
11:12 - Renaming the Connection Reference (Best Practice)
11:58 - Running pac connection list to Get Connection ID
12:38 - Reading Microsoft Official Documentation
13:12 - Understanding pac code add-data-source Parameters
13:58 - Providing Connection ID, List Name & SharePoint Site URL
15:00 - Opening SharePoint List & Copying Table Name
15:55 - Running pac code add-data-source Command
16:40 - Connection Added Successfully 🎉
17:34 - Exploring Auto-Generated Models & Services Folder
19:06 - Verifying the Connection in power.config.json
20:16 - Updating app.tsx & app.css with React Code
21:58 - Code Walkthrough: React + TypeScript Structure
23:25 - useEffect Hook Fetching Data from SharePoint
25:49 - Replacing CSS with Custom Styles
26:34 - Running Final App & Viewing Patient Cards Live
28:13 - What's Coming in Episode 3 (GitHub Copilot + AI)
28:52 - Outro & Premium Membership Info

🔍 TOPICS COVERED:
Power Apps Code Apps | SharePoint Online Integration | pac code add-data-source | PAC CLI Tutorial | Power Platform CLI | React TypeScript Power Apps | VS Code Power Apps | Connection Reference Power Apps | SharePoint List Data Source | Power Apps Developer Tutorial | Low Code Development

🚀 ABOUT THIS SERIES:
This is Episode 2 of the Power Apps Code Apps Step-by-Step Tutorial Series. In this series, we go from zero to a fully functional Code App using React, TypeScript, and Microsoft Power Platform tools.

📌 Series Playlist: https://www.youtube.com/playlist?list=PLib8Q64STW-uSFPYqsVd8S4ZWQ7FFWPA4

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎓 LIVE TRAINING WITH DHRUVIN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Looking for interactive, Q&A-focused live training on Power Platform?
👉 Visit: www.powerplatformtrainings.com
📣 Power Pages Training starts in May — check the website for details!

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎬 YOUTUBE MEMBERSHIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

👉 Join Premium Membership using this Link.
https://www.youtube.com/channel/UCV_fdCIEX3O_YnAPvg8CYmA/join

Follow me on all social Media Handles: https://linktr.ee/dhruvin.shah

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📢 CONNECT WITH ROBIN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🐦 Twitter/X: @DhruvinShah16
📸 Instagram: https://www.instagram.com/powerplatformguy/
🌐 Website: www.powerplatformtrainings.com
▶️ YouTube: @DigitalDhruvin @iamdhruvinshah

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
💬 COMMENT CHALLENGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Did you successfully build your first Code App after watching this?
👇 Drop "✅ I built my first SharePoint List !" in the comments below!
What Code Apps topic should Robin cover next? Let us know!

🔔 If this helped you, LIKE the video, SUBSCRIBE, and hit the BELL 🔔 so you never miss a Power Platform tutorial!

#PowerAppsCodeApps #SharePoint #CodeApps #MicrosoftPowerApps #ReactTypeScript #PACCli #LowCode #PowerAppsDevloper #SharePointOnline #VisualStudioCode #PowerPlatformTutorial Receive SMS online on sms24.me

Watch on YouTube

Subscribe on YouTubeReaderBot

TubeReader video aggregator is a website that collects and organizes online videos from the YouTube source. Video aggregation is done for different purposes, and TubeReader take different approaches to achieve their purpose.

Our try to collect videos of high quality or interest for visitors to view; the collection may be made by editors or may be based on community votes.

Another method is to base the collection on those videos most viewed, either at the aggregator site or at various popular video hosting sites.

TubeReader site exists to allow users to collect their own sets of videos, for personal use as well as for browsing and viewing by others; TubeReader can develop online communities around video sharing.

Our site allow users to create a personalized video playlist, for personal use as well as for browsing and viewing by others.

@YouTubeReaderBot allows you to subscribe to Youtube channels.

By using @YouTubeReaderBot Bot you agree with YouTube Terms of Service.

Use the @YouTubeReaderBot telegram bot to be the first to be notified when new videos are released on your favorite channels.

Look for new videos or channels and share them with your friends.

You can start using our bot from this video, subscribe now to How to Connect SharePoint List to Power Apps Code Apps?

What is YouTube?

YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others. Originally created in 2005, YouTube is now one of the most popular sites on the Web, with visitors watching around 6 billion hours of video every month.