Skip to main content
Question

Grid Not Appearing in Modern UI After Conversion

  • March 9, 2026
  • 3 replies
  • 60 views
I

In the Classic UI, the grid is present, as shown in the screenshot below (highlighted for reference). However, after converting the screen to Modern UI and adding the grid in both the HTML and TS files, the grid still does not appear in the Modern UI. Please refer to the screenshots and HTML and TS code below, and please suggest the solution.

HTML File :

<template>

  <qp-fieldset slot="A" id="frmGroupCustomZipCodesSync" view.bind="CurrentStore" caption="Custom Zip Codes Sync uk1" class="no-label" wg-container after="#frmGroupB2BCustomer">

    <field name="UsrKNWWSPEnableCustomZipSync"></field>

  </qp-fieldset>

  <qp-fieldset slot="A" id="frmGroupCustomPriceSync" view.bind="CurrentStore" caption="Custom Price Sync" wg-container after="#groupInventorySettings">

    <field name="UsrKNWWSPEnableCustomPriceSync"></field>

    <field name="UsrKNWWSPPriceType"></field>

    <field name="UsrKNWWSPPriceClassCode" config-enabled.bind="CurrentStore.UsrKNWWSPEnableCustomPriceSync && CurrentStore.UsrKNWWSPPriceType != null && CurrentStore.UsrKNWWSPPriceType != ''"></field>

  </qp-fieldset>

  <qp-fieldset slot="B" id="frmGroupShopifyCanceledOrders" view.bind="CurrentBindingShopify" caption="Shopify Canceled Orders" wg-container after="#CurrentBindingShopify_SalesQuoteOrders">

    <field name="UsrKNWWEnableCancelOrderSync"></field>

  </qp-fieldset>

  <qp-fieldset slot="B" id="frmGroupCustomSalesOrderSync" view.bind="CurrentStore" caption="Custom Sales Order Sync" wg-container after="#frmGroupShopifyCanceledOrders">

    <field name="UsrKNWWSPEnableCustomOrderSync"></field>

    <field name="UsrKNWWSPOrderLastSynDate"></field>

  </qp-fieldset>

  <qp-fieldset slot="B" id="frmGroupRestrictCustomerUpdates" view.bind="CurrentStore" caption="Restrict Customer Updates & Sales Order Sync" wg-container after="#frmGroupCustomSalesOrderSync">

    <field name="UsrKNWWRestrictCustomerSalesOrderSync"></field>

    <field name="UsrKNWWCustomerRestriction"></field>

  </qp-fieldset>

  <qp-grid

  id="gridKNWWPaymentMapping"

  caption="Credit Card Type Based Payment Methods Mapping"

  view.bind="PaymentsMapping"

  wg-container

  after="#FeeMappings">

</qp-grid>

</template>

TS File : 
 

import { BC201010 } from "src/screens/BC/BC201010/BC201010";

import {

    PXFieldState,

    PXFieldOptions,

    createCollection,

    viewInfo,

    PXView,

    gridConfig,

    GridPreset

} from "client-controls";

import { CurrentStore, CurrentBindingShopify } from "src/screens/BC/BC201010/views";

 

export interface BC201010_KNWW extends BC201010 {

    PaymentsMapping: ReturnType<typeof createCollection<PaymentsMapping>>;

}

 

export class BC201010_KNWW {

    @viewInfo({ containerName: "Credit Card Type Based Payment Methods Mapping" })

    PaymentsMapping = createCollection(PaymentsMapping);

}

 

// --------------------

// CurrentStore Extension

// --------------------

 

export interface CurrentStore_KNWW extends CurrentStore { }

 

export class CurrentStore_KNWW {

    UsrKNWWSPEnableCustomZipSync: PXFieldState<PXFieldOptions.CommitChanges>;

    UsrKNWWSPEnableCustomPriceSync: PXFieldState<PXFieldOptions.CommitChanges>;

    UsrKNWWSPPriceType: PXFieldState<PXFieldOptions.CommitChanges>;

    UsrKNWWSPPriceClassCode: PXFieldState;

    UsrKNWWSPEnableCustomOrderSync: PXFieldState<PXFieldOptions.CommitChanges>;

    UsrKNWWSPOrderLastSynDate: PXFieldState;

    UsrKNWWRestrictCustomerSalesOrderSync: PXFieldState<PXFieldOptions.CommitChanges>;

    UsrKNWWCustomerRestriction: PXFieldState;

}

 

// --------------------

// Shopify Extension

// --------------------

 

export interface CurrentBindingShopify_KNWW extends CurrentBindingShopify { }

 

