In my application I need to format number fields to BRL(Brazil) currency. This is my code:
new sap.ui.layout.form.FormElement(this.createId('valor'),{
label: 'Valor',
fields: [
new sap.m.Input({
value:{
parts: [{
path: '/valor'
},
{
path: 'BRL'
}
],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
},
id: this.createId('txtValor')
}),
]
}),
We suppose what my input value to be 1000.
The output it will be 1,000.00, but i need who the output to be 1.000,00
Do SAPUI5/OpenUI5 support currency BRL(Brazil)? I tried a lot, but it did not work.
The currency type uses the locale settings for formatting the output. I assume that in your case the format locale is not set to Brazilian Portugese and therefore the browser's locale is used.
You can set the format locale via:
sap.ui.getCore().getConfiguration().setFormatLocale("pt_BR");
Additionally you should also review your binding and change it to:
<Input id="valor" value="{path : '/valor', type : 'sap.ui.model.type.Currency'}"/>
Here you will find a small example. There is also an example in the Explored application explaining the model data type.
Related
I have following interface:
export interface Product {
name: string;
provider: {
name: string;
logo: string;
};
pricePerUnit: {
quantity: number;
currency: string;
};
}
And my rowData looks like this:
rowData = [
{
name: 'Fish',
provider: {
name: 'Amazon',
logo: 'url to amazon logo',
},
pricePerUnit: {
quantity: 5,
currency: 'USD',
},
},
]
So, as you can see i have at least 2 complex object here, and by design I should display provider as img + name and price as quantity + currency symbol.
I`m using custom angular components for that with styling.
Actual problem
In order to provide these object to my custom components, I set field property in colDefs as follow (example for price):
{
headerName: 'Price',
field: 'pricePerUnit',
cellRenderer: PriceCellRendererComponent,
},
And here is the catch, because I specified in field property complex object, I no longer able to visualize data using integrated charts, because for them to work I should specify in my field propery path to number itself, like so:
{
field: 'pricePerUnit.quantity',
}
But now I`ve broke my custom component because params.value now holds just a number and not my complex object. Same goes to provider.
And it`s also broke grouping, sorting, filtering.
html template for one of my custom component (provider) looks like so:
<div class="wrapper provider">
<tui-avatar [avatarUrl]="params.value.logo" class="provider__logo"></tui-avatar>
<div class="provider__name">{{params.value.name}}</div>
</div>
So the question is:
How to properly setup custom components, so they would work in grouping, sorting, filtering and also integrated charts would use just simple primitive like number to correctly display data?
Basically I want to use a formatter function to fill the 3 properties of an sap.m.ObjectStatus (text, state, icon) depending on some static value.
<m:ObjectStatus
text="{
parts: [
{ path: 'currentRoles>STATE_TEXT' },
{ path: 'currentRoles>STATE' },
{ path: 'currentRoles>REFERENCED_ENTRY/SV_RH_ROLE_ACTIVE' },
{ path: 'currentRoles>invalid' },
{ value: 'text' }
],
formatter: '.formatter.Formatter.convertRoleStatus'
}"
...
/>
The strange thing is; if I omit the value part in the XML, the function is called. If it's included, the function gets never called in the first place.
As of the one of the answers to the post Pass Static Value to Formatter Parameters in XML View, passing parameters with value should work if the UI5 version is higher than 1.61. We use 1.71.2.
At other places in code, this works.
How to fix this issue?
Update: The issue is fixed now with commit: 4a9cf89 which will be available in 1.80+.
Now static bindings can be used even without any workarounds like the one mentioned below.
Original answer (workaround):
The issue is now reported in https://github.com/SAP/openui5/issues/2916. Thanks for making us aware of it!
A quick "fix" (I'd say a monkey patch) is to add model: 'myExistingModel' to the static binding info:
parts: [
{ path: 'currentRoles>STATE_TEXT' },
{ path: 'currentRoles>STATE' },
{ path: 'currentRoles>REFERENCED_ENTRY/SV_RH_ROLE_ACTIVE' },
{ path: 'currentRoles>invalid' },
{ value: 'text', model: 'currentRoles' }
],
This fix actually doesn't make sense since static bindings don't have any models, but can be used until the official fix arrives without the need to refactor a lot.
I suspect there is a limitation (possibly a bug):
If you do not use a named model this works for me:
...
??="{ parts : [ {path: 'a'}, {path: 'b'}, {path: 'c'}, {path: 'd'}, {value: 23} ], formatter: '.myFormatter'}"
...
let model = new JSONModel(this.getData());
this.getView().setModel(model);
...
myFormatter: function (a, b, c, d, v) {
console.log(a, b, c, d, v);
},
getData: function(){
return {"testdata": [
{ a: 1, b: "stringB", c: "stringC", d: "stringD"},
]};
}
console output: 1 "stringB" "stringC" "stringD" 23
The moment I name my model this stops working.
For now, if possible, use the default model for your data - not ideal?!
Try (you may have to do some model name trading?!) after assigning the named model as the default (un-named) model:
parts: [
{path: 'STATE_TEXT'},
{path: 'STATE'},
{path: 'REFERENCED_ENTRY/SV_RH_ROLE_ACTIVE'},
{path: 'invalid'},
{value: 'text'}
],
while this gets it to work you may want to raise this with the UI5 Team?
As for now, since changing the binding to a default one like Bernard propsed was not possible without heavy refactoring, I changed my formatter logic a bit in a way such as to create 3 seperat functions (with 4 parameters) that call the orginal convertRoleStatus function, each with different inputs for the fifth parameter, which is mode.
I will report the problem with SAP to hopfully resolve it someday.
I am struggling to format an OData V4 Edm.DateTime value. When I declare it as normal datetime value
<Label text="{ams>Major}.{ams>Minor}.{ams>Build} (
{
path: 'ams>CreationDate',
type: 'sap.ui.model.type.Date',
formatOptions: {
pattern: 'yyyy/MM/dd'
}
})"/>
I get following error:
TypeError: j.getTime is not a function
If I declare it using the OData data type, nothing is formatted.
<Label text="{ams>Major}.{ams>Minor}.{ams>Build} (
{
path: 'ams>CreationDate',
type: 'sap.ui.model.odata.type.Date',
formatOptions: {
pattern: 'yyyy/MM/dd'
}
})"/>
Puts out e.g.:
2016-11-21T17:13:56.207+01:00
Is there any possibility to format it directly in the XML template, or do I have to use a custom formatter?
I would use a custom formatter. They were created for this kind of task, and if you have multiple dates, you can re-use the same formatter (which is cool).
Improved Answer:
As pointed out by the SAP support this is the way to go when using OData V4:
<Text text="{
path: 'agent>/CurrentVersion/CreationDate',
type: 'sap.ui.model.odata.type.DateTimeOffset',
constraints: {
precision: 3,
v4: true
},
formatOptions: {
pattern: 'dd. MM. yyyy'
}
}"
tooltip="{
path: 'agent>/CurrentVersion/CreationDate',
type: 'sap.ui.model.odata.type.DateTimeOffset',
constraints: {
precision: 3,
v4: true
},
formatOptions: {
pattern: 'dd. MM. yyyy - hh:mm:ss'
}
}"/>
The important part is to give the precision. My OData Service (ASP.NET WEB API) returns datetimeoffset with milliseconds. Therefore, the precision has to be set to 3.
Original Answer:
In addition, as I had some problems, here is my approach with a custom formatter:
The reason, why you cannot use the common Date format is, that the odata value comes as a string. I used a custom formatter on my controller and the dateformat.js scripts.
<Label text="{parts: [{path: 'mymodel>CreationDate', type: 'sap.ui.model.odata.type.Date'},
{path: 'i18n>global.dateformat', type: 'sap.ui.model.type.String'}],
formatter: '.odatadateformatter'}"/>
Here is my formatter code (typescript):
var dateFormat: DateFormatStatic;
...
odatadateformatter(datetime: sap.ui.model.odata.type.Date, format?: string): string {
if(!format)
format = "yy-mm-dd:hh:MM:ss";
return dateFormat(new Date(datetime), format);
}
Any other approaches lead to errors. You can now adjust your date accordingly to your i18n information, so you can use different formats for different countries. I think there is also an option to put in a locale in the dateFormat(...) function
simple question but I can't figure out how to resolve it.
I'm receiving a date with hour from JSON with this format :
"date_deb":"2013\/12\/28 23:00:00"
Note that the \ are for escaping the / and are not displayed.
I would like to display this dates in this format into my grid :
"28/12/2013 23:00:00"
I've tried this into my fields definition:
{name:'date_deb', type: 'date', dateFormat: 'd-m-Y H:i:s'}
But it's not working, nothing is displayed.
By checking the ExtJS docs, I've seen this :
dateReadFormat
I'm using ExtJS4.2
In your field definition provide the dateFormat as it is returned from the server:
{name:'date_deb', type: 'date', dateFormat: 'Y/m/d H:i:s'}
and then in your column config use ExtJS's built-in dateRenderer with the format you'd like to render your dates with:
renderer: Ext.util.Format.dateRenderer('d/m/Y H:i:s')
You'll only need dateReadFormat and dateWriteFormat if you have a reader (to read data from server) AND a writer (to send modified data back to server) which need different date formats. Otherwise dateFormat will apply as the default format for both.
If the above doesn't work for you, try adding xtype: 'datecolumn' in your grid's 'columns' config.
columns: [{
text : 'date',
dataIndex: 'LoginDateTime',
xtype: 'datecolumn',
format: 'Y-m-d g:i A',
}]
This should work.
use this function to render date for grid
In your column definition define renderer as this
renderer: renderDate
example { dataIndex: 'TaskEndDate', header: 'PlannedEndDate', flex: 1, renderer: renderDate },
function renderDate(value)
{
if (value == '' || value == undefined) {
return '';
}
else {
getDate = new Date(parseInt(value.substr(6)));
}
return Ext.util.Format.date(getDate, 'm-d-Y');
}
In your column config use "formatter".
formatter: 'date("d/m/Y H:i:s")'
I have a grid that has a date field.
When a json POST is made to the server, the data that's sent looks like this: "2013-09-13T16:40:34.301Z", and a PUT looks like this: "2013-09-13T04:00:00.000Z". So it looks like the same format, but the POST is including some screwy time value and the PUT some other screwy time value (neither of which are correct).
I want to only send the DATE. Anyone have any idea?
kendoGrid.....
model: {
id: "ID",
fields: {
ID: {
editable: false,
type: "number"
},
START_DATE: {
field: "START_DATE",
type: "date",
format: "{0:MM/dd/yyyy}",
validation: {
required: true
}
},
Use the Data function (of the upload or create config) to send that date in a different format or use the parameterMap to change the existing format.