Creating simple grid form using new UI

Hello, today I will show you how to create simple screen with grid on it

There is how you created from with grid with old UI using aspx

And how it’s looks


To create this form with new UI you need to create ts and html files for new screen inside FrontendSources folder

For ts file you need to specify graphInfo that gives access to the structure of your. Inside you need to add graphType, primaryView and additional property that will modify toolbar items

Defines a screen class named UR101000, inheriting base behavior from PXScreen
export class UR101000 extends PXScreen {

  CustomView = createCollection(CustomView);

}

Registers a view (data collection) named CustomView from the graph, so the front-end can bind to it.
CustomView = createCollection(CustomView);

gridConfig -configures the behavior, style, and functionality of a <qp-grid> bound to a view in the screen class.

And class that extend PXView need to add fields that you want to display on View and add them different properties such as CommitChanges e.t.

TS file for new form

HTML file

<template>

  <qp-grid id="grid-CustomView" view.bind="CustomView"></qp-grid>

</template>

Where template is the root container for the screen’s UI and everything inside defines the layout and components rendered in the browser. qp-grid is a web component provided by Acumatica for displaying a data grid (similar to PXGrid in the classic UI). id="grid-CustomView" gives the grid a unique DOM ID
view.bind="CustomView" binds this grid to the CustomView defined in your screen’s TypeScript class

How it looks on new UI