How to create simple Lookup using PCF Control

By | July 28, 2021

Introduction:

With the new updates of PowerApps Component Framework, now we can develop the PCF control for lookup field. Earlier, there was no supported way to develop the PCF Control for lookup field. However, with the new update, we can do this by using the lookup type property. In the below example, we have created a PCF control for lookup field and added the same on ‘Primary Contact’ lookup field of Account entity.

How to create simple Lookup using PCF Control

Given below are the steps to achieve the same:

1.     First, we need to add lookup type property in ControlManifest.Input.xml file using the code given below:

<property name=”sampleProperty” display-name-key=”Property_Display_Key” description-key=”Property_Desc_Key” of-type=”Lookup.Simple” usage=”bound” required=”true” />

2.    Next, define the ‘IInput and IOutputs’ for lookup in d.ts file.

// Define IInputs and IOutputs Type. They should match with ControlManifest.

export interface IInputs {

sampleProperty: ComponentFramework.PropertyTypes.LookupProperty;

}

export interface IOutputs {

sampleProperty?: ComponentFramework.LookupValue[];

}

3.     Now, add the action that on click of ‘Find Lookup’ button, it opens the lookupObjects to select the value:

private performLookupObjects(entityType: string, viewId: string, setSelected: (value: ComponentFramework.LookupValue, update?: boolean) => void): void {

// Used cached values from lookup parameter to set options for lookupObjects API

const lookupOptions = {

defaultEntityType: entityType,

defaultViewId: viewId,

allowMultiSelect: false,

entityTypes: [entityType],

viewIds: [viewId]

};

this._context.utils.lookupObjects(lookupOptions).then((success) => {

if (success && success.length > 0) {

// Cache the necessary information for the newly selected entity lookup

const selectedReference = success[0];

const selectedLookupValue: ComponentFramework.LookupValue = {

`              id: selectedReference.id,

name: selectedReference.name,

entityType: selectedReference.entityType

};

// Update the primary or secondary lookup property

setSelected(selectedLookupValue);

// Trigger a control update

this._notifyOutputChanged();

} else {

setSelected({} as ComponentFramework.LookupValue);

}

}, (error) => {

console.log(error);

});

}

4.      Next, on load of Lookup PCF control, set the current value in lookup using UpdateView function.

public updateView(context: ComponentFramework.Context<IInputs>): void

{

// Add code to update control view

//Update the main text field of the control to contain the raw data of the entity selected via lookup

const lookupValue: ComponentFramework.LookupValue = context.parameters.sampleProperty.raw[0];

this._context = context;

let propertyValue:any = lookupValue.name;

this._input.value = propertyValue;

}

5.      Finally, set the changed value of lookup using getOutputs function.

public getOutputs(): IOutputs

{

// Send the updated selected lookup item back to the ComponentFramework, based on the currently selected item

return { sampleProperty: [this._selectedItem] } ;

}

Conclusion:

In this way, with the help of new lookup type property, we can easily create PCF control for the lookup field.

Sharepoint Security Sync

Leave a Reply

Your email address will not be published. Required fields are marked *