Skip to Content

SAPUI5 - Add an order activity

0 %
SAPUI5 - Add an order activity
// Explore More Tutorials

SAPUI5 - Add an order activity


Add a button to a detail page, to trigger an process

You will learn

You will add a footer bar (a Bar control within the footer aggregation of the Page) to our Detail view.

In that bar, you will add a Button control to the right side of the footer bar in the Detail view, and in the corresponding controller we’ll define the function to be called (handleOrder) when the Button’s ‘press’ event is fired. Then you will simulate the order process by displaying a MessageBox pop-up control and then showing a MessageToast. For this, you will need to show some texts. Hence, you will add placeholders into the file we set up earlier.

Web IDE If you don’t have the Web IDE open, follow these steps: Enable and open the SAP Cloud Platform Web IDE

  1. Open the webapp/i18n/ file, and add the following four lines to the bottom:

    OrderDialogTitle=Order Product
    OrderDialogMsg=Do you want to order this product now?
    OrderDialogSuccessMsg=The product has been ordered
    update the i18n properties
  2. Open the webapp/view/Detail.view.xml file, and add a footer to the detail page by adding the following code under <ObjectHeader>:

    			<Button text="{i18n>OrderButtonText}"
    	               press="handleOrder" />
    update the Detail.view.xml file with a footer
  3. Finally, open the webapp/controller/Detail.controller.js file. Register two new classes in the define area:

    Add two new classes to the define controller list

    Next, you will change the signature of the function call, to accept two new parameters:

    Note: overwrite the existing function call with this code (or it will have a syntax error).

    function(Controller, MessageBox, MessageToast)
    Change the signature of the function

    Finally, add the handleOrder function to the Controller:

    handleOrder : function (evt) {
      // show confirmation dialog
      var bundle = this.getView().getModel("i18n").getResourceBundle();
        function (oAction) {
          if (MessageBox.Action.OK === oAction) {
            // notify user
            var successMsg = bundle.getText("OrderDialogSuccessMsg");
            // TODO call proper service method and update model (not part of this tutorial)
    add a handleOrder method to the controller
  4. You are all set! Run the application. Choose an item from the list, and you will see an Order button in the detail screen.

Run the application and show the new order button

Click on the Order button and the following dialog box comes up:

Order confirmation dialog

After you click the OK button, you should see this message appear.

Order success message

That is all for this series! Return to the tutorial catalog for more tutorials on SAPUI5.

Additional Information

Next Steps


Back to top