A Simple Example for animation in SAPUI5 Application
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
Hi Dhanavijay,
Excellent Post. I was able to reproduce your blog. I have a quick question. In this excercise you were able to use sap.m.Dialog control and identify that the event "afterOpen" could be attached with an even and execute the jquery animation. However, how do we figure out a which event is triggered at the start of loading of the control?
Lets say if i use sap.m.Table I am not sure which event could be used to attach the Jquery code. If you can please provide us some input that will be awesome. Looking forward for your response.
Cheers,
Ransome