Processing Form: A Form with a Selection Area and a Grid

The following topic describes how to configure a processing form that contains the Selection area and a table. (In the Classic UI, these forms were based on the FormDetail template.)

Examples of Form Layout

The following screenshot shows an example of a form that contains the Selection area and a table but does not contain table filters (also called quick filters).

Figure 1. A processing form with the Selection area

An example of a processing form that contains the Selection area, table filters (also called quick filters), and a table is shown in the following screenshot. The table filters are stored in the system data and are displayed for the table whose data view has the PXFilterable attribute. For an example of a form with stored table filters, see Assign Opportunities (CR503110) form.

Figure 2. A processing form with the Selection area and table filters

An example of a form that contains a single element in the Selection area and a table is shown in the following screenshot.

Figure 3. A processing form with one element in the Selection area and a table

View Definition in TypeScript

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

For the view that displays elements of the Selection area, you use the createSingle method.
For the view that displays the table, you use the createCollection method.
For each view, you use a class that extends PXView with the full list of fields to be displayed.
You use the gridConfig decorator for the table and the columnConfig decorator for the columns. For details, see Table (Grid): Configuration of the Table and Its Columns.
You use the PXFieldOptions.CommitChanges option for a field that corresponds to a filtering parameter in TypeScript to enable callback.
A preset for the table: Processing. For details about presets, see Form Layout: Grid Presets.

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.Processing })
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 the Selection area and a table (but no table 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>