Recently, we came across a new method in PCF – retrieveRecordCommand. This method will help us to retrieve the related commands for specific record(s). It also gives the flexibility to retrieve only specific commands that the user wants to see.

So, let’s see a scenario in which this method would come handy. Let’s say we want to show a PCF Dataset Component in a sub grid without the OOB Command Bar, which is very much possible. But what if we also want to execute some of the OOB commands in some events. This is where the retrieveRecordCommand method would save the day.

Using this method, you can retrieve the commands and once you have access to those commands, you can even trigger them by using the execute method.

Given below are the few parameters for the retrieveRecordCommand method.

Now let’s see how we can accomplish the above scenario.

Working:

We have a sub grid of Contacts on Account, where we have configured our Detail List Fluent UI component. Above the list, we have added a Command Bar fluent UI component i.e. a bunch of icon buttons. Here, we need two commands so we will add two options (refresh and download) in our command bar. You can add as many you may like.

By clicking these buttons, we will be executing the OOB commands as per the requirement.

Given below is the UpdateView function in index.ts. In this function, we are retrieving the commands that we need to execute later. The specificCommands is a string array including the commandButtonId of two OOB commands i.e. Export to Excel and Refresh Button.

We took all the record ids from context.parameters.sampleDataSet.sortedRecordIds so that the commands retrieved must be against these records as the name of the method retrieveRecordCommand says it all. This method retrieves the commands against the records that were passed in it.

After retrieving, the commands will render the DetailListGrid component.

