CODEWITHSUNDEEP
sapui5
jpenninkhof
jpenninkhof

Reputation: 1920

Binding a control to a member of a collection from an OData model

I have setup an oData service that returns the tags of an entity in a collection of Strings. If you look at the metadata.xml, you'll see something like this:

<Property Name="Tags" Type="Collection(Edm.String)"/>

A typical entity would like like this:

{
    "Id": 120983,
    "Title": "Title of something awesome!",
    "Tags": [ "Tag1", "Tag2" ]
}

I was hoping to use sap.m.Tokenizer and sap.m.Token to display the tag-list as a set of tokens. To do so, I have included the section below to my xml view:

<core:Title text="Tags" />
<Tokenizer tokens="{Tags}">
    <Token text="tag" editable="false" />
</Tokenizer>

It now shows a list of tags, like so:

enter image description here

The next step is to replace the hardcoded token text with the strings from the tag collection. I am wondering how I should do this though. The strings in that array don't have a name, so something like text="{Name}" won't do the job. Something like text="{}" also doesn't work of course.

Is there any way I can bind the text property of a sap.m.Token control to the strings in my collection?

Upvotes: 0

Views: 1456

Answers (2)

Jasper_07
Jasper_07

Reputation: 2473

I had a similar problem recently, sap.m.MultiComboBox has the property

selectedKeys : {type : "string[]", group : "Data", defaultValue : []}

the selected key are rendered as Tokens, I couldn't see a way to make Type="Collection(Edm.String)" work in ABAP

the solution we came up with was to use a function which parsed the tokens from a string

parseStringArray: function(sArray) {
    return sArray ? sArray.split(",") : [];
},

in action

new MultiComboBox({
    selectedKeys: {
        path: "Tags",
        formatter: this.parseStringArray
    }
})

Upvotes: 1

Marc
Marc

Reputation: 6190

It's perfectly possible with your current data structure.

How about the following: http://jsbin.com/yisumilana/1/edit?html,output

<Tokenizer tokens="{path: '/Tags'}">
    <Token text="{}" editable="false" />
</Tokenizer>

Since /Tags is a good ol' array of strings, you can use the tag "as is", i. e. you don't need provide a path.

Credit to @keshet for providing the JSBin example.

Upvotes: 3

Related Questions