export class CurrentBindingShopify_KNWW {

    UsrKNWWEnableCancelOrderSync: PXFieldState<PXFieldOptions.CommitChanges>;

}

 

// --------------------

// Payments Mapping Grid Extension

// --------------------

 

@gridConfig({

    preset: GridPreset.Details,

    autoAdjustColumns: false,

    syncPosition: true,

})

export class PaymentsMapping extends PXView {

    Active: PXFieldState<PXFieldOptions.CommitChanges>;

    StorePaymentMethod: PXFieldState;

    PaymentMethodID: PXFieldState<PXFieldOptions.CommitChanges>;

    CardType: PXFieldState<PXFieldOptions.CommitChanges>;

    CashAccountID: PXFieldState<PXFieldOptions.CommitChanges>;

    ProcessingCenterID: PXFieldState<PXFieldOptions.CommitChanges>;

    CuryID: PXFieldState;

    ReleasePayments: PXFieldState;

    ProcessRefunds: PXFieldState<PXFieldOptions.CommitChanges>;

    UsrKNWSCardType: PXFieldState<PXFieldOptions.CommitChanges>;

}
Classic UI Screenshot

Modern UI Screenshot

 

3 replies

S
Pro III
Forum|alt.badge.img+2
  • SaiKrishnaV
  • Pro III
  • March 9, 2026

​@ilahiu16 If the grid is visible in Classic UI but not appearing in Modern UI, please check that the view.bind name matches the view in the graph, ensure the grid has a slot (A/B/C) or is placed inside a fieldset, verify that the container used in the after attribute exists, confirm the view is defined in the TS file using createCollection, and make sure the fields used in the grid exist in the DAC. If everything looks correct, try publishing the customization again and verify.

SaiKrishnaV https://www.linkedin.com/in/saikrishna-vaddepalli-aa67b8225
    S
    Freshman II
    Forum|alt.badge.img

    ​@ilahiu16 Hi, I noticed below points.

    HTML File: 

    The grid is outside a fieldset container, so Modern UI does not render it.

    Wrap the grid inside:qp-fieldset

    if not working above solution then try below code

    Slots needs to be corrct

    after="#FeeMappings"> this line aslo you need to cross verify and make sure your FeeMappings spelling. It may "#feeMappings"


    ts file:

     PaymentsMapping: ReturnType<typeof createCollection<PaymentsMapping>>; I never used ReturnType in modern UI, It may right. Try below code which I used 
     for my moderen UI development. It may help you 
     

    import { BC201010 } from "src/screens/BC/BC201010/BC201010";

    import {PXFieldState,PXFieldOptions,createCollection,viewInfo,PXView,gridConfig,GridPreset

    } from "client-controls";

    import { CurrentStore, CurrentBindingShopify } from "src/screens/BC/BC201010/views";

    export interface BC201010_KNWW extends BC201010 { }
    export class BC201010_KNWW {
        PaymentsMapping = createCollection(PaymentsMapping);
        YourDataView = createCollection(YourDAC);
        @viewInfo({ containerName: "Credit Card Type Based Payment Methods Mapping" })    
    }

    @gridConfig({

        preset: GridPreset.Details,

        autoAdjustColumns: false,

        syncPosition: true,

    })

    export class PaymentsMapping extends PXView {

        Active: PXFieldState<PXFieldOptions.CommitChanges>;

        StorePaymentMethod: PXFieldState;

        PaymentMethodID: PXFieldState<PXFieldOptions.CommitChanges>;

        CardType: PXFieldState<PXFieldOptions.CommitChanges>;

        CashAccountID: PXFieldState<PXFieldOptions.CommitChanges>;

        ProcessingCenterID: PXFieldState<PXFieldOptions.CommitChanges>;

        CuryID: PXFieldState;

        ReleasePayments: PXFieldState;

        ProcessRefunds: PXFieldState<PXFieldOptions.CommitChanges>;

        UsrKNWSCardType: PXFieldState<PXFieldOptions.CommitChanges>;

    }
     

    V
    Varsity I
    Forum|alt.badge.img+1
    • Vard86
    • Varsity I
    • March 9, 2026

    Hello ​@ilahiu16 ,

    You need to add this code to your HTML file on the <template> Modify Tab </template>

    You need to modify the Payments tab using its ID and add your new grid in this way.

     <qp-tab modify="#tabPaymentSettings">
         <qp-grid id="CstPXGrid611" view.bind="PaymentsMapping"
                  caption="Credit Card Type Based Payment Methods Mapping"
                  wg-container="CreditCardType"></qp-grid>
     </qp-tab>

    Regards,

    Vard

      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