Lately I come to design a PCF dataset component, where I needed two datasets for the same component. I’ve googled and searched all the blogs that I knew, but couldn’t find what I needed (maybe I just missed the right one). So I made some research. I’ll try to put together what I’ve found out and what I already knew. It’s not a blog about “how to implement”, it’s more about “the big picture”. Maybe it will help somebody else to design the dataset components.
Since this blog got pretty long, I decided to split it in three parts:
Since some parts are not exactly explained in the docs, they may change. I’ll try to keep this blog up to date in case I see some changes. In case my understanding of things is not correct, please reach out to me and tell me about it.
The power of provided datasources
First of all, why consider a PCF of type dataset anyway? You could have a field type PCF, make your own requests and show the data. What are the advantages of using a dataset PCF anyway?
One reason is that you get the data provided by the PCF Framework Runtime for you. This allows us to integrate in the customizing experience similar to OOB components. You can select the entity or the subgrid you want, and you are not forced to define some fetchXml inside some configuration resource, like you would have to in the old HTML WebResources.
Another important consideration is that PCF components can be used not only in ModelDriven Apps, but also inside CanvasApps (still in preview). So it’s not only limited to CDS. That means a huge opening to all kind of DataSources like SQL tables, Excel Workbooks, SharePoint lists and many more.
A big limitation that I know, is that you cannot directly manipulate the date inside a dataset PCF. So basically, the dataset is read-only. I am not aware of ways to make creates or updates directly on the datasource inside the dataset PCF. If you do, I would like to hear about it. There are some workarounds for this limitation. For instance in a ModelDriven App you could open a (Quick)Create/Edit form to input or change data or you could implement your own webApi requests with the provided “webAPI” feature that you can unlock by declaring that in the manifest. In the CanvasApps I’ve heard about using the Output Parameters, but I haven’t used that myself yet.
Features of a dataset PCF
You have the possibility to define the dataset PCF for the home grid , in the view itself and for the subgrids on the forms.
How can I interact with it?
A dataset proprety of a PCF tells the loading state
Paging & Sorting
A dataset property of a PCF component integrates the OOB paging and offers methods to work with paging: loadNextPage, loadPreviousPage, setPageSize or properties telling the position: hasNextPage, hasPreviousPage.
What it doesn’t do: it doesn’t offers you the possibility to show the UI part for paging: for navigating between pages you would have to implement your own UI.
More details about the paging behavior and differences between ModelDriven and CanvasApps can be found in the Scott Durow ‘s Blog : http://develop1.net/public/post/2020/05/07/pcf-dataset-paging-in-mode-vs-canvas-apps
Sorting belongs together with paging, so the sdk allows you to define the sorting by using the context.parameters.<yourDataset>.sorting.
OOB options – integration just like 1st party lists
To define a dataset parameter for your PCF, you need to define the data-set in the manifest. The sdk gives us this example:
<data-set name="dataSetGrid" display-name-key="DataSetGridProperty" cds-data-set-options="displayCommandBar:true;displayViewSelector:true;displayQuickFindSearch:true"> </data-set>
The interesting part is the “cds-data-set-options” attribute, allowing you to specify if you wish to have UI elements provided for you by the platform: the commandBar , the viewSelector and the search box.
Note: for subgrids was not enough to set this options in the manifest. To get the searchBox I had to allow it in the form-subgrid customizing too.
I had a small problem with the definition of “options”. The displayQuickFindSearch options worked for Home Grid and for “related view” but not for the subgrid. I found out that for me it had to be displayquickfind:true
This one worked for all the possibilities: home grid, subgrid and related grid. The Issue I’ve opened in the Community is still not answered, so I cannot say right now which option is the right one.
Maybe it’s worth to say that the fetchXml will search using the view defined for the dataset, and on top of that, more <filter> nodes will be added, based on the attributes defined for QuickSearchView.
I think is important to keep in mind that the searching using the searchBox configured this way is made on the server-side: each change in the search box will start a fetch and will trigger the updateView method for your component.
Ribbon interaction with CommandBar
The PCF sdk allows you to interact with the ribbon, by providing the possibility to set the selectedRecordIds. This will allow you to interact with the ribbon buttons, just like 1st class components.
This is an important aspect of dataset pcf compared to field-type PCFs or “old” HTMLWebResources. As soon the selectedRecordIds are set, you get automatically the ribbon buttons like the edit, delete, mark complete.
Working seamlessly with the ribbons means OOB access to edit/delete/setState functionality, but also allows the user to call flows (related with the selected records), send emails, or make exports. ❤️ This were the features we would have lost if we would have written a HTMLWebResource, just in the old times.