{"id":32803,"date":"2022-10-13T12:00:56","date_gmt":"2022-10-13T06:30:56","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=32803"},"modified":"2026-02-12T11:41:06","modified_gmt":"2026-02-12T06:11:06","slug":"use-of-ispropertyloading-property-in-pcf-control","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/10\/use-of-ispropertyloading-property-in-pcf-control\/","title":{"rendered":"Use of isPropertyLoading property in PCF Control"},"content":{"rendered":"

Recently, while working with a virtual Power Apps Component Framework (PCF)<\/a> control in a model-driven app, you may encounter a situation where your PCF control does not load the bound field data on the first load of the form.<\/p>\n

Let\u2019s have a look at the issue first. As seen in the below screenshot, you have added your custom PCF control to the First Name field of a Contact record. Kindly refer to this blog<\/a> to have a look at it as well. Here you can see that the contact does have a First Name value, but your PCF control is not rendering the existing value during the initial form load.<\/p>\n

\"PCF<\/p>\n

This happens, because as per my observation the PCF controls end up loading first before the full form is loaded which causes an issue while loading the default values. So to overcome this, I will use a property that is passed through context known as isPropertyLoading.<\/p>\n

As per my observation, isPropertyLoading will return true until the form is completely loaded and the context can get actual field values instead of null.<\/p>\n

So I will add a conditional rendering based on the isPropertyLoading property. Where I will render our component only when isPropertyLoading is false. Below is how I will implement this \u2013<\/p>\n

\/**\r\n\r\n* It is called when some value in the property bag has been changed. This includes field values, data sets, global values such as the container height and width, offline status, and control metadata values such as label, visible, and more.\r\n\r\n* @param context The entire property bag is available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions\r\n\r\n* @returns ReactElement root react element for the control\r\n\r\n*\/\r\n\r\npublic updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {\r\n\r\n\/\/@ts-ignore\r\n\r\nlet isPropertyLoading:boolean = context.parameters.textField.isPropertyLoading;\r\n\r\nif(!isPropertyLoading){\r\n\r\nconst props: IStringChekerProps = {\r\n\r\ndefaultValue: context.parameters.textField.raw!,\r\n\r\nonInputChanged: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => {\r\n\r\nthis.currentFieldValue = newValue!;\r\n\r\nthis.isValidString = this.validateStringField(this.currentFieldValue);\r\n\r\nthis.notifyOutputChanged();\r\n\r\n}\r\n\r\n}\r\n\r\nreturn React.createElement(\r\n\r\nStringCheker, props\r\n\r\n);\r\n\r\n}\r\n\r\nelse {\r\n\r\nreturn React.createElement(\"div\");\r\n\r\n}\r\n\r\n}<\/pre>\n
What I\u2019ve done is we are returning the empty element by return React.createElement(“div”); when isPropertyLoading is true and return the actual component only when the isPropertyLoading is false. After this change, the control will load normally like the below \u2013<\/p>\n
\"PCF<\/p>\n
This is how we can use isPropertyLoading to prevent displaying empty PCF values even though data exists.<\/p>\n
FAQs<\/strong><\/h2>\n
    \n
  • What is isPropertyLoading in PCF?<\/strong><\/li>\n<\/ul>\n
    isPropertyLoading is a property available inside context.parameters.<fieldName> in a Power Apps PCF control.<\/p>\n
    It indicates whether the field data in the property bag is still loading.<\/p>\n
      \n
    • Returns true \u2192 Field data is still being initialized<\/li>\n
    • Returns false \u2192 Field data is available<\/li>\n<\/ul>\n
      You can use this property to handle PCF lifecycle timing issues and prevent null rendering.<\/p>\n
        \n
      • Why does context.parameters.raw return null in PCF?<\/strong><\/li>\n<\/ul>\n
        If context.parameters.<field>.raw returns null, it usually means the form has not completed loading the field data yet.<\/p>\n
        This is a common issue in model-driven app PCF controls, especially during the first execution of updateView().<\/p>\n
        Using isPropertyLoading ensures you access raw only after the property bag is fully initialized.<\/p>\n
          \n
        • How do you fix PCF default value not rendering?<\/strong><\/li>\n<\/ul>\n
          If your PCF default value is not rendering, you can:<\/p>\n
            \n
          1. Check parameters.<field>.isPropertyLoading<\/li>\n
          2. Render your React component only when it is false<\/li>\n
          3. Return an empty container while it is true<\/li>\n<\/ol>\n
            This prevents the control from rendering before the field value becomes available.<\/p>\n