cancel
Showing results for 
Search instead for 
Did you mean: 

XML view, Formatter within XML Fragment not accessable/working

0 Kudos

Dear UI5 experts,

I'm struggling for a longer time with a problem using a formatter function with an XML fragment definition.

Please find following information and questions at the end.
I hope, you can help me.

UI5 Project structure

PROJECT -> webapp -> controller

PROJECT -> webapp -> view

PROJECT -> webapp -> util -> Formatter.js

Controller to XML View

======================

/*global location*

/

sap.ui.define([

"ns/controller/BaseController",

"sap/ui/model/json/JSONModel",

"sap/ui/core/routing/History",

"ns/util/Formatter"

],

function (

BaseController,

JSONModel,

History,

Formatter )

{

"use strict";

return BaseController.extend("ns.controller.Object", {

formatter: Formatter,

...

XML View

========

<IconTabFilter

id="ObjectViewTime"

text="{i18n>ObjectViewIconTime}"

key="TabTime"

icon="sap-icon://home"

design="Horizontal"

tooltip="{i18n>ObjectViewIconTime}">

<content>

<core:Fragment fragmentName="ns.view.Time" type="XML" />

</content>

</IconTabFilter>

XML Fragment

=============

<ColumnMicroChart>

<leftBottomLabel>

<ColumnMicroChartLabel label="{TimeSecMin}" />

</leftBottomLabel>

<rightBottomLabel>

<ColumnMicroChartLabel label="{TimeSecMax}" />

</rightBottomLabel>

<columns>

<ColumnMicroChartData value="{TimeSecMin, formatter : 'formatter.getIntegerFromDecimal'}" color="Error" />

<ColumnMicroChartData value="20" color="Neutral" />

<ColumnMicroChartData value="30" color="Error" />

</columns>

</ColumnMicroChart>

Formatter.js

=============

sap.ui.define([],

function() {

"use strict";

return {

getIntegerFromDecimal: function (sValue) {

if (!sValue) {

return ""; }

return parseFloat(sValue).toFixed(0);

},

MY QUESTIONS:

=============

In several SCN blogs the problem "Formatter", "Fragment", "this" and "binding context complex" has been discussed.

My UI5 control "ColumnMicroChart" and used value from SAP Gateway is in format 100.33 (two decimals). It seems, the ColumnMicroChartData can use only values without decimals.

I want to format the runtime value to be a value without decimals. So I'm using a formatter, defined in the project. Project structure as shown. Base XML contains an IconTabBar, where the IconTabBar uses XML Fragments.

My app is a FIORI app using component.js, not index.html.

1.) When you have a FIORI app, do you need do set the "BindingSyntax" to COMPLEX and how?

In an index.html you use the Boostrapping, but in the component.js?

2.) Some blogs mention, that the view controlling controller must be passed to the XML Fragment, so the XML fragment is able to access the formatter function.

How can I pass "this" within

<core:Fragment fragmentName="ns.view.Time" type="XML" />

???

The variable "TimeSecMin" contains a value 34.00. I know this, because the Label to the

ColumnMicroChartLabel is showing up in UI.

What is maybe the reason, the formatter is not accessed? Or is there maybe another way

to format a decimal runtime value by that way, that the UI5 control <ColumnMicroChartData... is able to display the value?

columnmicrochart.jpg

The actual result shown in the screenshot is the left bar. The label is showing minimum seconds value 34.00. This is the value, I want to pass dynamically to the bar. But the left bar is on level 0 / zero. The other two bars contain actually hard coded (non-decimal) test values.

Thanks in advance

Klaus Wegener

Accepted Solutions (0)

Answers (5)

Answers (5)

imsuryapandiyan
Participant

Hi Klaus,

I think there it is not binded properly.

<ColumnMicroChartData value="{path: 'TimeSecMin', formatter : '.formatter.getIntegerFromDecimal'}" color="Error"/>

And ColumnMicroChartData accepts only float not values without decimals.

So your formatter method should be:

return parseFloat(sValue);

Hope this helps.

0 Kudos

Hi Suriya,

thank you for your answer. This approach to put the formatter in the view -Controller was working!
For just the moment this is my approach.

But I'm still wondering, why the access to the formatter in the (I think correctly referenced) own util-folder
is not working.

But anyway, thanks!

0 Kudos

Hi Suriya,

my application has an Gateway service which delivers the data with EDM.type "decimal" or "string".

The configuration to

<ColumnMicroChartData value="{path: 'TimeSecMin', formatter : '.formatter.getIntegerFromDecimal'}" color="Error" />

leads to an hanging application.

Chrome-Error:

====================

ManagedObject-dbg.js:1366 Uncaught (in promise) Error: "34.00" is of type string, expected float for property "value" of Element sap.suite.ui.microchart.ColumnMicroChartDat

====================

It seems, that the formatter is not executed. So I'm still not sure, if the formatter is accessable in the fragment.
BR
Klaus

imsuryapandiyan
Participant
0 Kudos

Yes, that is strange. Let us try to point to controller method.

<ColumnMicroChartData value="{path:'TimeSecMin', formatter : '.getIntegerFromDecimal'}" color="Error"/>

In Controller:

getIntegerFromDecimal: function(sValue) {
				if (!sValue) {
					return "";
				}
				return parseFloat(sValue);
			}

0 Kudos

Hi Jun Wu,

no, I simply use

<core:Fragment fragmentName="ns.view.Time" type="XML" />

in my main XML view to reference the fragment.

BR
Klaus Wegener

junwu
Active Contributor
0 Kudos

did you use adddependent when create the fragment in your controller?