In model driven app grids, when users make a selection and sort or refresh the view of the grid, the selection disappears. I am working on creating a purchase form in Model Driven app where the user creates a new entry and uses the subgrid to select the items that were purchased from the store. As the items are all unique/one off and there is a wide array of items that can be selected, naturally users would filter and unfilter to select items and unfilter to see if the selected items are correct.
I know that Canvas apps would fit my role quite well, however I cannot use it as each user in my team looks at different columns in the subgrid when creating their purchase records, hence the need for views and the sheer size of the subgrid would make the whole process very inefficient in canvas apps.
I have tried to use a component library in javascript to solve this problem before coming to realize that even though I can collect the selectedrecords, there is no way for me to select them again. Hence, I am currently looking to make a PCF component to resolve this issue.
I have the below code in typescript. But I get an error that EntityReference has no exported member in the manifest and the line import { ComponentFramework } from "powerapps-component-framework" is not a module.
import { IInputs, IOutputs, EntityReference } from "./generated/ManifestTypes";
import { ComponentFramework } from "powerapps-component-framework";
export class MaintainSelectionPCF implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private _context: ComponentFramework.Context<IInputs>;
private _dataset: ComponentFramework.PropertyTypes.DataSet;
private _selectedItems: EntityReference[] = [];
constructor(context: ComponentFramework.Context<IInputs>) {
this._context = context;
}
public init(): void {
// Get the dataset associated with the grid
this._dataset = this._context.parameters.gridDataset;
// Load selected items from a collection or initialize as empty
this._selectedItems = this._context.parameters.selectedItems.raw || [];
// Handle selection events
this._dataset.addOnLoad(this.handleLoad.bind(this));
this._dataset.addOnSelect(this.handleSelect.bind(this));
this._dataset.addOnDeselect(this.handleDeselect.bind(this));
// Ensure the view is initially updated
this.updateView();
}
private handleLoad(): void {
// When the grid data is loaded or refreshed, reapply selections
for (const item of this._selectedItems) {
this._dataset.setSelectedRecordIds([item.id]);
}
}
private handleSelect(selection: ComponentFramework.PropertyHelper.IRecord[]): void {
// When an item is selected in the grid, add it to the collection
for (const item of selection) {
this._selectedItems.push(item.getNamedReference());
}
}
private handleDeselect(deselection: ComponentFramework.PropertyHelper.IRecord[]): void {
// When an item is deselected in the grid, remove it from the collection
for (const item of deselection) {
this._selectedItems = this._selectedItems.filter(selectedItem => selectedItem.id !== item.getNamedReference().id);
}
}
public updateView(): void {
// Update the output parameter with the selected items
this._context.parameters.selectedItems.raw = this._selectedItems;
this._context.parameters.selectedItems.loading = false;
this._context.parameters.selectedItems.refresh();
}
public getOutputs(): IOutputs {
return {
selectedItems: this._selectedItems,
};
}
public destroy(): void {
// Cleanup
}
}
Manifest file below
export interface IInputs {
selectedItems: any;
gridDataset: ComponentFramework.PropertyTypes.Property;
sampleDataSet: ComponentFramework.PropertyTypes.DataSet;
}
export interface IOutputs {
selectedItems?: any;
}
I am not sure what is the best approach here?