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

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