There are no secrets to success. It is the result of preparation, hard work, and learning from failure.

Wednesday 25 April 2018

How to use custom CSS(Cascading Style Sheet) in SAPUI5

Click here and follow my SAP UI5/FIORI snippets and information Page
I have shown below, how to use custom CSS(Cascading Style Sheet) in SAPUI5. Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<Page title="{i18n>title}">
<content>
<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="false">
<f:content>
<Label text="Full Name"/>
<Input></Input>
<Label text="E-mail"/>
<Input/>
<Label text="Mobile Number" class="colorClassCustom"/>
<Input></Input>
<Label text="Address"/>
<Input/>
</f:content>
</f:SimpleForm>
</content>
</Page>

style.css

// Custom CSS(Cascading Style Sheet) class....
.colorClassCustom{
color: red;
font-weight: bold;
    font-size: 20px;
    }

Note: Load CSS(Cascading Style Sheet) either from index.html,component.js or manifest.json

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

component.js
"includes" : ["css/style.css"]

manifest.json
"resources": {
"css": [{
"uri": "css/style.css"
}]
}

Result



No comments:

Post a Comment