Skip to content

Latest commit

 

History

History
117 lines (75 loc) · 4.6 KB

step-17-fragment-callbacks-typescript-f030afc.md

File metadata and controls

117 lines (75 loc) · 4.6 KB

Step 17: Fragment Callbacks (TypeScript)

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

![The graphic has an explanatory text.](images/UI5_Walkthrough_Step_17_c351bbd.png "The dialog now has an "OK" button")

Coding

You can view all files at OpenUI5 TypeScript Walkthrough - Step 17: Fragment Callbacks and download the solution as a zip file.

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 dialog: Dialog;

    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();
    }        
};

webapp/i18n/i18n.properties

We extend the text bundle by the new text for the dialog's Close button.

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# 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.

Related Information

Reusing UI Parts: Fragments

Instantiation of Fragments

API Reference: sap.m.Dialog

Samples: sap.m.Dialog