Skip to Content

XML view, Formatter within XML Fragment not accessable/working

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Oct 21, 2018 at 07:14 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 20, 2018 at 12:58 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 20, 2018 at 06:21 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 21, 2018 at 06:48 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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);
      			}
      

  • Oct 25, 2018 at 09:01 PM

    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!

    Add comment
    10|10000 characters needed characters exceeded