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");
[js]
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 :-
[js]
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 🙂
