Data Entry Form: Definition in TypeScript and HTML

The following topic describes how to configure a data entry form depending on its layout.

View Definition in TypeScript

For a form with a Summary area and multiple tabs, use the following in the TypeScript file of the form:

• For the summary view and the views that display one record, the createSingle method.
• For each property for the view that displays a grid, the createCollection method.
• For the summary view and each view for a tab, a class that extends PXView with the full list of fields to be displayed.
• The headerDescription decorator for a field in the Summary area whose value should be included in the form caption.
• The gridConfig and columnConfig decorators for each grid and its columns. For details, see Table (Grid).

The following code shows an example of the TypeScript configuration for the Sales Orders (SO301000) form above.

import
{
    createCollection,
    createSingle,
    PXScreen,
    graphInfo,
    PXActionState
} from "client-controls";
  
@graphInfo({graphType: 'PX.Objects.SO.SOOrderEntry', primaryView: 'Document'})
export class SO301000 extends PXScreen {
    //Actions that are used in qp-button tags in HTML
    AddInvoiceOK: PXActionState;
    OverrideBlanketTaxZone: PXActionState;
    ...
 
    //Properties for views
    Document = createSingle(SOOrderHeader);
    Transactions = createCollection(SOLine);
    Taxes = createCollection(SOTaxTran);
    CurrentDocument = createSingle(SOOrder);
    ...
  
    //Views
    export class SOOrderHeader extends PXView {
        OrderType: PXFieldState;
        OrderNbr: PXFieldState;
        Status: PXFieldState<PXFieldOptions.Disabled>;
        DontApprove: PXFieldState<PXFieldOptions.Disabled>;
        Approved: PXFieldState<PXFieldOptions.Disabled>;
        OrderDate: PXFieldState<PXFieldOptions.CommitChanges>;
        RequestDate: PXFieldState<PXFieldOptions.CommitChanges>;
        CustomerOrderNbr: PXFieldState<PXFieldOptions.CommitChanges>;
        CustomerRefNbr: PXFieldState;
        CuryInfoID: PXFieldState;
 
        @headerDescription CustomerID: PXFieldState<PXFieldOptions.CommitChanges>;
        CustomerLocationID: PXFieldState<PXFieldOptions.CommitChanges>;
        ContactID: PXFieldState<PXFieldOptions.CommitChanges>;
        CuryID: PXFieldState<PXFieldOptions.CommitChanges>;
        DestinationSiteID: PXFieldState<PXFieldOptions.CommitChanges>;
        ProjectID: PXFieldState<PXFieldOptions.CommitChanges>;
        OrderDesc: PXFieldState;
 
        OrderQty: PXFieldState<PXFieldOptions.Disabled>;
        CuryDiscTot: PXFieldState<PXFieldOptions.CommitChanges>;
        CuryVatExemptTotal: PXFieldState<PXFieldOptions.Disabled>;
        CuryVatTaxableTotal: PXFieldState<PXFieldOptions.Disabled>;
        CuryTaxTotal: PXFieldState<PXFieldOptions.Disabled>;
        CuryOrderTotal: PXFieldState<PXFieldOptions.Disabled>;
        CuryControlTotal: PXFieldState<PXFieldOptions.CommitChanges>;
        ArePaymentsApplicable: PXFieldState<PXFieldOptions.CommitChanges>;
        IsRUTROTDeductible: PXFieldState<PXFieldOptions.CommitChanges>;
        IsFSIntegrated: PXFieldState<PXFieldOptions.Disabled>;
 
        ShowDiscountsTab: PXFieldState;
        ShowShipmentsTab: PXFieldState;
        ShowOrdersTab: PXFieldState;
    }
 
    export class SOOrder extends PXView {
        BranchID: PXFieldState<PXFieldOptions.CommitChanges>;
        BranchBaseCuryID: PXFieldState;
        DisableAutomaticTaxCalculation: PXFieldState<PXFieldOptions.CommitChanges>;
        ...
    }
 
    @gridConfig({preset: GridPreset.Details, initNewRow: true, syncPosition: true, wrapToolbar: true, statusField: "Availability"})
    export class SOLine extends PXView {
        //Table toolbar actions
        AddInvBySite: PXActionState;
        ShowMatrixPanel: PXActionState;
        ...
  
        //Table columns
        Availability: PXFieldState<PXFieldOptions.Hidden>;
        @columnConfig({ allowShowHide: GridColumnShowHideMode.Server }) ExcludedFromExport: PXFieldState;
        IsConfigurable: PXFieldState;
        @columnConfig({ hideViewLink: true })
        BranchID: PXFieldState<PXFieldOptions.CommitChanges>;
        ...
    }
}

Layout in HTML

You define the layout of a data entry form by adding the following tags to the HTML code of the form:

• A qp-template tag. For details on using templates, see Form Layout: Predefined Templates.
• A qp-tabbar tag with a nested qp-tab element for each tab. For qp-tabbar, you specify the ID of the tab that is displayed by default in active-tab-id.
• For each tab that does not contain a grid, a nested qp-template tag.

The following example shows the HTML template for the Sales Orders (SO301000) form.

<template>
    <qp-template name="7-10-7" id="formDocument" wg-container>
        <qp-fieldset slot="A" id="first" view.bind="Document">
            <field name="OrderType"></field>
            <field name="OrderNbr"></field>
            ...
        </qp-fieldset>
        <qp-fieldset slot="B" id="second" view.bind="Document">
            <field name="CustomerID" config-allow-edit.bind="true"></field>
            <field name="CustomerLocationID" config-allow-edit.bind="true"></field>
            ...
        </qp-fieldset>
        <qp-fieldset slot="C" id="summary" view.bind="Document" caption="Summary">
            <field name="OrderQty"></field>
            <field name="CuryDiscTot"></field>
            ...
        </qp-fieldset>
    </qp-template>
 
    <qp-tabbar active-tab-id="tabDetails" id="tabs">
        <qp-tab id="tabDetails" caption="Details">
            <qp-grid view.bind="Transactions" topBarConfig.bind="{disableMenu: false}">
            </qp-grid>
        </qp-tab>
        <qp-tab id="tabFinancial" caption="Financial">
            <qp-template name="1-1-1" id="fin-form">
                <qp-fieldset slot="A" id="groupFinancial" view.bind="CurrentDocument"
                             caption="Financial Information">
                    <field name="BranchID"></field>
                    <field name="BranchBaseCuryID"></field>
                    ...
                </qp-fieldset>
                <div slot="B" class="v-stack">
                    <qp-fieldset id="groupPayment"
                                 view.bind="CurrentDocument"
                                 caption="Payment Information">
                        <field name="OverridePrepayment"></field>
                        <field name="PrepaymentReqPct"></field>
                        ...
                    </qp-fieldset>
                    <qp-fieldset id="groupOwnership"
                                 view.bind="CurrentDocument"
                                 caption="Ownership">
                        <field name="WorkgroupID"></field>
                        <field name="OwnerID"></field>
                    </qp-fieldset>
                    <qp-fieldset id="groupOther" view.bind="CurrentDocument"
                                 caption="Other Information">
                        <field name="OrigOrderType" config-enabled.bind="false"></field>
                        <field name="OrigOrderNbr" config-allow-edit.bind="true" config-enabled.bind="false"></field>
                        ...
                    </qp-fieldset>
                </div>
            </qp-template>
        </qp-tab>
        ...
    </qp-tabbar>
</template>