Skip to Content
0
Apr 30, 2018 at 07:54 PM

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

1615 Views Last edit May 01, 2018 at 09:06 AM 3 rev

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>

Attachments

comboerror1.jpg (157.3 kB)
comboerror2.jpg (152.5 kB)