Let’s take an example where we will create a virtual drop-down PCF control. We will be showing the entity attributes as options in our drop-down control. In the example below, we have created an async function   GetEntityAttribute which will be responsible for getting the entity attributes to list out in our PCF drop-down control.

If we call our async function GetEntityAttribute in the updateView() as follows, we will not get the options with dropdown as shown in the below image.

UpdateView() Then:

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {

//Local variables let isDisable: boolean = false; let isMultiple: boolean = false; let dropDownProps: any; //Calling function to get the attributes this.GetEntityAttribute(context);   //Calling function to get the selected values this.selectedItem = this.getSelecetdItems(context) dropDownProps = { entityMetadata: this.entityAttributes, defaultSelectedOptions: this.selectedItem, isMultiple: isMultiple, isDisable: isDisable, notifyChange: this.notifyChange.bind(this), context: context }; return React.createElement( DynamicDropdown, dropDownProps ); }

Field Interface then:

It happens because when an async function is called and executed the program control directly jumps to the next line of the updateView() and executes it first and renders a dropdown control with no options. It then goes again to the async function to execute the code after await where we had our array of all attributes. Since the control was rendered already, we will not get a drop-down with options.

To solve this issue we will use the useEffect() function of the react and call async functions inside it rather than calling the async function in the updateView(). Thus, the updateView() will now look as follows.

UpdateView() Now:

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement { //Local variables let isDisable: boolean = false; let isMultiple: boolean = false; let dropDownProps: IDynamicDropdownProps = {}; let entityName: string | null = ""; entityName = context.parameters.entityName.raw ?            context.parameters.entityName.raw : context.parameters.fieldName.raw; //Reading the parameters dropDownProps = { isDisable: isDisable, isMultiple: isMultiple, entityName: entityName, context: context, notifyChange: this.notifyOnSelect.bind(this) } return React.createElement( DynamicDropdown, dropDownProps ); }

We will create a Helper.ts file containing the functions and then create the object of the class containing all the functions in App.tsx file which consists of a functional component. We have also passed a dependency to ensure that the useEffect() gets called every time there’s a change in the entity name.

Helper.ts

public GetEntityAttribute = async (entityName: any) => { //Local variables let functionName: string = "GetEntityAttribute()=>"; let res: any; let attributesLogicalname: any = []; let result: any; let entityAttributes: any = []; try { if (!this.isValid(entityName)) { return { options: entityAttributes } } //Making request for entity metadata to get logical names of the attributes res = await this._context.utils.getEntityMetadata(entityName); //Getting all logical name of the attributes and storing it in the array attributesLogicalname = res._entityDescriptor.AttributeNames; //Making request to get logical name as well as display name of the attributes result = await this._context.utils.getEntityMetadata(entityName,                      attributesLogicalname); //Converting the object keys to an array for iteration let response = Object.keys(result.Attributes._collection); //Pushing the attributes into the array for (let j = 0; j < response.length; j++) { if (result.Attributes._collection[response[j]].DisplayName != null) { entityAttributes.push({ key: result.Attributes._collection[response[j]].LogicalName, text: result.Attributes._collection[response[j]].DisplayName }) } } entityAttributes.sort(function (a: any, b: any) { if (a.text < b.text) { return -1 } if (a.text > b.text) { return 1 } return 0; }); } catch (error: any) { //Handling error this._context.navigation.openErrorDialog({ message: functionName + ": Kindly check the entity name and it must be in lowercase" }) } return { options: entityAttributes } }   App.tsx:   useEffect(() => { _CrmHelper.GetEntityAttribute(props.entityName).then((success) => { //Setting the dropdown options setDropDownOptions(success.options) }); }, [props.entityName])

Field Interface Now:

Conclusion

Thus, we saw how to use Async-await on a load of virtual PCF control.

Please visit the Source and support them

The post Use of async-await in virtual PCF control appeared first on Microsoft Dynamics 365 Blog.

Let’s have a look at the issue first. As seen in the below screenshot, I have added our PCF control on the First Name field. Kindly refer to this blog to have a look at it as well. Here you can see that the contact does have a first name, but isn’t being rendered in our control.

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.

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.

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 –

/** * 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. * @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 * @returns ReactElement root react element for the control */ public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement { //@ts-ignore let isPropertyLoading:boolean = context.parameters.textField.isPropertyLoading; if(!isPropertyLoading){ const props: IStringChekerProps = { defaultValue: context.parameters.textField.raw!, onInputChanged: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => { this.currentFieldValue = newValue!; this.isValidString = this.validateStringField(this.currentFieldValue); this.notifyOutputChanged(); } } return React.createElement( StringCheker, props ); } else { return React.createElement("div"); } }

What I’ve 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 –

Conclusion – This is how we can use isPropertyLoading to prevent displaying empty PCF values even though data exists.

Go to Source and hit them a thumps up

The post Use of isPropertyLoading property in PCF Control appeared first on Microsoft Dynamics 365 Blog.

In our recent project, we created a PCF Control in which we designed a date-time control. In the same control, we had a requirement to format the input date value to the given Date/Time field behavior in the date/time field of Dynamics 365 CRM. In Dynamics 365 CRM, date/time field have three types of behavior such as User Local, Date Only, Time-Zone Independent as shown in the below screenshot:

To achieve this, we have used the formatTime method of formatting API in Power Apps. With this method, you can format the date/time values in dateTime field behavior.

Please find below the code to format the input date/time values in PCF Control:

//Function that return result in datetime format from input date value formatToTime (context: ComponentFramework.Context<IInputs>, inputDateValue:any) { return context.formatting.formatTime(inputDateValue, 0); } //Function that return result in datetime format from input date value formatToTime (context: ComponentFramework.Context<IInputs>, inputDateValue:any){ return context.formatting.formatTime(inputDateValue, 1); }

After running the debugger, the result of formatting input date/time values to dateTime format will be as below:

Conclusion

With the help of Formatting API in Power Apps, we can easily format the input date values to the dateTime behavior format.

Go to Source and hit them a thumps up

The post Format date-time value using Formatting API in PCF Control appeared first on Microsoft Dynamics 365 Blog.

Recently in one of our project, we had come acorss a requirement where we needed to create a PCF control for multi select optionset field  with which user can visualize the values in a list form.

In the new updates of PowerApps Component Framework, with the help of MultiSelectOptionSet type property, now we can develop the PCF control for multi select optionset field. We have given an example, where we create a PCF control for multi select optionset field and added the same on custom multi select optionset field.

Given below are the steps to achieve the same:

1. First we need to add MultiSelectOptionSet property in ControlManifest.Input.xml file. The code is as follows:

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

2. Now define the IInput and IOutputs for multi select optionset in ManifestTypes.d.ts file.

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

export interface IInputs {

sampleProperty: ComponentFramework.PropertyTypes.MultiSelectOptionSetProperty;

}

export interface IOutputs {

sampleProperty?: number[];

}

3. On load of multi select PCF control, set the current field value in multi select control inside init function.

//Create a select option for each option specified by the target OptionSet and add it to the dropdown

(context.parameters.sampleProperty as ComponentFramework.PropertyTypes.MultiSelectOptionSetProperty).attributes?.Options.forEach(option => {

const dropdownOption = document.createElement(“option”);

dropdownOption.setAttribute(“value”, String(option.Value));

dropdownOption.innerText = option.Label;

dropdownOption.onclick = this.updateIndividualSelected.bind(this, dropdownOption);

dropdownOption.selected = this._selectedOptions.includes(option.Value);

this._dropdown.appendChild(dropdownOption);

});

4. Add the action on select of multi select optionset to select/deselect the option.

//onClick callback for individual options in the dropdown. Clicking an option will add/remove it

private updateIndividualSelected(option: HTMLOptionElement): void {

const value = Number(option.getAttribute(“value”))

const index = this._selectedOptions.indexOf(value);

if (index === -1) {

this._selectedOptions.push(value);

option.selected = true;

option.className = “TestBlue”;

} else {

this._selectedOptions.splice(index, 1);

option.selected = false;

option.className = “TestWhite”;

}

this._notifyOutputChanged();

}

5. Set the changed value of multi select optionset using getOutputs function.

//It is called by the framework prior to a control receiving new data.

public getOutputs(): IOutputs

{

//Send the currently selected options back to the ComponentFramework

return { sampleProperty: this._selectedOptions } ;

}

Conclusion:

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

Go to Source and hit them a thumps up

The post Create Multi Select Optionset using PCF Control appeared first on Microsoft Dynamics 365 Blog.

If you know Power Apps Component Framework, then you must know the updateView method, which is one of the standard methods of PCF.

The updateView method is triggered only when the PCF control is refreshed or rendered and shows us the updated data on our control.

We work on the dataset as well as field type components in PCF. In the dataset, we usually use context.dataset.refresh to refresh the dataset control, which calls the updateView method. Some users also use setState method to re-render a particular component. However, sometimes it becomes difficult to manage the data in the state.

In addition, on using setState only the component for which the state is changed gets re-rendered while all the other components in the PCF control remains as it is.

We recently had a requirement to refresh a field component. However, there is no appropriate refresh method for field component, which can work as same as context.dataset.refresh method.

So to overcome this limitation, let me introduce you a method named as requestRender. It is available for both dataset as well as field components, using this method we can re-render the PCF control. You can use this method as shown here, context.factory.requestRender().

It is similar to refresh method in dataset control; requestRender calls the updateView method and re-renders the control.

Scenario:

Let’s say we are using a single fluent UI component i.e., contextual menu and on click of its menu items, we want to set the button text to the selected menu item as shown below.

To achieve this, we can use setState, but sometimes it becomes difficult to maintain the state. Here, to make our work simple yet efficient, requestRender comes to the rescue.

Below is our Contextual Menu component class code, which we are calling from index.ts file by passing context as props in it.

Here, we selected Tomorrow option and it gets set as the button label.

Code:

export class FluentUIContextualMenu extends React.Component<any, any> {
private _buttonText: string = “Later Today”;
constructor(props: any) {
super(props);
}

render(): JSX.Element {
let menuItems: IContextualMenuItem[] = this.getMenuItems();
return (
<>
<DefaultButton text={this._buttonText}
menuProps={
{
shouldFocusOnMount: true,
directionalHint: DirectionalHint.bottomLeftEdge,
items: menuItems
}
}
/>
</>
)
}

private getMenuItems = (): IContextualMenuItem[] => {
let menuItems: any = [];
menuItems = [
{
key: ‘Later Today’,
iconProps: { iconName: ‘Clock’ },
text: ‘Later Today’,
onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {
this.onMenuItemClick(event, item);
}
},
{
key: ‘Tomorrow’,
iconProps: { iconName: ‘Coffeescript’ },
text: ‘Tomorrow’,
onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {
this.onMenuItemClick(event, item);
}
},
{
key: ‘This Weekend’,
iconProps: { iconName: ‘Vacation’ },
text: ‘This Weekend’,
onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {
this.onMenuItemClick(event, item);
}
},
{
key: ‘Next Week’,
iconProps: { iconName: ‘Suitcase’ },
text: ‘Next Week’,
onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {
this.onMenuItemClick(event, item);
}
},
];
return menuItems;
}

private onMenuItemClick = (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {
this._buttonText = item.text != undefined ? item.text : this._buttonText;
this.props.context.factory.requestRender();
}
}

Explanation:

In the function onMenuItemClick, the global variable this._buttonText takes the updated text from contextual menu item and this.props.context.factory.requestRender(); renders the control, which calls the updateView method and the selected text remains intact in the global variable that shows the updated text on the contextual menu button.

Similarly, as we know, there is no refresh method available for the field component, unlike the dataset, which has one. We can use the requestRender method in the field component to refresh it.

Another good thing about the requestRender method is that, similar to the setState it maintains and gives the updated data to the user.

Conclusion: In this blog, we learned how to call the UpdateView method programmatically using RequestRender, which eventually helps in refreshing the entire PCF control thus helping us see our changes efficiently.

Reference: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/factory/requestrender

Go to Source and hit them a thumps up

The post How to programmatically call UpdateView in PCF using requestRender 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.

In this blog, we will see how we can sort records in the dataset in PCF control. The dataset object does have the property “sorting” which we can use to sort records according to a particular column in ascending or descending order.

To keep dataset designing simple and easy to understand we will be using the React Fluent UI framework’s “DetailList-Basic” control in our example. You can also use simple HTML, Javascript, and CSS for dataset grid as per the design.

As we are using DetailList, the ‘onColumnClick’ event has parameter that represents the column which is clicked. On this event, we can write the below code:

// when a column header is clicked sort the items
const _onColumnClick = (ev?: React.MouseEvent, column?: any): void => {
let dataset = props.pcfContext.parameters.sampleDataSet;
const newValue: any = {
name: column.fieldName,
sortDirection: column.isSortedDescending ? 0 : 1
}
while (dataset.sorting.length > 0) {
dataset.sorting.pop();
}
dataset.sorting.push(newValue);
(dataset.paging as any).loadExactPage(1);
dataset.refresh();
let isSortedDescending = !column?.isSortedDescending;
setItems(dataset.sorting);
setColumns(
columns.map(col => {
col.isSorted = col.key === column?.key;
col.isSortedDescending = isSortedDescending;
return col;
})
);
}

In the above code, we first need to get the current sorting direction of the selected column after which we can change it in the opposite direction. For example, if the current direction is ‘ascending’ then we will change it into ‘descending’ and vice versa. For that, we need to check dataset.sorting. To change the current SortStatus of the dataset column, we have to pass the object that contains the name (the name of the column) and sortDirection (the current sort direction of the column).

SORTDIRECTION

After changing the SortStatus, we need to call dataset.refresh(), otherwise, there will be no desired effect.

Also, we have to navigate to the first page if we want that sorting to be applied to the entire dataset instead of applied only for dataset visible on the same page.

dataset.sorting.push(newValue);
(dataset.paging as any).loadExactPage(1);
dataset.refresh();

Conclusion

By using Sorting, we can easily sort records in the PCF control dataset for a particular column in ascending/descending order.

Go to Source and hit them a thumps up

The post How to Sort Dataset in PCF Control? appeared first on Microsoft Dynamics 365 Blog.

As we know, PCF control can be run in multiple languages. Each language has a script to be written and it will be written with a direction. Some languages are written in the left-to-right direction, whereas some are written in the right-to-left. For example, English language script is written left to write, whereas Arabic language script is written in the right-to-left direction.

In PCF control, when the user interface language is set to Arabic, then the direction of the user interface will be switched in the right-to-left direction. To handle this situation in PCF control, we can use userSettings API of Power Apps. This API helps us to identify whether the user interface language is written in right-to-left or not and makes it easy to change the user interface on the basis of the language.

Please find the code below:

//function that returns the value of isRTL property
isRTL(context: ComponentFramework.Context<IInputs>) {
return context.userSettings.isRTL;
}

For example, we have field type PCF control in which the field returns the value of isRTL property. We have set the user interface language is English, that’s why isRTL returns false as seen in the screenshot below.

In the below example, we have set the Arabic language as a user interface language, hence isRTL shows true.

Conclusion

By using UserSettings API, we can easily get the direction in which the language is to be written and make the required changes in the user interface.

Go to Source and hit them a thumps up

The post isRTL property of UserSettings API in PCF Control to Determine Language within Dynamics 365 CRM appeared first on Microsoft Dynamics 365 Blog.

In this blog, we will get the idea on how we can check current if the logged-in user has Read/Write/Update access to any specific entity or not.

Scenario

We have one Boolean type PCF control on the Account entity. Based on the Yes / No value of PCF control, we want to create a Contact entity record for the Current Account.

So, when the user is trying to set ‘Yes’ to the ‘Create Contact’ field, we want to first check whether the current user has ‘ to Create’ permission of Contact entity record or not.

Solution

We will achieve this with the help of context.utils.hasEntityPrivilege function that is used to detect whether the current logged-in user has Read/Write permission for a specific entity or not. In our case, we need to check if the active users have ‘to Create’ permission for the Contact entity record. Please find the below code that we have used to find out the same.
context.utils.hasEntityPrivilege(“contact”,1,3)
where,
contact = Entity type name for which we have to find privilege details for the said entity.
1 = It indicates Entity privilege type such as Read, Write, etc. In the above scenario, we check for Create privilege so 1 is associated with ‘Create’. Please find some other Entity type names with their code:
None = 0
Create = 1
Read = 2
Write = 3
Delete = 4
Assign =5
Share =6
Append =7
AppendTo =8
3 = It indicates the entity privilege depth of the specified entity. It has the following values:
None = -1
Basic = 0
Local = 1
Deep = 2
Global = 3
So, by calling this function, we found that the current logged in user has ‘to Create’ permission for Contact entity record as shown in the below screenshot:

As per the result given by context.utils.hasEntityPrivilege function, we take a decision to create a record contact entity record or not.

Conclusion

Using context.utils.hasEntityPrivilege, we can easily retrieve the current logged in user privilege details.

Go to Source and hit them a thumps up

The post Check whether the current logged in Dynamics 365 CRM user has necessary security privileges for a specific entity in PCF Control appeared first on Microsoft Dynamics 365 Blog.

Please find the example below, we have set the user settings as Italian (Italy).

In the code below, we have written the code to format the input values in our PCF Control:

//Function that return result in user currency format from input value
formatToCurrency(context: ComponentFramework.Context<IInputs>, inputValue:any) {
return context.formatting.formatCurrency(inputValue);
}

//Function that return result in user decimal format from input value
formatToDecimal(context: ComponentFramework.Context<IInputs>, inputValue:any) {
return context.formatting.formatDecimal(inputValue);
}

Please find the screenshot below where we have run the debugger to see the result of the format of input values to user format i.e. Italian (Italy).

Conclusion:

With the help of the Formatting API of Power Apps, we can easily format the input values for the login user format.

Go to Source and hit them a thumps up

The post Format input values using Formatting API in PCF Control within Dynamics 365 CRM appeared first on Microsoft Dynamics 365 Blog.