Skip to Content
0

SAPUI5 Table Combo Box: can't show description for the selected item

Apr 30 at 07:54 PM

118

avatar image

Hello experts,

This is probably easy to do, however, as a new guy in this, I have been slightly confused.

I have a SAPUI5 table (sap.ui.table.Table) bound to DB table A (unnamed model). The combo box is bound to the value of the corresponding field in the table using the selectedKey property and has the items template bound to table B (named model: f4, where the texts for the field in table A reside), see code below:

this.oRoleTable.addColumn(new sap.ui.table.Column({

label: new sap.m.Label({text: "Agreement Role ID"}),

template: new sap.m.ComboBox({

id: "cbRoleType",

selectedKey: "{AgrRoletpid}",

items: { path: "f4>/Role_TypesSet",

template: oRoleItemTemplate,

templateShareable: "false"} })

}));

As you can see in the snapshot below, the selectedKey property looks like it's not working - for testing reasons, the last column attached holds the value corresponding to the selected key, in this case {AgrRoletpid}

Having got frustrated with selected key value not populating. tried a trick I found which looks like additional binding to the control, an addition to the statement above

this.oRoleTable.addColumn(new sap.ui.table.Column({

label: new sap.m.Label({text: "Agreement Role ID"}),

template: new sap.m.ComboBox({

id: "cbRoleType",

selectedKey: "{AgrRoletpid}",

items: { path: "f4>/Role_TypesSet",

template: oRoleItemTemplate,

templateShareable: "false"} }).bindProperty("value", "AgrRoletpid")

}));

Now something is happening but not really what I expected. The actual value is shown in the combo, problem is that, instead of the value, I should see the descriptions (check image 2). Now, instead of having text "Role 1" selected, I have its key instead (301 = Role 1)

Must have been obvious from the above that all I'm trying to do is to show the text coming from table B and bind the key to the value of table A in order to save the value. Should be simple but seems that I'm missing something here, any help???

Best regards,

Greg (going mad)

@ VIPLOVE KHUSHALANI: Item template creation. table binding code:

Item template:

<code>var oRoleItemTemplate = new sap.ui.core.ListItem({ key:"{f4>AgrRoletpId}", text:"{f4>AgrRoletptxt}"});  

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "Agreement ID"}),
            template: new sap.m.Text({text: "{AgrRoleid}"})
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "Agreement Role ID"}),
            template: new sap.m.ComboBox({ 
                                id: "cbRoleType", 
                                selectedKey: "{AgrRoletpid}",
                                //selectedItemId: "{AgrRoletptxt}",
                                items: {
                                    path: "f4>/Role_TypesSet",
                                    template: oRoleItemTemplate,
                                    templateShareable: "false"}
                    }).bindProperty("value", "AgrRoletpid") 
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "Valid From"}),
            template: new sap.m.Text({text: "{ path: 'ValidFrom', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true} }"})
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "Valid To"}),
            template: new sap.m.Text({text: "{ path: 'ValidTo', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true} }"})
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "Staff Type ID"}),
            template: new sap.m.Text({text: "{StaffTypeid}"})
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "Staff ID"}),
            template: new sap.m.Text({text: "{StaffId}"})
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "First Name"}),
            template: new sap.m.Text({text: "{FirstName}"})
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "Last Name"}),
            template: new sap.m.Text({text: "{LastName}"})
            }));

            this.oRoleTable.addColumn(new sap.ui.table.Column({
            label: new sap.m.Label({text: "TEST"}),
            template: new sap.m.Text({text: "{AgrRoletpid}"})
            }));				
Table binding (not sure if template still required here after dynamic binding, however, with or without, behaves the same)

<code>        var roleKey = "Agreement_Roles";
	this.oRoleTable.bindRows({
		path: roleKey,
		template: oTemplate,
		templateShareable: false});
<code><br>

comboerror1.jpg (157.3 kB)
comboerror2.jpg (152.5 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

VIPLOVE KHUSHALANI May 01 at 06:54 AM
0

Hi ..

2 things i want to mention here ..

First bindProperty("value","AgrRoletpid") will bind the property "value" not the property "selectedKey". The value property bind here is coming from the extension sap.m.inputbase. So it will not give you the text values bind as the aggregation in combo box..

Second can you provide code of oRoleItemTemplate .. Template of combobox .. Might be the error in there in the template ..Also provide the code how you are binding the model to the table ..


Thanks

Viplove

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hello,

After failing to have it working in the view, I have switched to creating the template inside the controller, table and model binding code attached above, thank you.

1