--- title: "#pcf articles | Hashnode" description: "Explore 10 articles tagged #pcf on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/pcf" --- Tag # #pcf 10 posts · 4 followers [Syed Bilal Ahmed](https://hashnode.com/@syedbilal365) · [Aug 6](https://hashnode.com/posts/how-to-convert-a-code-app-into-a-pcf-control/6a7503d2b7ca9a172dccd7b7) ### [How to Convert a Code App Into a PCF Control](https://syedbilal365.hashnode.dev/how-to-convert-a-code-app-into-a-pcf-control?utm_source=hashnode&utm_medium=feed) Migrating from Code Apps to PCF: what carries over cleanly, what you rewrite, and the four gotchas. Real manifest + React + webAPI code included. 7 min read · [syedbilal365.hashnode.dev](https://syedbilal365.hashnode.dev/how-to-convert-a-code-app-into-a-pcf-control?utm_source=hashnode&utm_medium=feed) [Syed Bilal Ahmed](https://hashnode.com/@syedbilal365) · [Jul 1](https://hashnode.com/posts/xrm-copilot-calling-the-assistant-from-your-model-driven-form-scripts/6a44ef40521683ce7565654a) ### [Xrm.Copilot — calling the assistant from your model-driven form scripts](https://syedbilal365.hashnode.dev/xrm-copilot-calling-the-assistant-from-your-model-driven-form-scripts?utm_source=hashnode&utm_medium=feed) One line of JavaScript. Rich JSON back — markdown, adaptive cards, media, citations. This is how model-driven forms become agent-aware. Here's the real how-to. 7 min read · [syedbilal365.hashnode.dev](https://syedbilal365.hashnode.dev/xrm-copilot-calling-the-assistant-from-your-model-driven-form-scripts?utm_source=hashnode&utm_medium=feed) [Syed Bilal Ahmed](https://hashnode.com/@syedbilal365) · [Jun 10](https://hashnode.com/posts/smartlookup-how-i-taught-a-pcf-to-read-your-quick-view-forms/6a293fdeb69d363edfdaf1e4) ### [SmartLookup — how I taught a PCF to read your Quick View Forms](https://syedbilal365.hashnode.dev/smartlookup-how-i-taught-a-pcf-to-read-your-quick-view-forms?utm_source=hashnode&utm_medium=feed) Drop on any Dataverse lookup. Hover. The card auto-pulls fields from the related entity's Quick View Form — zero per-PCF configuration 8 min read · [syedbilal365.hashnode.dev](https://syedbilal365.hashnode.dev/smartlookup-how-i-taught-a-pcf-to-read-your-quick-view-forms?utm_source=hashnode&utm_medium=feed) [Syed Bilal Ahmed](https://hashnode.com/@syedbilal365) · [Jun 6](https://hashnode.com/posts/liquidprogress-a-modern-visual-for-model-driven-power-apps/6a247abba04f1f2ae9bf90e6) ### [LiquidProgress: A Modern % Visual for Model-Driven Power Apps](https://syedbilal365.hashnode.dev/liquidprogress-a-modern-visual-for-model-driven-power-apps?utm_source=hashnode&utm_medium=feed) The plain percentage field shouldn't be so plain. Here's what I built to replace it — and what it looks like in a real form. 5 min read · [syedbilal365.hashnode.dev](https://syedbilal365.hashnode.dev/liquidprogress-a-modern-visual-for-model-driven-power-apps?utm_source=hashnode&utm_medium=feed) [Syed Bilal Ahmed](https://hashnode.com/@syedbilal365) · [Jun 2](https://hashnode.com/posts/how-i-structure-a-pcf-repo-for-clean-github-releases/6a1e8963ef413d77f5f43913) ### [How I Structure a PCF Repo for Clean GitHub Releases](https://syedbilal365.hashnode.dev/how-i-structure-a-pcf-repo-for-clean-github-releases?utm_source=hashnode&utm_medium=feed) A simple, step-by-step guide to shipping your PCF control as a managed solution zip — from an empty folder to a published release. 4 min read · [syedbilal365.hashnode.dev](https://syedbilal365.hashnode.dev/how-i-structure-a-pcf-repo-for-clean-github-releases?utm_source=hashnode&utm_medium=feed) [SapotaCorp](https://hashnode.com/@sapotacorpvn) · [May 24](https://hashnode.com/posts/pcf-control-with-react-18-and-typescript-our-project-template/6a127c490b516b808033c07e) ### [PCF control with React 18 and TypeScript: our project template](https://sapotacorpvn.hashnode.dev/pcf-control-with-react-18-and-typescript-our-project-template?utm_source=hashnode&utm_medium=feed) Most PCF tutorials stop at 'hello world.' The gap to a production-ready control - with types, tests, reliable builds, and solution packaging - is surprisingly wide. Here is the template repository we reach for on every new PCF, and the deci 5 min read · [sapotacorpvn.hashnode.dev](https://sapotacorpvn.hashnode.dev/pcf-control-with-react-18-and-typescript-our-project-template?utm_source=hashnode&utm_medium=feed) [Brandon Wozniewicz](https://hashnode.com/@scriptedBytes) · [May 23, 2025](https://hashnode.com/posts/how-to-use-react-19-in-pcf-components/6830767c62d9a28c0de11007) ### [How to Use React 19 in Power Apps PCF Components](https://freecodecamp.org/news/how-to-use-react-19-in-pcf-components?utm_source=hashnode&utm_medium=feed) The Power Apps Component Framework – PCF for short – lets you create complex custom components using traditional web development tools like HTML, CSS, and JavaScript. When creating a new PCF project, 7 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-use-react-19-in-pcf-components?utm_source=hashnode&utm_medium=feed) [Ahmad Sammour](https://hashnode.com/@ahmadnsam) · [Oct 16, 2022](https://hashnode.com/posts/advanced-text-area/634c4f083254c5d210dce6a9) ### [Advanced Text Area](https://viteapps.dev/advanced-text-area?utm_source=hashnode&utm_medium=feed) TailwindUI Kit 2 min read · [viteapps.dev](https://viteapps.dev/advanced-text-area?utm_source=hashnode&utm_medium=feed) [Ahmad Sammour](https://hashnode.com/@ahmadnsam) · [Sep 25, 2022](https://hashnode.com/posts/tailwind-css-for-your-pcf-control/6330a61aa50ebf1cd1491c89) ### [Tailwind CSS for your PCF control](https://viteapps.dev/tailwind-css-for-your-pcf-control?utm_source=hashnode&utm_medium=feed) UI libraries components are big? custom css takes more time? Tailwind CSS to the rescue 2 min read · [viteapps.dev](https://viteapps.dev/tailwind-css-for-your-pcf-control?utm_source=hashnode&utm_medium=feed) [Ahmad Sammour](https://hashnode.com/@ahmadnsam) · [Sep 4, 2022](https://hashnode.com/posts/state-management-simplified-with-zustand/6314f74bd49bb9d8c2f77934) ### [State management simplified with zustand](https://viteapps.dev/state-management-simplified-with-zustand?utm_source=hashnode&utm_medium=feed) zustand is a small, fast and scalable state management package that you can use with your react applications, it can be used as your data store within your PCF control. Github link Live Demo here Below are the benefits of using it, Bundle size is 1... 2 min read · [viteapps.dev](https://viteapps.dev/state-management-simplified-with-zustand?utm_source=hashnode&utm_medium=feed)