In the past I shared a blog post on how to combine Dialogs with Fragments in UI5: https://blogs.sap.com/2017/03/09/ui5-fragments-and-dialogs/ .

This is an approach which I still use today but in combination with TypeScript. Therefore, I’ve updated the code to TypeScript. Besides that, I also improved some aspects of it to gain more of the TypeScript benefits.

This new version comes with the following parts:

Dialogcontroller.ts: acts like a BaseController for dialogs
openFragment function: a reusable function to open dialogs which should be placed in the BaseController of views
Fragment and Controller of the dialog: dedicated fragment with the UI of the dialog and its own controller

Reusable dialog aspects

Add a Dialog controller

I added a “DialogController” which is similar to and extends from “BaseController” to my UI5 project. This is designed to act as a parent controller to every controller used for any dialog.

This controller is an abstract class that comes with an abstract function “onBeforeShow”. Every dialog that has a controller should implement this, this is similar as an onRouteMatched function and will be called every time the dialog opens (not only the first time on init, every time!). This function contains the following arguments:

viewController: this will be an instance of the controller (this.getView()) from where the dialog is being called
dialog: contains the instance of the current fragment and its controller (which should be the same as ‘this’)
resolve: instead of callback, I’m using a promise to return something when the dialog is being closed back from where it has been instantiated
data: it is possible to pass information when instantiating the fragment, for that “data” can be used
popoverSource: in case the dialog is being called as a popover it could be helpful to have the source from where it is being called

Next to that, it comes with a function to get a control in a fragment.

Full code of controller can be found on GitHub: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/DialogController.ts

openFragment function to BaseController

Just like in the first version, I added a function “openFragment” to the “BaseController” so every other controller can easily reuse this function.

The function is quite similar to the JavaScript version with some small changes, like the callback to promise and types of course 😊

It comes with the following arguments:

name: id or name of the fragment. In case only a name is provided it will try to find the fragment with the dialog using the same path as the view that calls “openFragment”
data: unknown object that can be used to pass data to the dialog. It will be forwarded to the “onBeforeShow” function
popoverSource: in case the function is being used for a popover we need to know the source to open the popover on the right place

The function will also try to find a controller with the same path as the fragment in the controller folder. If it is not able to find a controller it will use the controller of the current view.

Full code of the BaseController can be found here: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/BaseController.ts

Dialog implementation

Create Fragment and controller

Most of the time I create a dedicated controller for a dialog to keep logic of the dialog out of the controller of the view. This also makes the dialog with it functionalities reusable in other views.

Create the fragment that contains the dialog control and a controller. The controller should be located in the same subfolder structure in the controller folder like the fragment in the view folder:

Added a simple text field and a button to the dialog:

Code of the dialog fragment: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/view/dialog/About.fragment.xml

The controller for the dialog extends from the DialogController and implements the onBeforeShow function. This is the perfect location to reset previous filled in values to have a clean start when opening again.

It also contains all functions that are related to the dialog, which makes the dialog with its logic reusable.

The onClose will call the resolve function to let the controller of the view now that it’s closed and pass a value back.

This way, specific logic to the view can be implemented in the controller after calling the dialog:

Code of Dialog controller: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/dialog/About.controller.ts

Code to open the dialog

In the controller of the view, you can simply call the function “openFragment” with the required parameters. Wait until it is closed to do something view specifc.

As an example: