How to Create a Popup Dialog in Modern UI

If you want to display a popup dialog in Modern UI to collect additional user input, follow the steps below.

Popup dialogs in Acumatica are usually opened by a PXFilter and a server-side action.

Example (C#):

public PXFilter<ACPRReportFilter> ACPRFilterSelect;

public IEnumerable aCPRFilterSelect(PXAdapter adapter)

{

    return adapter.Get();

}

1.     Create the extension files in:

FrontendSources/screen/src/screens/<Module>/<ScreenID>/extensions/

Files:

·         <ScreenID>_PopupExtension.ts

·         <ScreenID>_PopupExtension.html

2.     Define the popup view (TypeScript)

Open <ScreenID>_PopupExtension.ts and define a popup view (filter view) for the panel.

Example:

This code adds a new view (ACPRFilterSelect) to the existing screen model.

3.     Define the popup layout (HTML)

Open <ScreenID>_PopupExtension.html and define the popup panel layout.

Example:

The view.bind attribute must match the view name declared in TypeScript.

4.      Build

npm run build-dev -- --env screenIds=<ScreenID>