Now that we have integrated the dialog, it's time to add some user interaction. The user will definitely want to close the dialog again at some point, so we add a button to close the dialog and assign an event handler.
The dialog now has an "OK" button to close the dialog
You can access the live preview by clicking on this link: 🔗 Live Preview of Step 17.
To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 17.
We add an event handler function into the HelloPanel controller file that closes the dialog when triggered. To get the dialog instance we use the byId
function and then call the close
function of the dialog.
import Controller from "sap/ui/core/mvc/Controller";
import MessageToast from "sap/m/MessageToast";
import JSONModel from "sap/ui/model/json/JSONModel";
import ResourceModel from "sap/ui/model/resource/ResourceModel";
import ResourceBundle from "sap/base/i18n/ResourceBundle";
import Dialog from "sap/m/Dialog";
/**
* @namespace ui5.walkthrough.controller
*/
export default class HelloPanel extends Controller {
onShowHello(): void {
...
}
async onOpenDialog(): Promise<void> {
...
}
onCloseDialog(): void {
// note: We don't need to chain to the pDialog promise, since this event-handler
// is only called from within the loaded dialog itself.
(this.byId("helloDialog") as Dialog)?.close();
}
};
We extend the text bundle by the new text for the dialog’s close button.
...
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=UI5 TypeScript Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok
In the fragment definition, we add a button to the beginButton
aggregation of the dialog and refer the press handler to the event handler we just defined in the controller of the panel’s content view.
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core" >
<Dialog
id="helloDialog"
title="Hello {/recipient/name}">
<beginButton>
<Button
text="{i18n>dialogCloseButtonText}"
press=".onCloseDialog"/>
</beginButton>
</Dialog>
</core:FragmentDefinition>
By using the loadFragment
function to create the fragment content in the controller of the panel’s content view, the method will be invoked there when the button is pressed. The dialog has an aggregation named beginButton
as well as endButton
. Placing buttons in both of these aggregations makes sure that the beginButton
is placed before the endButton
on the UI. What before
means, however, depends on the text direction of the current language. We therefore use the terms begin
and end
as a synonym to “left” and “right". In languages with left-to-right direction, the beginButton
will be rendered left, the endButton
on the right side of the dialog footer; in right-to-left mode for specific languages the order is switched.
Next: Step 18: Icons
Previous Step 16: Dialogs and Fragments
Related Information