Processing Form: Selection Area and No Grid Filters

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

Figure 1. A processing form with a Selection area

View Definition in TypeScript

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

For the view that displays elements of the Selection area, use the createSingle method.
For the view that displays the grid, use the createCollection method.
For each view, use a class that extends PXView with the full list of fields to be displayed.
Use the gridConfig decorator for the grid and the columnConfig decorator for columns. For details, see Table (Grid).

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

import {
    PXScreen, createSingle, createCollection, graphInfo, PXView, PXFieldState, 
    gridConfig, columnConfig, linkCommand, PXActionState, PXFieldOptions
} from 'client-controls';
 
@gridConfig({ preset: GridPreset.PrimaryInquiry })
export class FABookBalance extends PXView {
 
    @columnConfig({ allowCheckAll: true })
    Selected: PXFieldState;
 
    @columnConfig({ hideViewLink: true })
    FixedAsset__BranchID: PXFieldState;
 
    @linkCommand('ViewAsset')
    @columnConfig({ allowUpdate: false })
    AssetID: PXFieldState;
 
    FixedAsset__Description: PXFieldState;
 
    @linkCommand('ViewClass')
    @columnConfig({ allowUpdate: false })
    ClassID: PXFieldState;
 
    @columnConfig({ hideViewLink: true })
    FixedAsset__ParentAssetID: PXFieldState;
 
    @linkCommand('ViewBook')
    @columnConfig({ allowUpdate: false })
    BookID: PXFieldState;
 
    @columnConfig({ allowUpdate: false })
    CurrDeprPeriod: PXFieldState;
 
    @columnConfig({ allowNull: false })
    YtdDeprBase: PXFieldState;
 
    @columnConfig({ allowUpdate: false })
    FixedAsset__BaseCuryID: PXFieldState;
 
    FADetails__ReceiptDate: PXFieldState;
 
    FixedAsset__UsefulLife: PXFieldState;
 
    @columnConfig({ hideViewLink: true })
    FixedAsset__FAAccountID: PXFieldState;
 
    @columnConfig({ hideViewLink: true })
    FixedAsset__FASubID: PXFieldState;
 
    FADetails__TagNbr: PXFieldState;
 
    @columnConfig({ hideViewLink: true })
    Account__AccountClassID: PXFieldState;
}
 
export class Filter extends PXView {
    OrgBAccountID: PXFieldState<PXFieldOptions.CommitChanges>;
    BookID: PXFieldState<PXFieldOptions.CommitChanges>;
    PeriodID: PXFieldState<PXFieldOptions.CommitChanges>;
    Action: PXFieldState<PXFieldOptions.CommitChanges>;
    ClassID: PXFieldState<PXFieldOptions.CommitChanges>;
    ParentAssetID: PXFieldState<PXFieldOptions.CommitChanges>;
}
 
@graphInfo({ graphType: 'PX.Objects.FA.CalcDeprProcess', primaryView: 'Filter' })
export class FA502000 extends PXScreen {
 
    ViewBook: PXActionState;
    ViewAsset: PXActionState;
    ViewClass: PXActionState;
 
    Filter = createSingle(Filter);
 
    Balances = createCollection(FABookBalance);
}

Layout in HTML

You define the layout for a processing form with a Selection area and grid (but no grid filters) by adding the following elements to the HTML code of the form:

A qp-template element to display the elements of the Selection area. For details on using templates, see Form Layout: Predefined Templates.
A qp-grid element with the list of records to process.

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

<template>
    <qp-template name="17-17-14" id="formFilter" wg-container="Filter_form">
        <qp-fieldset slot="A" id="columnFirst" view.bind="Filter">
            <field name="OrgBAccountID" control-type="qp-branch-selector"></field>
            <field name="BookID"></field>
            <field name="PeriodID"></field>
            <field name="Action"></field>
        </qp-fieldset>
        <qp-fieldset slot="B" id="columnSecond" view.bind="Filter">
            <field name="ClassID"></field>
            <field name="ParentAssetID"></field>
        </qp-fieldset>
    </qp-template>
    <qp-grid id="grid" view.bind="Balances">
    </qp-grid>
</template>