![\"Power](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/Technical-blog.png\")
<\/p>\n<\/p>\n
In this blog, we\u2019ll explore how using dependent libraries can significantly improve maintainability, reusability, and performance in Power Apps PCF controls. Through practical scenarios, we\u2019ll uncover how this architectural choice reduces bundle size and streamlines development.<\/p>\n
To illustrate this, let’s dive into a recent scenario our team encountered and how dependent libraries transformed our development process.<\/p>\n
Recently at work, our team was assigned to build two different PCF controls \u2013 one for showing a sales summary and another for displaying a forecast chart. Even though these were two separate controls, both of them needed the same kinds of utility functions and also used the same third-party libraries, such as input validators and rich text editors.<\/p>\n
Initially, we bundled these libraries separately within each control. But that approach caused several issues:<\/p>\n
As the application suite started to grow, these problems began to affect performance and maintainability.<\/p>\n
That\u2019s when we explored the concept of dependent libraries, a feature supported by Power Apps that completely changed the way we architect our controls.<\/p>\n
We will walk through the use cases where dependent libraries made a significant difference in the project:<\/p>\n
The blog also discusses why the shared UMD-based external library approach was chosen over bundling directly within each control, and how UMD vs. bundled libraries differ in the PCF context.<\/p>\n
UMD (Universal Module Definition)<\/strong> libraries allow shared code to be loaded once and made globally available across controls. In contrast:<\/p>\n Approach Used in This Blog:<\/strong> We’re using the UMD external library approach by creating a separate PCF component (like CommonLibrary) which exposes utilities globally. Then, other PCF controls can declare a dependency on this component and load it via loadDependency. This provides clean separation of concerns and optimized performance.<\/p>\n We were working on two different PCF controls:<\/p>\n Both controls needed consistent logic for formatting currency values and validating numbers. Rather than duplicating this logic in both controls, we decided to centralize it using a shared library.<\/p>\n To achieve this, we created a Library Component<\/strong>. According to Microsoft\u2019s guidance, \u201cThis component can provide some functionality or only be a container for the library.\u201d<\/em> In our case, it served as a container that simply injected shared JavaScript functions.<\/p>\n Note: This should be your folder structure and in place of dist folder you can use lib<\/strong><\/p>\n Both PCF controls can use the shared CommonUtils.js file, eliminating the need to duplicate code.<\/strong><\/p>\n We created a dedicated PCF control named CommonLibrary. It doesn\u2019t render anything visually but is responsible for injecting a shared JavaScript file (common-utils.js) into the page.<\/p>\n Here are a few functions that were commonly used in both the Sales Overview Grid and Forecast Chart Control. This utility library contains functions that handle currency formatting, input validation, percentage calculation, and empty string checks.<\/p>\n Here\u2019s the content of dist\/commonUtils.js using a UMD wrapper:<\/p>\n Step-by-Step: How We Set This Up<\/strong><\/p>\n First we scaffolded the control.<\/p>\n pac pcf init -n CommonLibrary -ns MyCompany -t field -npm Drop-in the helpers<\/p>\n Created dist\/commonUtils.js<\/strong>:<\/p>\n Ship TypeScript\u202ftypes (optional but polite)<\/p>\n The objects and functions in the library must be described in a new declaration file (d.ts). Enable preview flags & keep webpack from rebundling:<\/p>\n The image below shows the featureconfig.json file that we added to the root directory of our project.<\/p>\n Why this is important:<\/p>\n These settings are essential when working with shared libraries because they give you full control over how dependencies are treated and ensure your control stays lean.<\/p>\n Configure Webpack to Treat Library as External webpack.config.js<\/em> \/* eslint-disable *\/<\/p>\n “use strict”; module.exports = { externals: { “CommonUtils”: “CommonUtils” } };<\/p>\n Why?<\/p>\n This ensures Webpack won\u2019t include CommonUtils in your final bundle. Instead, it will expect it to be loaded externally \u2014 reducing control size and ensuring consistency across multiple controls.<\/p>\n Wire the manifest of CommonLibrabry Component<\/p>\n Expose the helpers on window<\/p>\n now we used this common library in other PCF controls<\/p>\n For example one of our control which is SalesOverviewGrid<\/p>\n First we Scaffolded + flag resource dependencies<\/p>\n Load the lib, render numbers<\/p>\n This is the sample index.ts for SalesOverviewGrid control<\/p>\n Benefits of This Approach<\/p>\n We needed to include a rich text editor in a custom PCF control\u2014specifically for enhancing notes on records. We chose TinyMCE because of its full-featured capabilities. However, including it on every load significantly increased the initial load time.<\/p>\n Solution: On-Demand Dependent Library<\/p>\n To optimize performance, we wanted to load TinyMCE only when the control actually required it\u2014such as when the text field became active<\/p>\n Steps to Implement:<\/strong><\/p>\n We used load-type=’onDemand’ to declare the dependency in the control’s manifest:<\/p>\n This tells the platform to load this dependency only when explicitly requested.<\/p>\n We updated the manifest to declare platform usage features:<\/p>\n This ensures on-demand loading is supported during page lifecycle execution.<\/p>\n We Built a lightweight control that only loads the TinyMCE script:<\/p>\n Once this component is defined, it can be reused anywhere you want TinyMCE available.<\/p>\n Whenever TinyMCE functionality is needed, we loaded it dynamically like below:<\/p>\n By using dependent libraries<\/strong> in Power Apps PCF controls, We\u2019ve been able to:<\/p>\n These patterns not only made our PCF development more efficient but also enhanced the maintainability of the solutions we delivered. Whether you’re building a complex UI component or just trying to avoid redundancy, dependent libraries are an underrated but powerful feature in the Power Apps toolkit.<\/p>\n","protected":false},"excerpt":{"rendered":" In this blog, we\u2019ll explore how using dependent libraries can significantly improve maintainability, reusability, and performance in Power Apps PCF controls. Through practical scenarios, we\u2019ll uncover how this architectural choice reduces bundle size and streamlines development. To illustrate this, let’s dive into a recent scenario our team encountered and how dependent libraries transformed our development\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[44,2361],"tags":[1170],"class_list":["post-41340","post","type-post","status-publish","format-standard","hentry","category-power-apps","category-technical","tag-microsoft-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/41340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=41340"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/41340\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=41340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=41340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=41340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Use Case #1: Sharing Utility Libraries Across Controls<\/h2>\n
Scenario<\/h3>\n
\n
The Shared Library Component (CommonLibrary)<\/h3>\n
![\"Power](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Power-Apps-Controls-FrameWork.png\")
<\/p>\nvar CommonUtils = (function (exports) {\r\n\r\n\"use strict\";\r\n\r\nfunction formatCurrency(amount: any, currencyCode?: string): string {\r\n\r\nconst numericValue = parseFloat(amount as any) || 0;\r\n\r\nconst formatter = new Intl.NumberFormat(\"en-IN\", {\r\n\r\nstyle: \"currency\",\r\n\r\ncurrency: currencyCode || \"INR\",\r\n\r\nminimumFractionDigits: 2,\r\n\r\n});\r\n\r\nreturn formatter.format(numericValue);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nfunction isValidNumber(input: any, options = {}) {\r\n\r\nconst minimum = options.min ?? Number.MIN_SAFE_INTEGER;\r\n\r\nconst maximum = options.max ?? Number.MAX_SAFE_INTEGER;\r\n\r\nif (input == null || (typeof input === \"string\" && input === \"\")) return false;\r\n\r\nconst parsed = Number(input);\r\n\r\nreturn !Number.isNaN(parsed) && parsed >= minimum && parsed <= maximum;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nfunction calculatePercentage(part: number, whole: number, decimals: number = 2) {\r\n\r\nif (!isValidNumber(part) || !isValidNumber(whole) || whole === 0) return 0;\r\n\r\nreturn Number(((part \/ whole) * 100).toFixed(decimals));\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nexports.formatCurrency = formatCurrency;\r\n\r\nexports.isValidNumber = isValidNumber;\r\n\r\nexports.calculatePercentage = calculatePercentage;\r\n\r\nreturn exports;\r\n\r\n})(typeof CommonUtils === \"undefined\" ? {} : CommonUtils);<\/pre>\n
\ncd CommonLibrary<\/p>\n\/\/ UMD wrapper so the module can be imported *or* attached to window\r\n\r\nvar CommonUtils = (function (exports) {\r\n\r\n\"use strict\";\r\n\r\n\u00a0\r\n\r\n\/**\r\n\r\n* Convert any numeric input into localised currency \u2013 defaults to INR.\r\n\r\n*\/\r\n\r\n\u00a0\r\n\r\nfunction formatCurrency(amount: any, currencyCode?: string): string {\r\n\r\nconst numericValue = parseFloat(amount as any) || 0;\r\n\r\nconst formatter = new Intl.NumberFormat(\"en-IN\", {\r\n\r\nstyle: \"currency\",\r\n\r\ncurrency: currencyCode || \"INR\",\r\n\r\nminimumFractionDigits: 2,\r\n\r\n});\r\n\r\nreturn formatter.format(numericValue);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n\/**\r\n\r\n* Light\u2011weight validator \u2013 NaN guard + optional range check.\r\n\r\n*\/\r\n\r\nfunction isValidNumber(input: any, options = {}) {\r\n\r\nconst minimum = options.min ?? Number.MIN_SAFE_INTEGER;\r\n\r\nconst maximum = options.max ?? Number.MAX_SAFE_INTEGER;\r\n\r\nif (input == null || (typeof input === \"string\" && input === \"\")) return false;\r\n\r\nconst parsed = Number(input);\r\n\r\nreturn !Number.isNaN(parsed) && parsed >= minimum && parsed <= maximum;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n\/**\r\n\r\n* Percentage with configurable precision and full safety nets.\r\n\r\n*\/\r\n\r\nfunction calculatePercentage(part: number, whole: number, decimals:number = 2) {\r\n\r\nif (!isValidNumber(part) || !isValidNumber(whole) || whole === 0) return 0;\r\n\r\nreturn Number(((part \/ whole) * 100).toFixed(decimals));\r\n\r\n}\r\n\r\nexports.formatCurrency = formatCurrency;\r\n\r\nexports.isValidNumbe = isValidNumber;\r\n\r\nexports.calculatePercentage = calculatePercentage;\r\n\r\nreturn exports;\r\n\r\n})(typeof CommonUtils === \"undefined\" ? {} : CommonUtils);<\/pre>\n
\nSo we created a new file called common-utils.d.ts and placed it in the project’s root folder:<\/p>\ncommon-utils.d.ts\r\n\r\ndeclare module \"CommonUtils\" {\r\n\r\nexport function formatCurrency(amount: number, currencyCode?: string): string;\r\n\r\nexport function isValidNumber(input: any, options?: { min?: number; max?: number }): boolean;\r\n\r\nexport function calculatePercentage(part: number, whole: number, decimals?: number): number;\r\n\r\n}\r\n\r\nWe included the variable in the global scope to expose our library as a UMD module. This required a new declaration file (.d.ts), which we added to the root directory of our project\r\n\r\nglobal.d.ts<\/em>\r\n\r\n\r\n\/* eslint-disable no-var *\/\r\n\r\ndeclare global {\r\n\r\nvar CommonUtils: typeof import(\"CommonUtils\");\r\n\r\n}\r\n\r\nexport { };\r\n\r\ntsconfig.json which is used in our controls:\r\n\r\n{\r\n\"extends\": \".\/node_modules\/pcf-scripts\/tsconfig_base.json\",\r\n\"compilerOptions\": {\r\n\"allowJs\": true,\r\n\"allowUmdGlobalAccess\": true,\r\n\"typeRoots\": [\"node_modules\/@types\"],\r\n\"outDir\": \"dist\"\r\n}\r\n}<\/pre>\n![\"Power](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/2Power-Apps-Controls-FrameWork.png\")
<\/p>\nfeatureconfig.json<\/em>\r\n\r\n{\r\n\"pcfAllowCustomWebpack\": \"on\",\r\n\"pcfAllowLibraryResources\": \"on\"\r\n}<\/pre>\n\n
<resources>\r\n<library name=\"CommonUtils\" version=\">=1\" order=\"1\">\r\n<packaged_library path=\"dist\/commonUtils.js\" version=\"0.0.1\" \/>\r\n<\/library>\r\n<code path=\"index.ts\" order=\"2\" \/>\r\n<\/resources><\/pre>\n
import * as CommonUtils from \"CommonUtils\";\r\n\r\nimport { IInputs, IOutputs } from \".\/generated\/ManifestTypes\";\r\n\r\n\u00a0\r\n\r\nexport class CommonLibrary implements ComponentFramework.StandardControl<IInputs, IOutputs> {\r\n\r\npublic init() { }\r\n\r\npublic updateView() { }\r\n\r\npublic getOutputs(): IOutputs {\r\n\r\nconst outputs: IOutputs = {};\r\n\r\nreturn outputs;\r\n\r\n}\r\n\r\npublic destroy() { }\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n\/\/ one-liner that puts the module on the global scope \u2013 key for consumers\r\n\r\n(function () { window.CommonUtils = CommonUtils; })();<\/pre>\npac pcf init -n SalesOverviewGrid -ns MyCompany -t field -npm\r\ncd SalesOverviewGrid\r\n\r\nfeatureconfig.json\r\n\r\n{ \"pcfResourceDependency\": \"on\" }\r\n\r\nWe Included the dependency declaration in the SalesOverviewGrid manifest file.\r\n\r\n<resources>\r\n<dependency type=\"control\" name=\"publisher_MyCompany.CommonLibrary\" order=\"1\" \/>\r\n<code path=\"index.ts\" order=\"2\" \/>\r\n<\/resources><\/pre>\nimport { IInputs, IOutputs } from \".\/generated\/ManifestTypes\";\r\n\r\n\/\/ Declare the external library attached to window\r\n\r\ndeclare const window: {\r\nCommonUtils: {\r\nformatCurrency: (amount: number, currencyCode?: string) => string;\r\n};\r\n};\r\n\r\nexport class SalesOverviewGrid implements ComponentFramework.StandardControl<IInputs, IOutputs> {\r\nprivate table!: HTMLTableElement;\r\nprivate context!: ComponentFramework.Context<IInputs>;\r\n\r\npublic init(ctx: ComponentFramework.Context<IInputs>): void {\r\nthis.context = ctx;\r\nthis.table = document.createElement(\"table\");\r\nctx.container.appendChild(this.table);\r\n}\r\n\r\npublic updateView(ctx: ComponentFramework.Context<IInputs>): void {\r\n\r\n\/\/ Load external library using the recommended loadDependency approach\r\n\r\nctx.utils.loadDependency?.(\"publisher_MyCompany.CommonLibrary\")\r\n\r\n.then(() => this.render())\r\n\r\n.catch((e) => console.error(\"CommonUtils load error\", e));\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nprivate render(): void {\r\n\r\nconst monthlySums = [1234.56, 9876.54, 13579.24];\r\n\r\nthis.table.innerHTML = \"\";\r\n\r\nmonthlySums.forEach(v => {\r\n\r\nconst row = this.table.insertRow();\r\n\r\nrow.insertCell().innerText = window.CommonUtils.formatCurrency(v, \"INR\");\r\n\r\n});\r\n\r\n}\r\n\r\n\u00a0\r\n\r\npublic getOutputs(): IOutputs {\r\n\r\nconst outputs: IOutputs = {};\r\n\r\nreturn outputs;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\npublic destroy(): void { }\r\n\r\n}<\/pre>\nWe did the same for the ForecastChartControl or any other PCF control.<\/h3>\n
\n
Use Case #2: Lazy Loading TinyMCE Editor with Dependent Libraries<\/h2>\n
Scenario:<\/h3>\n
1. Configure Manifest with On-Demand Load<\/h4>\n
<platform-action action-type=\"afterPageLoad\" \/>\r\n<feature-usage>\r\n<uses-feature name=\"Utility\" required=\"true\" \/>\r\n<\/feature-usage>\r\n<resources>\r\n<code path=\"index.ts\" order=\"1\" \/>\r\n<dependency type=\"control\"\r\nname=Publisher_MyCompany.TinyMCEStub\"\r\nload-type=\"onDemand\" \/>\r\n<\/resources><\/pre>\n
2. Declare Required Platform Features<\/h4>\n
<platform-action action-type=\"afterPageLoad\" \/>\r\n<feature-usage>\r\n<uses-feature name=\"Utility\" required=\"true\" \/>\r\n<\/feature-usage><\/pre>\n
3. Create the TinyMCE Stub Library Component<\/h4>\n
export class TinyMCEStub implements ComponentFramework.StandardControl<{}, {}> {\r\npublic init(): void {\r\nconst script = document.createElement(\"script\");\r\nscript.src = \"https:\/\/cdn.tiny.cloud\/1\/no-api-key\/tinymce\/6\/tinymce.min.js\";\r\nscript.async = true;\r\ndocument.head.appendChild(script);\r\n}\r\npublic updateView(): void {}\r\npublic getOutputs(): IOutputs {\r\n\r\nconst outputs: IOutputs = {};\r\n\r\nreturn outputs;\r\n\r\n}\r\npublic destroy(): void {}\r\n}<\/pre>\n4. Load the Editor Dynamically in the Dependent Control<\/h4>\n
context.utils.loadDependency?.(\"publisher_MyCompany.TinyMCE\")\r\n\r\n.then(() => {\r\n\r\n(window as any).tinymce.init({\r\n\r\ntarget: document.getElementById(\"editor\")\r\n\r\n});\r\n\r\n})\r\n\r\n.catch((err: any) => console.error(\"TinyMCE load error:\", err));<\/pre>\nBenefits:<\/h3>\n
\n
Conclusion: Real Productivity Gains<\/h2>\n
\n