With the release of Power Apps Component Framework, the focus has now drastically shifted to designing a UI that is intuitive to use and especially ones that require minimal clicks to get going. N:N relationships has long been a touchy topic here where if you would like to associate more than one records with another record, the solution was designing a native N:N relationship between the 2 tables which created an intermediary table and with that the UI presented was that of a sub-grid that could be added to form.

Need:

Overtime MSFT updated the N:N sub-grids to allow quickly inline adding of the records quickly without the need for the full-blown form. And yet that has not been the ideal solution for end users that usually require the ability to go ahead and select all associated records in one go and click an ok to have them set. Since the availability of PCF, many community solutions that provide a multi-select interface for N:N records have been made available and you can browse through them at pcf.gallery

We were pleasantly surprised to find a Multiselect Lookup control OOB with a CRM trial we were working on.

Looks like it is being shipped as part of field service (found the tech control name when it crashed and showed an error). In case you don’t find it in your environment this could be the reason.

Show me how to use it:

There isn’t a document available for it, but it is easy to get started with this control. Let us take a scenario where we have to allow for selection of multiple users who would act as approvers for a Quote. Traditionally it would have been an N:N relationship between Quote and System User tables. To explore this control, we instead decide to add a text field. Note this control is only available to be configured for fields of the type Single Line Text.

We added the Approvers field to the Quote table as Text field with the max length as 4000.

Next switch to classic form designer and add the Approvers field to the form and here we will configure this field to use the multiselect lookup control. Edit the approvers field on the form and move to the controls tab in field properties and choose Add Control as shown below:

Select the MultiSelectLookupControl from the list and choose Add to bring you back to the following screen:

Configure the control to be displayed on Web interface and/or Phone and Tablet based on your preference.

Let us now check the properties that need to be set for this control. The property names are not too descriptive but here is what you need to provide for each of them:

entityName – The logical name of the entity that you want to lookup to. In an N:N relationship this would have been the other entity of the relationship. In our example we will set it to systemuser as we need to allow selection of multiple Users as approvers for the quote.

defaultViewId – Since this is going to provide you with a lookup control to the entity specified above, we need to also provide the default view that is used to show the selection list in the lookup interface. To get the view id, you can navigate to the home page of the entity and choose the view. The id of the selected view is reflected in the URL. Not user friendly but that is how it is for now.

And you are done. Save and publish the form to see the lookup control in action with the same native lookup experience on the quote form.

Once you have made all the selections, the user interface will update to show as following.

Do note however that behind the scenes, this is being stored in JSON format which is not user friendly and would require dev experience to parse and use the information for purposes other than displaying it on a form.

If you add this field to the view, it would display the data in JSON array format. Since we are not allowed to configure a PCF control for a grid column as yet, you will not be able to provide the descriptive names of the selected records in this column.

Same is the case if these need to be included in Reports or in Power Automate flows – you will need some parsing logic to parse out the descriptive names or record id out of this for processing.

And since it is stored in JSON format, make sure that the text column that is being used has been set to max length of 4000 and this is another limitation where with 4000 being the max limit there is only limited count of related records that can be associated.

Conclusion:

While this control does provide a native multiselect lookup experience that users of Dynamics 365 CRM and Dataverse are familiar with, you do need to take into account the fact that using this control entails developer experience for any further utilization of the data stored in these fields.

Go to Source and hit them a thumps up

The post Multiselect Lookup control PCF now available in Dynamics 365 CRM appeared first on Microsoft Dynamics 365 Blog.

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.

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.

Go to Source and hit them a thumps up

The post How to create simple Lookup using PCF Control appeared first on Microsoft Dynamics 365 Blog.