{"id":27310,"date":"2021-03-12T10:50:58","date_gmt":"2021-03-12T10:50:58","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=27310"},"modified":"2021-09-03T04:45:19","modified_gmt":"2021-09-03T04:45:19","slug":"how-to-show-command-bar-on-pcf-component-added-to-sub-grid","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/03\/how-to-show-command-bar-on-pcf-component-added-to-sub-grid\/","title":{"rendered":"How to show Command Bar on PCF Component added to Sub-grid"},"content":{"rendered":"

Introduction<\/h2>\n

PowerApps Component Framework is a natural successor of Web Resource. It gives us the choice to create field and dataset components and provide an enhanced user experience for the users to view and work with data in forms, views, and dashboards. While we were working on a request for a dataset PCF component that can be configured on the Home grid as well as on the Sub-grid, we saw that it does not incorporate add a new item, quick find, and View Selector which you would normally see escorting the OOB sub-grids. As shown in the below image, the command bar is not visible for our dataset component.<\/p>\n

\"show<\/a><\/p>\n

So, how to enable those commands in your Sub-grid?<\/p>\n

In this blog, we will show you how to enable the command buttons and view selector in your PCF component for Sub-grid.<\/p>\n

While building the PCF component you will get a data-set tag which contains all the property-set tags in Manifest.xml file.<\/p>\n

<data-set name=”sampleDataSet” display-name-key=”Dataset_Display_Key”><\/p>\n

In this tag, you will need to add cds-data-set-options attribute, which will enable the Commandbar, ViewSelector, QuickFind and other navigation items as shown below:<\/p>\n

<data-set name=”sampleDataSet” display-name-key=”Dataset_Display_Key” cds-data-set-options=”displayCommandBar:true;displayViewSelector:true;displayQuickFind:true”><\/p>\n

The cds-data-set-options<\/a> directs model-driven form to display the command bar, view selector, and the quick find when the Boolean value is true.<\/p>\n

You can enable\/disable these three properties mentioned below as per your requirements by changing the Boolean value.<\/p>\n\n\n\n\n\n\n
Property<\/th>\nValue<\/th>\nDescription<\/th>\n<\/tr>\n
displayCommandBar<\/td>\nBoolean<\/td>\nEnables\/Disables the command bar on the Subgrid.<\/td>\n<\/tr>\n
displayViewSelector<\/td>\nBoolean<\/td>\nEnables\/Disables the view selector in the Subgrid.<\/td>\n<\/tr>\n
displayQuickFind<\/td>\nBoolean<\/td>\nEnables\/Disables the quick find in the Subgrid.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Also, it is mandatory to enable View Selector as well as Display Search Box while adding the Sub-grid to the form in customization to make the View Selector and Quick Find work.<\/p>\n

\"1-show<\/a><\/p>\n

Note: In case if the view selector is off or Display Search Box is left untick in the customization, whether you enable them or not from the cds-data-set-options, View Selector and Quick Find (Search box) will not be visible on the Sub-grid.<\/p>\n

If you do not mention a property in the cds-data-set-options attribute, then it will by default take it as false and will not show on the Sub-grid.<\/p>\n

Also, these changes in the properties only affects the Sub-grid and not the Home grid.
\nNow, let us build our component with npm run build command.<\/p>\n

Note: If you are using an old version of PCF, you may get the following error while building your component –
\nManifest validation error: instance.manifest.control[0].data-set[0].$ additionalProperty \u201ccds-data-set-options\u201d exists in instance when not allowed<\/p>\n

To overcome and resolve this error you need to navigate to Manifestschema.json file (which is located in the node_modules\\pcf-scripts folder).<\/p>\n

In this file, search for dataSetAttribs and you will get the below object. Set the additionalProperties as true, which will do our work.<\/p>\n

\u201cdataSetAttribs\u201d: {
\n\u201ctype\u201d: \u201cobject\u201d,
\n\u201cproperties\u201d: {
\n\u201cname\u201d: { \u201ctype\u201d: \u201cstring\u201d },
\n\u201cdisplay-name-key\u201d: { \u201ctype\u201d: \u201cstring\u201d },
\n\u201cdescription-key\u201d: { \u201ctype\u201d: \u201cstring\u201d }
\n},
\n\u201crequired\u201d: [\u201cname\u201d, \u201cdisplay-name-key\u201d],
\n\u201cadditionalProperties\u201d: true
\n},<\/p>\n

This change is not required in the new version as Microsoft has given full support to this attribute and for the user with new version their object will appear as shown below:<\/p>\n

“dataSetAttribs”: {
\n“type”: “object”,
\n“properties”: {
\n“name”: {
\n“type”: “string”
\n},
\n“display-name-key”: {
\n“type”: “string”
\n},
\n“description-key”: {
\n“type”: “string”
\n},
\n“cds-data-set-options”: {
\n“type”: “string”
\n}
\n},
\n“required”: [
\n“name”,
\n“display-name-key”
\n],
\n“additionalProperties”: false
\n}
\nAfter building your component and adding it on your Sub-grid, you will be able to see the View Selector and all the command buttons.<\/p>\n

\"1-show<\/a><\/p>\n

Conclusion<\/h2>\n

As illustrated above, you can now easily enable or disable the command bar and navigation items in the Sub-grid PCF component.<\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction PowerApps Component Framework is a natural successor of Web Resource. It gives us the choice to create field and dataset components and provide an enhanced user experience for the users to view and work with data in forms, views, and dashboards. While we were working on a request for a dataset PCF component that\u2026 Read More: How to show Command Bar on PCF Component added to\u2026 »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,19,44],"tags":[2207],"class_list":["post-27310","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-dynamics-crm","category-power-apps","tag-pcf-component"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t