SAPUI5 XML View Binding with parameters from same model

Question

I have the following Problem:

I want to develop a shopping cart and have problems with the counter of the product card and I have problems to show the data in the summary view.

For this project I use XML views and I've already readed a lot about binding. When I want to bind a static path I have no problems. The data comes from a JSON model named "cartData".

Example (from the goToCart Button)

...
text="{cartData>/currentUser}";
...

Everything shows correctly (in the example), but for my project I need to bind a main binding (for counter of the cart) and this path need a parameter for the user. Which is saved at the path like in the example.

I've already tried a lot of combinations to accomplish this bug, but now I have no more ideas :-(

A example of my tried combinations:

text="{ ${cartData>/cartOfUser/} + {cartData>/currentUser} + '/roles/counter'}"

EDIT:

Some dummy parts of my code:

My Button (doen't work yet how I need...):

<m:Button
                id="details.Btn.ShowCart"

                text="{ parts: [
                    {path: 'cartProducts>/cartEntries/'},
                    {path: 'cartProducts>/currentChoice/'},
                    {path: '/addedRoles/counter'}
                ]}"

                type="Emphasized"
                icon="sap-icon://cart-3"
                iconFirst="true"
                width="auto"
                enabled="true"
                visible="true"
                iconDensityAware="false"
                press="showCart"/>

How my JSON Model in LocalStorage look like:

{
    "cartEntries": {
        "counter": 2,
        "UserId12": {
            "UserId": "UserId12",
            "Email": "Email12",
            "dateCreated": "2017-07-14T13:18:13.632Z",
            "dateUpdated": "2017-07-14T13:18:13.632Z",
            "addedRoles": {
                "counter": 0
            },
            "existingRoles": {
                "counter": 0
            }
        },
        "UserId14": {
            "UserId": "UserId14",
            "Email": "Email14",
            "dateCreated": "2017-07-14T13:18:30.415Z",
            "dateUpdated": "2017-07-14T13:18:30.415Z",
            "addedRoles": {
                "counter": 0
            },
            "existingRoles": {
                "counter": 0
            }
        }
    },
    "currentChoice": "UserId14"
}

My JSON Data with comment: I need to grab the value from "currentChoice", to search with this information in cartEntries for the right counter

How the Button look now: It show the data not in the correct way. Please ignore the zero at first...

The goal is to take the value of "currentChoice" and use it as a 'parameter' to call the information for the right user..

What I also tried:

text="{= ${= 'cartProducts>/cartEntries/' + ${cartProducts>/currentChoice/} + '/addedRoles/counter' } }"

What works, but I need it more "dynamic" is:

text="{cartProducts>/cartEntries/UserId14/addedRoles/counter}"

I hope you guy's now know what I mean... :-/

Best regards

The Solution

How I solve the problem:

1. Add a formatter to the button:

   /', formatter: '.formatter._getCartInt' }" type="Emphasized" icon="sap-icon://cart-3" iconFirst="true" width="auto" enabled="true" visible="true" iconDensityAware="false" press="showCart"/>

2. Implement the formatter in my formatter.js file:

   _getCartInt: function (sP1) { var sCurrent = sP1.currentChoice; var sFinalString = "cartProducts>/cartEntries/" + sCurrent + "/addedRoles/counter"; this.getView().byId("btn.ShowCart").bindProperty("text",{path: sFinalString, type: new sap.ui.model.type.Integer()}); }

Answer 1

Try to use the following approach:

in i18n file:

cartInfoTitle=User: {0} has: {1} items in the cart

in XML view:

<Text text="{
    parts: [
        {path: 'i18n>cartInfoTitle'}, 
        {path: 'modelName>/property1'}, 
        {path: 'modelName>/property2'}
    ], 
    formatter: 'jQuery.sap.formatMessage'
}" />

So you declare the i18n entry and then use the predefined formatter to replace the placeholders with the values from the "parts" array (Documentation article).

Answer 2

Ok so to answer : you cannot use expression in a binding (same applies for classes). So to have the output you want you will indeed need a formatter + include the needed top level elements of your JSON model in the binding parts (so that it updates properly).

XML (I assume your model is called 'cartData')

<Text text="{
    parts: [
        'cartData>/cartEntries',
        'cartData>/currentChoice'
    ], 
    formatter: '.myFormatter'
}" />

JS Controller

controller.prototype.myFormatter = function (cartEntries, currentChoice) {
    if (cartEntries && cartEntries[currentChoice]) {
        return cartEntries[currentChoice].addedRoles.counter;
    }
}

[code not tested]