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 🙂