{"id":31002,"date":"2022-03-15T14:37:07","date_gmt":"2022-03-15T09:07:07","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=31002"},"modified":"2022-03-15T14:37:07","modified_gmt":"2022-03-15T09:07:07","slug":"execute-commands-programmatically-in-pcf-dataset-component","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/03\/execute-commands-programmatically-in-pcf-dataset-component\/","title":{"rendered":"Execute Commands Programmatically in PCF Dataset Component"},"content":{"rendered":"

Introduction:<\/strong><\/h2>\n

Recently, we came across a new method in PCF – retrieveRecordCommand<\/em><\/strong>. 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.<\/p>\n

So, let\u2019s see a scenario in which this method would come handy. Let\u2019s 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 <\/em><\/strong>method would save the day.<\/p>\n

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<\/em><\/strong> method.<\/p>\n

Given below are the few parameters for the retrieveRecordCommand <\/em><\/strong>method.<\/p>\n

\"PCF<\/p>\n

Now let\u2019s see how we can accomplish the above scenario.<\/p>\n

Working:<\/strong><\/p>\n

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.<\/p>\n

\"PCF<\/p>\n

By clicking these buttons, we will be executing the OOB commands as per the requirement.<\/p>\n

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<\/strong> and Refresh Button<\/strong>.<\/p>\n

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.<\/p>\n

After retrieving, the commands will render the DetailListGrid component.<\/p>\n

public updateView(context: ComponentFramework.Context<IInputs>): void {\r\n\r\nlet appProps: any = {};\r\n\r\n\/\/retrieve these commands\r\n\r\nlet specificCommands: string[] = [\"Mscrm.SubGrid.contact.ExportSelectedToExcel\", \"Mscrm.SubGrid.contact.RefreshButton\"];\r\n\r\ntry {\r\n\r\nif (!context.parameters.sampleDataSet.loading) {\r\n\r\n\/\/ columns for detail list grid\r\n\r\nlet columnsOnView = context.parameters.sampleDataSet.columns;\r\n\r\n\/\/records ids in a string array\r\n\r\nlet recordIds: string[] = context.parameters.sampleDataSet.sortedRecordIds;\r\n\r\n\/\/retrieve specific commands for all the records\r\n\r\ncontext.parameters.sampleDataSet.retrieveRecordCommand(recordIds, specificCommands).then((commands: any) => {\r\n\r\n\/\/get records for detail list grid\r\n\r\nlet pageRows = this.getAllPageRecords(columnsOnView, context.parameters.sampleDataSet);\r\n\r\n\/\/data sending to DetailsListGrid component\r\n\r\nappProps = { columnsOnView, pageRows, context, commands };\r\n\r\n\/\/rendering DetailsListGrid component\r\n\r\nReactDOM.render(React.createElement(DetailsListGrid, appProps), this._container);\r\n\r\n}).catch((error: any) => { console.log(error); });\r\n\r\n}\r\n\r\n} catch (error) {\r\n\r\nconsole.log(\"updateView \" + error);\r\n\r\n}\r\n\r\n}\r\n\r\n<\/pre>\n
In DetailListGrid component, we have a CommandBar and DetailList component. Below is the render method where we have called both the components.<\/p>\n
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.<\/p>\n
public render = () => {\r\n\r\nconst farItems = this.getFarItems();\r\n\r\nconst items = this.props.pageRows;\r\n\r\nthis._columns = this.mapCRMColumnsToDetailsListColmns(this._columnsOnView);\r\n\r\nreturn (\r\n\r\n<Fabric>\r\n\r\n<CommandBar items={[]}\r\n\r\nfarItems={farItems}\r\n\r\nariaLabel=\"Use left and right arrow keys to navigate between commands\"\r\n\r\n\/>\r\n\r\n<MarqueeSelection selection={this._selection}>\r\n\r\n<DetailsList\r\n\r\nitems={items}\r\n\r\ncolumns={this._columns}\r\n\r\nsetKey=\"set\"\r\n\r\nlayoutMode={DetailsListLayoutMode.justified}\r\n\r\nselection={this._selection}\r\n\r\nselectionPreservedOnEmptyClick={true}\r\n\r\nariaLabelForSelectionColumn=\"Toggle selection\"\r\n\r\nariaLabelForSelectAllCheckbox=\"Toggle selection for all items\"\r\n\r\ncheckButtonAriaLabel=\"Row checkbox\"\r\n\r\nonItemInvoked={this._onItemInvoked}\r\n\r\n\/>\r\n\r\n<\/MarqueeSelection>\r\n\r\n<\/Fabric>\r\n\r\n);\r\n\r\n}\r\n\r\n<\/pre>\n
getFarItems<\/strong> is the function from where we are getting our icon buttons. So, let\u2019s check that as well. For only the icons to be visible and not the text, we set iconOnly property as true.<\/p>\n
\/**\r\n\r\n* Get Command Bar Items\r\n\r\n* @returns ICommandBarItemProps[]\r\n\r\n*\/\r\n\r\nprivate getFarItems = (): ICommandBarItemProps[] => {\r\n\r\nlet farItems: ICommandBarItemProps[] = [];\r\n\r\ntry {\r\n\r\nfarItems = [\r\n\r\n{\r\n\r\nkey: 'Refresh',\r\n\r\ntext: 'Refresh',\r\n\r\nariaLabel: 'Refresh',\r\n\r\niconOnly: true,\r\n\r\niconProps: { iconName: 'Refresh' },\r\n\r\nonClick: () => { this.commandClick('Refresh') }\r\n\r\n},\r\n\r\n{\r\n\r\nkey: 'Download',\r\n\r\ntext: 'Download',\r\n\r\nariaLabel: 'Download',\r\n\r\niconOnly: true,\r\n\r\niconProps: { iconName: 'Download' },\r\n\r\nonClick: () => { this.commandClick('Download') }\r\n\r\n}\r\n\r\n]\r\n\r\n} catch (error) {\r\n\r\nconsole.log(\"getFarItems\" + ' ' + error);\r\n\r\n}\r\n\r\nreturn farItems;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nNow, we have two icon buttons Refresh and Download. By clicking these buttons commandClick method will be called.\r\n\r\n\u00a0\r\n\r\n\/**\r\n\r\n* check and execute the command\r\n\r\n* @param command\r\n\r\n*\/\r\n\r\nprivate commandClick = (command: string) => {\r\n\r\n\/\/get the commands from props\r\n\r\nlet commands = this.props.commands;\r\n\r\nlet specificCommand: any;\r\n\r\ntry {\r\n\r\nswitch (command) {\r\n\r\n\/\/if refresh icon is clicked\r\n\r\ncase 'Refresh':\r\n\r\n\/\/find the refresh command from the commands array\r\n\r\nspecificCommand = commands.find((command: any) => { return command.commandButtonId == \"Mscrm.SubGrid.contact.RefreshButton\" });\r\n\r\n\/\/execute the refresh command\r\n\r\nspecificCommand.execute();\r\n\r\nbreak;\r\n\r\n\/\/if download icon is clicked\r\n\r\ncase 'Download':\r\n\r\n\/\/find the download command from the commands array\r\n\r\nspecificCommand = commands.find((command: any) => { return command.commandButtonId == \"Mscrm.SubGrid.contact.ExportSelectedToExcel\" });\r\n\r\n\/\/execute the download command\r\n\r\nspecificCommand.execute();\r\n\r\nbreak;\r\n\r\n}\r\n\r\n} catch (error) {\r\n\r\nconsole.log(\"commandClick\" + ' ' + error);\r\n\r\n}\r\n\r\n}\r\n\r\n<\/pre>\n
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.<\/p>\n
In this function, we checked which icon button was clicked, found the command related to it, and executed the same.<\/p>\n
After clicking on the download button, export to excel command will run and the excel file will be downloaded.<\/p>\n
\"PCF<\/p>\n
Conclusion:<\/strong><\/h2>\n
Thus, we saw how we can retrieve the OOB commands and execute them in PCF Dataset Component.<\/p>\n
\"All<\/a><\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction: 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\u2019s see a scenario in which this method would come handy. Let\u2019s say\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,38,44,1929,2361],"tags":[1170,2207],"class_list":["post-31002","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-microsoft-powerapps","category-power-apps","category-pcf","category-technical","tag-microsoft-powerapps","tag-pcf-component"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=31002"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31002\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=31002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=31002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=31002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}