Skip to main content
Solved

Custom Tab Not Appearing in Customers Screen using Modern UI

  • June 9, 2025
  • 2 replies
  • 135 views
P
Jr Varsity II
Forum|alt.badge.img

Hi,

I’m trying to add a custom tab to the Customers screen, but it’s not displaying on the screen. I’ve attempted the implementation using the following code, but the tab is not appearing. Could anyone help me to troubleshoot this issue.

AR303000_extensionGeneral.html

<template>
    <qp-tabbar modify id="tabs">
        <qp-tab add id="tab13" caption="Additional Info">
                <qp-grid id="CustBankPerCustomerView_PXGrid0288" view.bind="CustBankPerCustomerView"></qp-grid>
            </qp-tab>
</qp-tabbar>
</template>

AR303000_extensionGeneral.ts

import { PXView, PXFieldState, PXFieldOptions, linkCommand, gridConfig, graphInfo, columnConfig, GridColumnShowHideMode, GridColumnType, PXActionState, TextAlign, GridPreset, GridFilterBarVisibility, GridFastFilterVisibility } from "client-controls";
import { Customer } from "../AR303000";
export interface AR303000_extensionGeneral extends Customer { }
@gridConfig({
    syncPosition: true,
    showFastFilter: GridFastFilterVisibility.False,
    preset: GridPreset.Details
})
export class AR303000_extensionGeneral extends PXView {

    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) IsActive: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 280 }) Terms: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 280 }) BankInfo: PXFieldState;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cad: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Lc: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Tt: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Tob: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cif: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cfr: PXFieldState<PXFieldOptions.CommitChanges>;
}

Thank you in advance.

Premalatha

Best answer by premalathan35

Here is my solution.

import { PXView, PXFieldState, PXFieldOptions, linkCommand, gridConfig, graphInfo, columnConfig, GridColumnShowHideMode, GridColumnType, PXActionState, TextAlign, GridPreset, GridFilterBarVisibility, GridFastFilterVisibility, createSingle, createCollection } from "client-controls";
import {
    AR303000
} from "src/screens/AR/AR303000/AR303000";
export interface AR303000_extensionHeader2 extends AR303000 { }
export class AR303000_extensionHeader2 {
    CustBankPerCustomerView = createCollection(CustBankPerCustomerView);

}
@gridConfig({
    preset: GridPreset.Details
})
export class CustBankPerCustomerView extends PXView {
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) IsActive: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 280 }) Terms: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 280 }) BankInfo: PXFieldState;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cad: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Lc: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Tt: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Tob: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cif: PXFieldState<PXFieldOptions.CommitChanges>;
    @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cfr: PXFieldState<PXFieldOptions.CommitChanges>;
}

 

HTML:

<template>
    <qp-tab after="#tabMailingPrinting"
            id="tab-AdditionalInfoN"
            caption="Additional Info">
        <qp-grid id="grid-NewCustomCustBankPerCustomerView" view.bind="CustBankPerCustomerView">
        </qp-grid>
    </qp-tab>
</template>

Premalatha N

    2 replies

    P
    Jr Varsity II
    Forum|alt.badge.img
    • premalathan35
    • Author
    • Jr Varsity II
    • Answer
    • January 30, 2026

    Here is my solution.

    import { PXView, PXFieldState, PXFieldOptions, linkCommand, gridConfig, graphInfo, columnConfig, GridColumnShowHideMode, GridColumnType, PXActionState, TextAlign, GridPreset, GridFilterBarVisibility, GridFastFilterVisibility, createSingle, createCollection } from "client-controls";
    import {
        AR303000
    } from "src/screens/AR/AR303000/AR303000";
    export interface AR303000_extensionHeader2 extends AR303000 { }
    export class AR303000_extensionHeader2 {
        CustBankPerCustomerView = createCollection(CustBankPerCustomerView);

    }
    @gridConfig({
        preset: GridPreset.Details
    })
    export class CustBankPerCustomerView extends PXView {
        @columnConfig({ width: 60, type: GridColumnType.CheckBox }) IsActive: PXFieldState<PXFieldOptions.CommitChanges>;
        @columnConfig({ width: 280 }) Terms: PXFieldState<PXFieldOptions.CommitChanges>;
        @columnConfig({ width: 280 }) BankInfo: PXFieldState;
        @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cad: PXFieldState<PXFieldOptions.CommitChanges>;
        @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Lc: PXFieldState<PXFieldOptions.CommitChanges>;
        @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Tt: PXFieldState<PXFieldOptions.CommitChanges>;
        @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Tob: PXFieldState<PXFieldOptions.CommitChanges>;
        @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cif: PXFieldState<PXFieldOptions.CommitChanges>;
        @columnConfig({ width: 60, type: GridColumnType.CheckBox }) Cfr: PXFieldState<PXFieldOptions.CommitChanges>;
    }

     

    HTML:

    <template>
        <qp-tab after="#tabMailingPrinting"
                id="tab-AdditionalInfoN"
                caption="Additional Info">
            <qp-grid id="grid-NewCustomCustBankPerCustomerView" view.bind="CustBankPerCustomerView">
            </qp-grid>
        </qp-tab>
    </template>

    Premalatha N
      Jhon Reeve Penuela
      Freshman I

      hi ​@premalathan35 here one of the things I did to display the tab.

       

      This part is my html file.

      <template>
          <qp-tab id="purchaseOrderTab" caption="Purchase Order" load-on-demand.bind="true" after="#profitabilityTab">
              <qp-grid id="PXGridPurchaseOrders" view.bind="PurchaseOrders"></qp-grid>
          </qp-tab>
      </template>

       

      and this is my ts file.

      import {
          PXFieldState,
          PXView,
          viewInfo,
          gridConfig,
          GridPreset,
          createCollection
      } from "client-controls";
      import { FS300100 } from "src/screens/FS/FS300100/FS300100";

      export interface FS300100_AISPurchaseOrderTabInServiceOrder
          extends FS300100 { }
      export class FS300100_AISPurchaseOrderTabInServiceOrder {
          @gridConfig({ preset: GridPreset.Inquiry })
          @viewInfo({ containerName: "Purchase Order" })
          PurchaseOrders = createCollection(POOrder);
      }

      export class POOrder extends PXView {
          UsrAISServiceOrderNbr: PXFieldState;
          UsrAISServiceOrderType: PXFieldState;
          OrderType: PXFieldState;
          OrderNbr: PXFieldState;
          OrderDate: PXFieldState;
          VendorID: PXFieldState;
          VendorID_BAccountR_acctName: PXFieldState;
          OrderTotal: PXFieldState;
          Status: PXFieldState;
      }
      I Hope this helps you.
      Jhon Reeve
        Terms & ConditionsCookie settingsAccessibility statement
        About Acumatica ERP system
        Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
        © 2008 — 2024  Acumatica, Inc. All rights reserved