UI5 is an open source Javascript framework to create enterprise ready applications. If you have a prior experience on building HTML5 application then it will be a little more easier to learn UI5. As per my experience, it is much more worth to learn UI5 end-to-end than just to learn UI5 Javascript libraries. And Here are 7 reasons why you should worth considering learning UI5 End-to-End when you do so.

 

1.Not dependent upon ABAP developer for delivery

The front end of an UI5 app is Javascript, CSS3 and HTML5 but the backend is exposed as API based services data. These API based data normally comes from either SAP Netweaver Gateway or SAP HANA system. Most of the built applications nowadays are using existing SAP ERP and SAP Netweaver Gateway (Gateway for short) which is either present inside it (embedded model) or as a router (Hub Model). The API’s are exposed by Gateway in form of oData and these oData services are created using ABAP code. When you are working on a project, the ABAP developer will create those services for you. When you know the end-to-end development, then you can remove the dependency from the ABAP developer because communication overhead is a major problem on a project and this will give you a freedom to work.

2. Able to take project decision keeping in mind the entire architecture:

When you are working in UI, you have to take decision mostly on how it looks, when to show which data or data fields and these data normally comes from your backend over oData based services. If you have a clear understanding about how things work in the backend as well, then taking these decisions are much easier for you.

3.Knowing old way of working helps to make the new features relevant

If you are aware about how your users were using the existing SAP systems then it will be much easier to explain the new UX and the new features you are building.  Never neglect the importance of communicating effectively.

4.Adapt easier to changes in requirements during development

Change in Technical Design in the middle of development is not common. But if you ever get in a situation where you think that your prior assumptions were wrong and some features are impossible, which you imagined were possible then don’t delay in admitting that you were wrong. Once you realized this, moving forward requires a change in design or development plan. These changes are much easier if you have end-to-end understanding of the project and it’s inner working.

5.Integration and testing is much easier

When it comes to testing your app and doing integration, knowing how to use gateway error log is crucial. It is very rare that everything will work as you wanted it to in the first attempt and sometimes tracking the bugs requires data from multiple sources to fix the problem.

6.Higher roles and better packages

This is not a surprise, the money you make is directly proportional to value you add. And you can add much more value if you have end-to-end knowledge in detail.

7.Create your own app or PoC (Proof of Concept)

This is the most interesting advantage of knowing UI5 end-to-end. You can create your own app and propose your own ideas to management to win some projects as well. An entrepreneur inside corporate world!

And these were also our top 7 reasons, which compelled us to create SAPUI5 End to End
video course which starts from :

1.Getting Started : If you are new to UI5 then you can start with this a Free course on SAPUI5 Getting Started !

 

2.When you are ready to learn all the details of UI5 app creation, then SAPUI5 professional development course is for you.

3.Once you have mastered that, then learning backend and going end to end makes perfect sense.

4. Sometimes you also need advanced concepts mastery to take your project to the next level which you can do with Advanced SAPUI5 Professional Development Course.

And all this and much more is bundled together in Complete SAPUI5 End-End Bundle:

These are the courses created by our team which includes some of the great minds in SAPUI5 and Javascript field and which gives you a guarantee to understand end-to-end development with UI5 in most simple and fun way.

Also, make sure to check coupons, which are given out on frequent basis 😉

Learn simple !

 

 

Event means action . The most common types of event are Click, Tap, Drag, Press, Change, Focus, KeyPress  .

Let us refer to our previous project which we have done earlier here .

So, at the time of pressing the submit button, we will execute a particular function so that an event will get fired.

Here we will use the onChange event handler function.

Step1:-  Let us go to the API reference URL and search for sap.m.input and again search for the liveChange event from Here .

Now , let us go to our demo.view.js page and create a function over there with the name as liveChange :-

var oSimpleInput = new sap.m.Input({
liveChange:[oController.liveChange,oController],
placeholder:"Enter Name"
})

Step2:- Let us create a function in our demo.controller.js with the toast message creation function which will be displayed on top of the page the string that is typed by the user :-

liveChange: function(oEvt){

var sValue = oEvt.getParameter('value');
sap.m.MessageToast.show(sValue);
},

Step3:- So here comes the output below and the change event is fired when the user writes any text on the text box:

 

That’s all for now . Stay tuned for more 🙂

 

 

 

Let us do add more CSS styling to the existing project which we have already done before from Here to make it like the screenshot below:-

Step1:- Let us first open up the same project in eclipse IDE.

Next , let us create a CSS folder and create a CSS file named as style.css

and we will link this CSS file to the index page :-

<link rel ="stylesheet" type = text/css href="css/style.css>

Step2:- Now let us add the custom CSS class(.addStyleClass(“newForm”),(.addStyleClass(“hBoxForm”),(.addStyleClass(“vBoxForm”)))) to it :-

<script>

var oMyForm = new sap.ui.layout.form.SimpleForm({

content:[

new sap.m.Label({
text: "Simple Form"
}),
new sap.m.Input({
placeholder: "Simple Input",
}),
new sap.m.Button({
text:"Press me"
}),
new sap.m.RatingIndicator({
value:4.7
}),
new sap.m.TextArea({
value:"Awesome Text Area"
}),
new sap.m.DatePicker({

}),

new sap.ui.unified.FileUploader({}),

new sap.m.VBox({
items:[

new sap.m.Button({
text: "VBox Btn1"
}),
new sap.m.Button({
text: "VBox Btn2"
})

]

}).addStyleClass("vBoxForm"),


new sap.m.HBox({
items: [
new sap.m.Button({
text:"HBox Btn1",
type: "Emphasized"
}),
new sap.m.Button({
text:"HBox Btn2",
type: "Accept"
})

]
}).addStyleClass("hBoxForm"),


]

}).addStyleClass("newForm");
oMyForm.placeAt("content");

</script>

In our style.css file let us add the code below:-

.newForm{
 
width: 70% !important;
padding-left: 30% !important;
padding-top: 10% !important;
}


.hBoxForm{
padding-left: 30%;
}

.vBoxForm{
padding-left: 40%;
 
}

Now all of our CSS properties are working fine only the issue is with the vBox & hBox, so for that let us add the media query to it to get the responsiveness perfectly when we run the app on any devices.

 

@media screen and (max-width:600px){
.hBoxForm{
padding-left: 0%;
}

.vBoxForm{
padding-left: 18%;
 
}
 
}

Now let us change the color of the buttons HBox Btn1 & HBox Btn2  at the property level at the index.html page , which can be also found in the URL Here which contains Accept & Emphasized code  :-

new sap.m.HBox({
items: [
new sap.m.Button({
text:"HBox Btn1",
type: "Emphasized"
}),
new sap.m.Button({
text:"HBox Btn2"
// type: "Accept"
}).addStyleClass("newBtnGreen")

]
}).addStyleClass("hBoxForm"),


]

}).addStyleClass("newForm");
oMyForm.placeAt("content");




We can also do the color change of the buttons in CSS like inspecting on the button element and by doing hit and trial method in the browser

We will add a custom style class to the 2nd button :- 



 new sap.m.Button({ text:"HBox Btn2" }).addStyleClass("newBtnGreen")

 

in the CSS:-

 
.newBtnGreen>.sapMBtnInner{
 
 background: green;
}
} 

Step3:- Finally , here comes the final desired output as below:-

That’s  all for now, Stay tuned for more 🙂