SAPUI5: How to bind Arrays or Objects to UI Elements with OData Model?

Question

I want to bind a ProcessFlowLaneHeader in SAPUI5 to a OData Model in SAPUI5. The texts, and position are no problem to bind.

My problem is that I dont know how I can bind the property state correctly to a single OData attribute. The state property is excepting an Array or Object, but I would like to give for state and value different attributes in my OData Model.

This is the way when you are manually setting up a Array in the Controller with fixed values

                new sap.suite.ui.commons.ProcessFlowLaneHeader({
                    text: "{ProcessFlowModel>label}",
                    position: "{ProcessFlowModel>position}",
                    state: [ {
                            "state": "Positive",
                            "value": 100                
                        }
                    ]
                })

but I want to bind state and value of the property state to a ODataModel, and it doesn't work. Is my syntax wrong or is this even possible?

                new sap.suite.ui.commons.ProcessFlowLaneHeader({
                    text: "{ProcessFlowModel>label}",
                    position: "{ProcessFlowModel>position}",
                    state: [ {
                            "state": "'{ProcessFlowModel>state}'",
                            "value": '{ProcessFlowModel>value}'             
                        }
                    ]
                })

I know I could do it with multilevel expanded entityset after modifying my OData service, because SAPUI5 is expecting a nested or expanded entity set, but I would like to solve it with single attributes:

My OData output looks like

"state": "Positive",
"value": "50"

and not like this, and this would be ok as far as i know

        "state": [
            {
                "state": "Positive",
                "value": 25
            }

So my question also is, how I can bind objects or arrays in SAPUI5 without using multilevel expanded entityset?

Answer 1

I have never used the control but my answer would be too long for a comment. From everything I know about UI5 I would expect that you can do the following:

Create a formatter which returns the object in the format that is expected by the control.

formatProcessFlowLaneHeaderState: function(state, value) {
    return {
        state,
        value
    };
}

Then use it in your binding

state: "{ parts: ['ProcessFlowModel>state', 'ProcessFlowModel>value'], formatter: '.formatProcessFlowLaneHeaderState' }"

If you are wondering about the syntax of the formatter it is using shorthand property names .

Also if I understand the docs correctly you don't even need to create an object but can return an array with two values. Then you don't even need the formatter but can use expression binding:

state: "{= [${ProcessFlowModel>state}, ${ProcessFlowModel>value}] }"

Answer 2

My application didn't found my formatter method so I put it inside the binding:

                new sap.suite.ui.commons.ProcessFlowLaneHeader({
                    text: "{ProcessFlowModel>label}",
                    position: "{ProcessFlowModel>position}",
                    state: {
                        parts: ['ProcessFlowModel>state', 'ProcessFlowModel>value'],
                        formatter: function (state, value) {
                            return [{ 
                                state: state,
                                value: value
                            }];
                        }
                    }
                })