Dataset PCF using FluentUI: Selection

This is a part of my blog “My Checklist for a Dataset PCF using FluentUI“. To implement a footer, we need not only the paging (see my blog about paging), but also the selected records. This way the footer will look similar to standard grids. This blog post explains how I’ve implemented the selection. This is an important part, since it will activate the ribbon buttons for the selected records.

Selection

For my GridFooter component I need to pass the dataset and the selectedCount props.

The selectedCount I get from another Hook: useSelection

I will need this in two places: to define the callback property for DetailsList (keep track of selection when the DetailsList changes the selection), and for passing the selectedCount to my GridFooter component:

Selection Hook

The useSelection hook itself is looking like this (it’s really short):

The selection , is an instance of the “Selection” class; that’s the FluentUI way of defining a callback for the selection event, and will be the callback to pass to the DetailsList. The Selection class can be imported from FluentUI:

import {Selection} from '@fluentui/react/lib/DetailsList';

Inside the “onSelectionChanged” function, I get the chance to set the selectedCount in my state, every time the selection changes. It doesn’t feel natural to attach events this way; I would have expected an event; but it works, so I’m happy with that.

By calling dataset.setSelectedRecordIds(ids) inside the callback, I tell the PCF runtime which records were selected. That will activate the ribbon context for my selection.

In order to let the user have a better experience when selecting records, I’ve used from FluentUI the MarqueeSelection. I’ve just had to wrap the DetailsList inside my MarqueeSelection, and use my selection callback already defined. Now the user can use “Drag & Drop” for selecting records.

One thought on “Dataset PCF using FluentUI: Selection

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Powered by WordPress.com.

Up ↑

%d bloggers like this: