How do I get presistent selection in Model Driven App subGrids/Grids?

97 views Asked by At

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?

0

There are 0 answers