Skip to Content

SAPUI5 - Add an order activity

By Jonathan Baker

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 HANA Cloud Platform Web IDE

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

    OrderButtonText=Order OrderDialogTitle=Order Product OrderDialogMsg=Do you want to order this product now? OrderDialogSuccessMsg=The product has been ordered

update the i18n properties

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

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

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

Next Steps

  • This is the end of this tutorial series.

Additional Information

Updated 09/13/2016

Time to Complete

10 Minutes.




Next Steps

Back to top