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.

     import image.png

          choose image.png

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

     /wp-content/uploads/2016/07/1_a_991329.png

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

     /wp-content/uploads/2016/07/1_b_991330.png

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.

     screen update and exit.png

     

  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.

         /wp-content/uploads/2016/07/final_991435.png

Thats it.. !!

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

Regards,

Ram



To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply