Skip to Content

Hi All,

 

Today i am going to share that how we can use the standard jQuery libraries and methods for providing an animation look to our development.

Many times i have seen that users ask about how i can implement jQuery libraries or methods in SAPUI5 applications. Basically our SAPUI5 is itself a customized jQuery library and we can use all basic methods of jQuery in our application.

 

Here i am going to use two standard methods of jQuery for providing some animation look to my dialog. You can animate any of your UI elements using these standards methods.

 

In my scenario there is a dialog box which opens when a button is clicked.

 

Whenever we open a dialog in SAPUI5 application this opens in the center by default. In some cases we would like to animate our UI elements for providing the better feel and look to our application.

 

Just as usual i have created an application with sap.m library with one controller and a view.

 

This is the code in my index.html file.

 

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

              <meta http-equiv=‘Content-Type’ content=‘text/html;charset=UTF-8’/>

 

              <script src=“resources/sap-ui-core.js”

                           id=“sap-ui-bootstrap”

                           data-sap-ui-libs=“sap.m”

                           data-sap-ui-theme=“sap_bluecrystal”>

              </script>

              <!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>

 

              <script>

                           sap.ui.localResources(“slidingdialog”);

                           var app = new sap.m.App({initialPage:“idview11”});

                           var page = sap.ui.view({id:“idview11”, viewName:“slidingdialog.view1”, type:sap.ui.core.mvc.ViewType.JS});

                           app.addPage(page);

                           app.placeAt(“content”);

              </script>

       </head>

       <body class=“sapUiBody” role=“application”>

              <div id=“content”></div>

       </body>

</html>

 

I have just created a view and controller in eclipse.Now i am going to create a button in my view and when it will be pressed, this event will open a dialog having anmimation in which it will slide down from top to the centre location.

This is the content of my view.

 

       createContent : function(oController) {        

              var oDialog = new sap.m.Dialog(“loginmenu”,{

                     title: “Hello”,

                     afterOpen: function(){

                         oController.swingDown();                          // Implemented in controller                         

                     },

              });

 

              var oButton1 = new sap.m.Button({

                     text: “Press me”,

                     press: function(){

                           oDialog.open();

                           oDialog.$().offset({top:“-100”, left: “50%”});     // Initial position of Dialog out of frame using                                                                               // offset method of jQuery

                     }

              });

              return new sap.m.Page({

                     title: “Title”,

                     content: [

                     oButton1

                     ]

              });

       }

 

Now this is the swingDown method in my controller.

 

sap.ui.controller(“slidingdialog.view1”, {

       swingDown: function() {

               $(“#loginmenu”).animate({top: “+=50%”}, 2000, “swing”);

                  },              

});

 

This method will animate the dialog box.

From this location i have taken some help. jQuery Effects – Animation

 

This is very simple example for animation but if basic is clear then we may move forward for complicated one.

 

Thanks

Dhananjay Choubey

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