public updateView(context: ComponentFramework.Context<IInputs>): void { let appProps: any = {}; //retrieve these commands let specificCommands: string[] = ["Mscrm.SubGrid.contact.ExportSelectedToExcel", "Mscrm.SubGrid.contact.RefreshButton"]; try { if (!context.parameters.sampleDataSet.loading) { // columns for detail list grid let columnsOnView = context.parameters.sampleDataSet.columns; //records ids in a string array let recordIds: string[] = context.parameters.sampleDataSet.sortedRecordIds; //retrieve specific commands for all the records context.parameters.sampleDataSet.retrieveRecordCommand(recordIds, specificCommands).then((commands: any) => { //get records for detail list grid let pageRows = this.getAllPageRecords(columnsOnView, context.parameters.sampleDataSet); //data sending to DetailsListGrid component appProps = { columnsOnView, pageRows, context, commands }; //rendering DetailsListGrid component ReactDOM.render(React.createElement(DetailsListGrid, appProps), this._container); }).catch((error: any) => { console.log(error); }); } } catch (error) { console.log("updateView " + error); } } 

In DetailListGrid component, we have a CommandBar and DetailList component. Below is the render method where we have called both the components.

Here, in <CommandBar /> Fluent UI component we have items i.e. left-side command bar and farItems i.e. right-side command bar. Since we want our buttons to be appear on right side, we added the items in the farItems.

public render = () => { const farItems = this.getFarItems(); const items = this.props.pageRows; this._columns = this.mapCRMColumnsToDetailsListColmns(this._columnsOnView); return ( <Fabric> <CommandBar items={[]} farItems={farItems} ariaLabel="Use left and right arrow keys to navigate between commands" /> <MarqueeSelection selection={this._selection}> <DetailsList items={items} columns={this._columns} setKey="set" layoutMode={DetailsListLayoutMode.justified} selection={this._selection} selectionPreservedOnEmptyClick={true} ariaLabelForSelectionColumn="Toggle selection" ariaLabelForSelectAllCheckbox="Toggle selection for all items" checkButtonAriaLabel="Row checkbox" onItemInvoked={this._onItemInvoked} /> </MarqueeSelection> </Fabric> ); } 

getFarItems is the function from where we are getting our icon buttons. So, let’s check that as well. For only the icons to be visible and not the text, we set iconOnly property as true.

/** * Get Command Bar Items * @returns ICommandBarItemProps[] */ private getFarItems = (): ICommandBarItemProps[] => { let farItems: ICommandBarItemProps[] = []; try { farItems = [ { key: 'Refresh', text: 'Refresh', ariaLabel: 'Refresh', iconOnly: true, iconProps: { iconName: 'Refresh' }, onClick: () => { this.commandClick('Refresh') } }, { key: 'Download', text: 'Download', ariaLabel: 'Download', iconOnly: true, iconProps: { iconName: 'Download' }, onClick: () => { this.commandClick('Download') } } ] } catch (error) { console.log("getFarItems" + ' ' + error); } return farItems; }   Now, we have two icon buttons Refresh and Download. By clicking these buttons commandClick method will be called.   /** * check and execute the command * @param command */ private commandClick = (command: string) => { //get the commands from props let commands = this.props.commands; let specificCommand: any; try { switch (command) { //if refresh icon is clicked case 'Refresh': //find the refresh command from the commands array specificCommand = commands.find((command: any) => { return command.commandButtonId == "Mscrm.SubGrid.contact.RefreshButton" }); //execute the refresh command specificCommand.execute(); break; //if download icon is clicked case 'Download': //find the download command from the commands array specificCommand = commands.find((command: any) => { return command.commandButtonId == "Mscrm.SubGrid.contact.ExportSelectedToExcel" }); //execute the download command specificCommand.execute(); break; } } catch (error) { console.log("commandClick" + ' ' + error); } } 

We have wrote a switch case and find method to identify the command. If you want to add more commands you can add them in the commands array while retrieving this switch case.

In this function, we checked which icon button was clicked, found the command related to it, and executed the same.

After clicking on the download button, export to excel command will run and the excel file will be downloaded.

Conclusion:

Thus, we saw how we can retrieve the OOB commands and execute them in PCF Dataset Component.

Go to Source and hit them a thumps up

The post Execute Commands Programmatically in PCF Dataset Component appeared first on Microsoft Dynamics 365 Blog.

As new features and functionalities are being introduced in PowerApps Component Framework, we have observed many new methods in the PCF Dataset Component. In this blog, we will discuss about the new entity record methods which are going to replace the WebApi update methods and custom requests to update the records in the dataset component.

Now, let’s understand these methods with the help of a scenario.

Scenario:

Let’s consider a subgrid of employees where we have configured a Detail List Fluent UI component. In addition, we have a two-option field named as Email Verified (Yes/No), on which we have rendered the Toggle component of Fluent UI.

Here, our goal is to update the value of the Email Verified as well as the Registration Status fields on change of the Toggle on Email Verified. Based on the value of the toggle we shall not only update the value of Email Verified to Yes/No in the background but also set the value of the Registration Status to Registered when the toggle is Yes or Unregistered when the toggle is No.

As shown in the above image, if we click on the toggle to change, it will trigger a method, where we would use the setValue method to change the value of the above mentioned fields and after that we will need to make use of the save method to save the changes.

The save method is an asynchronous method. It saves the value of only those fields whose values were changed by the setValue method and not all the columns in the table.

In addition, after the save method is called the dataset does not update automatically. To get the latest dataset in your control, you will need to call the updateView again and for this you can use requestRender or refresh method. The best place to call the updateView will be in the success callback of save method.

Code:                                                                                                                                                            

/** * On Change of Email Verified field toggle * Update the email verified and registration status fields of the repsective record. * @param event - mouse event * @param checked - boolean value of the checkbox */ private onChangeOfToggle = async (event: any, checked?: boolean) => { //local variables let guid: string = ""; let record: any = null; try { //get the guid of the record whose toggle is changed guid = event.target.id != "" ? event.target.id : event.target.parentElement != null && event.target.parentElement.id != "" ? event.target.parentElement.id : ""; //get the record from dataset record = this.props.pcfContext.parameters.sampleDataSet.records[guid]; //setting the value of email verified field - record.setValue(columnName, value); record.setValue("new_emailverified", checked); //setting the value of Registration Status field based on checked value record.setValue("new_registrationstatus", checked ? "Registered" : "Unregistered"); //saving the record with save method await record.save(); //refreshing the dataset this.props.pcfContext.parameters.sampleDataSet.refresh(); //testing this.test(this.props.pcfContext, guid); } catch (error) { console.log("onChangeOfToggle " + error); } }

Now let us see the functionality explained above in action. When I change the toggle of Maria Campbell record, the Registration Status get changed from Unregistered to Registered as can be seen in the below screenshot:

Now, if you open the record and check, you will find the updated values for both the fields on the form as shown below:

Conclusion:

Thus, we have learned how to utilize the new setValue and save methods by updating different fields.

Go to Source and hit them a thumps up

The post How to use the SetValue and Save Methods in PCF Dataset Component 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.