Step 17: Fragment Callbacks

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.

Preview

^{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.

Coding

webapp/controller/HelloPanel.controller.ts

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 {
    private dialogPromise: Promise<Dialog>;

    onShowHello(): void {
        ...
    }
    onOpenDialog(): 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.
        (<Dialog> this.byId("helloDialog"))?.close();
    }         
};

webapp/i18n/i18n.properties

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

webapp/view/HelloDialog.fragment.xml

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.