Creating a UI API Dialog Control

Objective

After completing this lesson, you will be able to create a UI API dialog control in SAP Business One, Web client.

How to Create a UI API Dialog Control

A dialog is a separate window that pops up within the application, allowing users to interact with data or perform specific actions.

A Sales Quotation in the Web client showing the “Show Dialog” button at the top.
The dialog pop-up window that appears after clicking the “Show Dialog” button, which shows the “My Text Area”.

In this video, you’ll learn how to:

  • Enhance the app by creating custom UI API dialog control in SAP Business One, Web client.
  • Pass parameters from the parent view to the dialog and back.
  • Validate the dialog inputs.

For more information on UI API Dialog Controls, refer to Dialog | SAP Help Portal.

For the code details, you can download the sample from Samples | SAP Help Portal.

Complex Dialog Controls

Complex Dialog Sample | SAP Help Portal will show you how to add more complex dialog controls, such as grid control, where the data is retrieved from the Service Layer to populate the grid.

Complex Dialog Sample screen.

Summary

  • A dialog control is a separate window for user interaction, created as a custom control in SAP Business One, Web client.

  • Dialog setup requires a layout JSON file, a logic JavaScript file, a manifest.json declaration, and main view integration.

  • Parameters can be passed between the parent view and the dialog, enabling data exchange and context sharing.

  • Dialog input validation ensures users provide required information before closing or returning values.

  • The dialog’s structure, logic, and integration are managed through specific files and controller functions in the project.

Learning

SAP FacebookSAP YoutubeSAP LinkedIn