Processing Form: No Selection Area or Grid Filters

The following topic describes how to configure a processing form that contains only a grid and does not contain a Selection area or grid filters (also called quick filters). (In the Classic UI, these forms were based on the GridView template.) The following screenshot shows an example of a form with this layout.

View Definition in TypeScript

For a processing form with only a grid (and no Selection area or grid filters), you need to use the following in the TypeScript file of the form:

• The createCollection method to define a property for the data view to display a grid.
• A class that extends PXView with the full list of fields for the grid.
• A Inquiry preset for the grid. For details about presets, see Form Layout: Grid Presets.

The following code shows an example of this implementation of a processing form.

import { autoinject } from 'aurelia-framework';
import {
    PXView, PXFieldState, commitChanges, graphInfo, PXScreen, createCollection
} from "client-controls";
 
@graphInfo({
    graphType: 'PX.Objects.CR.CRActivitySetupMaint',
    primaryView: 'ActivityTypes'
})
@autoinject
export class CR102000 extends PXScreen {
    ActivityTypes = createCollection(ActivityTypes);
}
 
@gridConfig({
    preset: GridPreset.PrimaryInquiry,
    quickFilterFields: ['ClassID', 'Type', 'Description']
})
export class ActivityTypes extends PXView {
    ClassID: PXFieldState
    Type: PXFieldState;
    Description: PXFieldState;
    Active: PXFieldState;
    IsDefault: PXFieldState;
    Application: PXFieldState<PXFieldOptions.CommitChanges>;
    ImageUrl: PXFieldState;
    PrivateByDefault: PXFieldState<PXFieldOptions.CommitChanges>;
    RequireTimeByDefault: PXFieldState<PXFieldOptions.CommitChanges>;
    Incoming: PXFieldState;
    Outgoing: PXFieldState;
}

Layout in HTML

For a processing form with only a grid (and no Selection area or grid filters), you define the layout by adding one qp-grid control to the HTML code of the form, as shown in the following example.

<template>
    <qp-grid id="grid" view.bind="ActivityTypes">
    </qp-grid>
</template>