Step 1: Add Lookup Property in ControlManifest.Input.xml<\/strong><\/p>\nFirst, we need to add lookup type property in ControlManifest.Input.xml file using the code given below:<\/p>\n
<property\u00a0name=\"sampleProperty\"\u00a0display-name-key=\"Property_Display_Key\"\u00a0description-key=\"Property_Desc_Key\"\u00a0of-type=\"Lookup.Simple\"\u00a0usage=\"bound\"\u00a0required=\"true\"\u00a0\/>\r\n<\/pre>\nThis step is critical, as it enables the PCF control to bind directly to a Dataverse lookup field.<\/p>\n
Step 2: Define IInputs and IOutputs in the d.ts File<\/strong><\/p>\nNext, define the input and output interfaces so they match the lookup property defined in the manifest.<\/p>\n
\/\/\u00a0Define\u00a0IInputs\u00a0and\u00a0IOutputs\u00a0Type.\u00a0They\u00a0should\u00a0match\u00a0with\u00a0ControlManifest.\r\nexport\u00a0interface\u00a0IInputs\u00a0{\r\nsampleProperty:\u00a0ComponentFramework.PropertyTypes.LookupProperty;\r\n}\r\nexport\u00a0interface\u00a0IOutputs\u00a0{\r\nsampleProperty?:\u00a0ComponentFramework.LookupValue[];\r\n}\r\n<\/pre>\nThis allows the framework to pass lookup values into the control and receive updated values back.<\/p>\n
Step 3: Open Lookup Dialog Using lookupObjects API<\/strong><\/p>\nNow, add the action that, on click of \u2018Find Lookup\u2019 button, it opens the lookupObjects to select the value:<\/p>\n
private\u00a0performLookupObjects(entityType:\u00a0string,\u00a0viewId:\u00a0string,\u00a0setSelected:\u00a0(value:\u00a0ComponentFramework.LookupValue,\u00a0update?:\u00a0boolean)\u00a0=>\u00a0void):\u00a0void\u00a0{\r\n\/\/\u00a0Used\u00a0cached\u00a0values\u00a0from\u00a0lookup\u00a0parameter\u00a0to\u00a0set\u00a0options\u00a0for\u00a0lookupObjects\u00a0API\r\nconst\u00a0lookupOptions\u00a0=\u00a0{\r\ndefaultEntityType:\u00a0entityType,\r\ndefaultViewId:\u00a0viewId,\r\nallowMultiSelect:\u00a0false,\r\nentityTypes:\u00a0[entityType],\r\nviewIds:\u00a0[viewId]\r\n};\r\nthis._context.utils.lookupObjects(lookupOptions).then((success)\u00a0=>\u00a0{\r\nif\u00a0(success\u00a0&&\u00a0success.length\u00a0>\u00a00)\u00a0{\r\n\/\/\u00a0Cache\u00a0the\u00a0necessary\u00a0information\u00a0for\u00a0the\u00a0newly\u00a0selected\u00a0entity\u00a0lookup\r\nconst\u00a0selectedReference\u00a0=\u00a0success[0];\r\nconst\u00a0selectedLookupValue:\u00a0ComponentFramework.LookupValue\u00a0=\u00a0{\r\nid:\u00a0selectedReference.id,\r\nname:\u00a0selectedReference.name,\r\nentityType:\u00a0selectedReference.entityType\r\n};\r\n\/\/\u00a0Update\u00a0the\u00a0primary\u00a0or\u00a0secondary\u00a0lookup\u00a0property\r\nsetSelected(selectedLookupValue);\r\n\/\/\u00a0Trigger\u00a0a\u00a0control\u00a0update\r\nthis._notifyOutputChanged();\r\n}\u00a0else\u00a0{\r\nsetSelected({}\u00a0as\u00a0ComponentFramework.LookupValue);\r\n}\r\n},\u00a0(error)\u00a0=>\u00a0{\r\nconsole.log(error);\r\n});\r\n}\r\n<\/pre>\nThis opens the standard Dataverse lookup dialog and allows users to select a record.<\/p>\n
Step 4: Set Existing Lookup Value Using updateView<\/strong><\/p>\nWhen the PCF control loads, use the updateView function to populate the control with the existing lookup value.<\/p>\n
public\u00a0updateView(context:\u00a0ComponentFramework.Context<IInputs>):\u00a0void\r\n{\r\n\/\/\u00a0Add\u00a0code\u00a0to\u00a0update\u00a0control\u00a0view\r\n\/\/Update\u00a0the\u00a0main\u00a0text\u00a0field\u00a0of\u00a0the\u00a0control\u00a0to\u00a0contain\u00a0the\u00a0raw\u00a0data\u00a0of\u00a0the\u00a0entity\u00a0selected\u00a0via\u00a0lookup\r\nconst\u00a0lookupValue:\u00a0ComponentFramework.LookupValue\u00a0=\u00a0context.parameters.sampleProperty.raw[0];\r\nthis._context\u00a0=\u00a0context;\r\nlet\u00a0propertyValue:any\u00a0=\u00a0lookupValue.name;\r\nthis._input.value\u00a0=\u00a0propertyValue;\r\n}\r\n<\/pre>\nThis ensures the lookup field displays the currently selected record when the form loads.<\/p>\n
Step 5: Return Updated Lookup Value Using getOutputs<\/strong><\/p>\nFinally, return the updated lookup value to Dataverse using the getOutputs function.<\/p>\n
public\u00a0getOutputs():\u00a0IOutputs\r\n{\r\n\/\/\u00a0Send\u00a0the\u00a0updated\u00a0selected\u00a0lookup\u00a0item\u00a0back\u00a0to\u00a0the\u00a0ComponentFramework,\u00a0based\u00a0on\u00a0the\u00a0currently\u00a0selected\u00a0item\r\nreturn\u00a0{\u00a0sampleProperty:\u00a0[this._selectedItem]\u00a0}\u00a0;\r\n}\r\n<\/pre>\nThis step ensures that the selected lookup value is saved correctly to the bound field.<\/p>\n
\u00a0<\/strong><\/p>\nConclusion:<\/strong><\/p>\nWith the introduction of the Lookup.Simple property type, creating lookup-based PCF controls in Power Apps has become fully supported and much easier.<\/p>\n
This approach allows developers to build custom lookup experiences while maintaining compatibility with Dataverse and model-driven apps. When implemented correctly, lookup PCF controls can enhance usability without compromising platform stability.<\/p>\n
FAQs <\/strong><\/p>\nWhat is Lookup.Simple in PCF?<\/strong><\/p>\nLookup.Simple is a property type introduced in PCF that allows controls to bind directly to Dataverse lookup fields in a supported way.<\/p>\n
Can this PCF control be used in model-driven apps?<\/strong><\/p>\nYes. Lookup PCF controls using Lookup.Simple are fully supported in model-driven apps.<\/p>\n
Is multi-select lookup supported with this approach?<\/strong><\/p>\nNo. The Lookup.Simple property supports single-value lookups only.<\/p>\n
Which API is used to open the lookup dialog?<\/strong><\/p>\nThe context.utils.lookupObjects API is used to open the standard Dataverse lookup dialog.<\/p>\n
Is this approach supported by Microsoft?<\/strong><\/p>\nYes. Using Lookup.Simple is the official and supported method for implementing lookup PCF controls.<\/p>\n
![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/07\/image001-ink-3.png\")
<\/a><\/p>\n