cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 - XML view and Formatter

Go to solution
Former Member

on ‎01-20-2015 4:38 PM

0 Kudos

Dear all,

I'm going crazy! I have written a small app with a XML view.

In this app, the Formatter Method is not processed. Doing the same staff in a JS-view runs like hell.

Here's my code...

Model:

{

    "RESULT": [

        {   "WERKS": "1102",

            "QTY_PROZ": 4.564,

            "INFO": "Heidelberg

        },

        {   "WERKS": "1701",

            "QTY_PROZ": 16.857,

            "INFO": "Bern"

        }

    ]

}

Controller:

sap.ui.controller("dummy.main", {

  onInit: function() {

  var oModel = new sap.ui.model.json.JSONModel();

  oModel.loadData("json/plants.json", false);

  sap.ui.getCore().setModel(oModel,"MAIN");

  },

});

And my View:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

  controllerName="dummy.main" xmlns:html="http://www.w3.org/1999/xhtml">

    <Page showHeader="false" enableScrolling="false">

        <TileContainer id="container" tiles="{MAIN>/RESULT}" allowAdd="false" editable="false">

            <StandardTile number     = "{MAIN>QTY_PROZ}"

                          numberUnit = "%"

                          info       = "{MAIN>INFO}"

                          icon       = "sap-icon://building"

                          title      = "{ path: 'MAIN>WERKS', formatter: 'my.Formatter.getName() }"/>

        </TileContainer>

    </Page>

</core:View>

the index.html

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>


  <script src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.m"

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <script>

  sap.ui.localResources("dummy");

  var app = new sap.m.App({initialPage:"idmain1"});

  var page = sap.ui.view({id:"idmain1", viewName:"dummy.main", type:sap.ui.core.mvc.ViewType.XML});

  app.addPage(page);

  app.placeAt("content");

  </script>

  <script src="util/Formatter.js"></script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

Last but not least my Formatter.js which is in folder "util"

jQuery.sap.declare("my.Formatter");

my.Formatter = {

  getName : function (value) {

  if( value == "1102") return "DE";

  if( value == "1701") return "CH";

  return "xx";

  }

};

As you can see, I'm trying to call a formatter for the title property of a StandardTile. the formatter method is in the file util/Formatter.js

But it is not processed by the runtime engine. The tile is displayed on the screen, but w/o the property "title".

I can call the method inside my Chrome debugger.manually, so from my point of view the code should know about the method.

Moving the getName directly into the controller is the same...

Any hint, why my formatter isn't called?

I really appriciate your support.

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Qualiture
Active Contributor
‎01-20-2015 4:48 PM
0 Kudos

You should call your formatter without () and you're missing a closing quote:

title = "{ path: 'MAIN>WERKS', formatter: 'my.Formatter.getName' }"

Show replies
Show replies
Former Member
‎01-20-2015 4:56 PM
0 Kudos

Dear Robin,

thanks for the fast reply. You're right, there was an error in the code, but also after fixing it, it's the same issue.

The formatter method is not called by the runtime engine (I set a breakpoint in the chrome debugger and it didn't stopped at a reload.)

Any other ideas?

Qualiture
Active Contributor
‎01-20-2015 5:09 PM
0 Kudos

Ah I see:

  1. You don't need to include a reference in your index.html to your formatter
  2. Since your formatter class is in a /util folder, you should declare it as "util.my.Formatter", and in your Controller add a jQuery.sap.require("util.my.Formatter") reference at the top
  3. Same in your view; instead of referencing it as "my.Formatter.getName", use "util.my.Formatter.getName"
Former Member
‎01-21-2015 9:22 AM
0 Kudos


You made my day!

Your hints together with the binding-complex in the index.html did it.

Thanks a lot!

LeeG1
Product and Topic Expert
Product and Topic Expert
‎04-06-2015 4:50 PM
0 Kudos

This message was moderated.

Former Member
‎02-18-2016 6:35 AM
0 Kudos

This message was moderated.

former_member337902
Explorer
‎04-16-2016 3:22 AM
0 Kudos

This message was moderated.

Answers (1)

Answers (1)

Former Member
‎01-23-2015 8:32 AM
0 Kudos

Sorry to bring it up again.

Some formatter we will write, are not to be stored in "util.my.Formatter" because then, they are some kind of  "global".

One time used formatter we would prefer to add them just into the controler.

Adding the method to the view's controller brings a similar result.

In the console I found:

2015-01-23 10:09:09 formatter function conv2Capital not found! - 

Example:

<StandardTile number = "{MAIN>QTY_PROZ}"

              numberUnit = "%"

              info       = "{MAIN>INFO}"

              icon       = "sap-icon://building"

              title      = "{ path: 'MAIN>WERKS', formatter:'conv2Capital' }"/>


The formatter isn't called 😉

Show replies
Show replies
Former Member
‎01-23-2015 9:22 AM
0 Kudos

I found it:

If you want to call the formatter from your controller, called it with a dot in front of the method, eg:

formatter:'.conv2Capital'

Please see :

OpenUI5 SDK - Demo Kit

Former Member
‎06-16-2015 2:43 PM
0 Kudos

Hi,

is there also a possibility for using functions from a util file in xml view?

for example like:

<button press="util.General.showMessage">

we need this function in different views and if it wouldn't be necessary to define this function  in each viewcontroller, that would save us lot of time.

br Alex

Former Member
‎06-16-2015 2:46 PM
0 Kudos

Hi Alexander,

The below link will help u with that

OpenUI5 SDK - Demo Kit

Former Member
‎06-16-2015 3:01 PM
0 Kudos

Hi Sarath,

thanks for your fast answer, I will check if it does work for me!

Br Alex

Former Member
‎09-02-2015 1:19 PM
0 Kudos

Dear Carsten,

Adding data-sap-ui-xx-bindingSyntax="complex" in index.html will work top of Mr. Robin's suggestion.

<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.m,sap.ui.commons"

  data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">

</script>

BR,

Prabhu

Ask a Question