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

Sunday, 29 April 2018

Custom Currency Formatter

Click here and follow my SAP UI5/FIORI snippets and information Page
I have made custom currency formatter example,below I have shown Application Structure, View Part, Controller Part, Formatter, JSON and Result.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="Amount"/>
<Input value="{parts:[{path:'amo'}],formatter:'currency1.util.formatter.currencyMethod'}"  id="inId"></Input>
</f:content>
</f:SimpleForm>
</content>
</Page>

Controller Part

onInit:function(){
// Loading formatter at the time of application initialization....
jQuery.sap.require("currency1.util.formatter");
// Loading json file....
var json = new sap.ui.model.json.JSONModel("model/record.json");
// Binding form with json value....
this.getView().bindElement("/0");
// Setting json to current view....
this.getView().setModel(json);
}

formatter.js

// Declaring formatter file....
jQuery.sap.declare("currency1.util.formatter");
currency1.util.formatter = {
currencyMethod: function(val) {
var amount = parseFloat(val);
var finalResult = amount.toLocaleString('en-US', {
style: 'currency',
currency: 'USD'
});
return finalResult.replace("$", '');
}
}

record.json

[{
"amo":"2344000"
}]

Result



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