Custom animated message dialog box by using SAP WebIDE

Hi All,

The message box is a special dialog box that allows you to display messages to the user. But, some cases user requires animated message dialog box which helps that more user experience. Here, I will show you how to build animated message dialog by using SAP WebIDE.

1. Create separate “Images” folder in your project. Add animated *.gif file inside images folder.

2. Create xml fragment. Inside view folder create fragment.

3. Mention file name. ( Please follow proper naming conventions like Accept, Reject, Information, Warning etc)

4. In fragment view, design your message dialog as per business requirements. My case, Animation and Message to be add.

<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
  <Dialog title="Success">
  <HBox>
  <Image id="imgAccept" width="70px" height="70px" src="../Images/Dialog_Success.gif"/>
  <Text text="Your Sales Order has been updated..!!" />
  </HBox>
  <endButton>
  <Button text="OK" press="onOk"/>
  </endButton>
  </Dialog>
</core:FragmentDefinition>

     Now, Message dialog has been created.

5. Now, When user update the business transaction, message box to be appear.

  6. Instaniate the Accept fragment

_getDialog: function() {
  if (!this._oDialog) {
  this._oDialog = sap.ui.xmlfragment("sap.ui.view.Accept");
  this.getView().addDependent(this._oDialog);
  }
  return this._oDialog;
  }

7. After Update your transaction call this message dialog.

oModel.update("/Accessories(OrderId='" + orderId + "',ItemNo='" + pItemNo + "')", dataPayload, {
  success: function() {
  this._Dialog = sap.ui.xmlfragment("ztraining.view.Accept",this);
  this._Dialog.open();
  },
  error: function() {
  // Error dialog
  }
  });

8. Provide Event for to close Message Dialog after appears.

onOk: function() {
  this._Dialog.close();
  }

9. Wow, Everything has been done.

Thats it.. !!

I will be glad to hear your feedback and listen to all your questions.

Regards,

Ram