What is the standard way to get values from <select> tag in SAPUI5. If is present in Table

Question

Consider we have Sap.m Table. and we are binding values to Sap.m.Select. So what it the standard way to get selected values from that select tag.

I went through many blogs and, I found that everyone using for loop to get values in such case.

I don,t want to use id for the table.

<Table noDataText="No Activity Data"  items="{oModel>/result}">
    <items>
        <ColumnListItem type="Active">
            <cells>
                <Select xmlns="sap.m" items="{oModel>results1}">
                    <!--<items>-->
                    <core:Item key="{oModel>empno}"  text="{oModel>empno}"/>
                    <!--</items>-->
                </Select>
                <Select xmlns="sap.m" items="{oModel>results1}">
                    <!--<items>-->
                    <core:Item key="{oModel>mobno}" text="{oModel>mobno}"/>
                    <!--</items>-->
                </Select>
                <Input value="{oModel>text}"/>
                <Button icon="sap-icon://delete" `enter code here`press="deleteActivityRow"/>
            </cells>
        </ColumnListItem>
    </items>
    <columns>
        <Column>
            <header>
                <Label text="Activity"/>
            </header>
        </Column>
        <Column>
            <header>
                <Label text="Object"/>
            </header>
        </Column>
        <Column>
            <header>
                <Label text="Details"/>
            </header>
        </Column>
        <Column/>
    </columns>
</Table>

Answer 1

you can do something like this:

set the selectedKey property to the Select control and then retrieve it when needed

<Select xmlns="sap.m" items="{oModel>results1}" selectedKey="{oModel>selectedKey}">
    <!--<items>-->
    <core:Item key="{oModel>empno}"  text="{oModel>empno}"/>
    <!--</items>-->
</Select>

so, on your deleteActivityRow method, you could do something like

deleteActivityRow: function(oEvent) {
    var oModel = oEvent.getParameter("listItem").getBindingContext("oModel");
    var selectedKey = oModel.getObject().selectedKey;

    // use the selectedValue as you want
}

Answer 2

1. I bound the selectedKey property of the Select to selectedEmpNo and selectedMobNo. Due to two-way-binding, whichever item user will select, its key will be stored in model.

2. Added a button, getMeData which will print the data in console.

XML Code:

                <Button text='getData' press='getData'/>
                <Table noDataText="No Activity Data" items="{oModel>/result}">
                    <items>
                        <ColumnListItem type="Active">
                            <cells>
                                <Select xmlns="sap.m" items="{oModel>results1}" selectedKey='{oModel>selectedEmpNo}'><!--Notice selectedkey bind here -->

                                    <!--<items>-->
                                    <core:Item key="{oModel>empno}" text="{oModel>empno}"/>
                                    <!--</items>-->
                                </Select>
                                <Select xmlns="sap.m" items="{oModel>results1}" selectedKey='{oModel>selectedMobNo}'><!--Notice selectedkey bind here -->
                                    <!--Notice selectedkey bind here -->
                                    <!--<items>-->
                                    <core:Item key="{oModel>mobno}" text="{oModel>mobno}"/>
                                    <!--</items>-->
                                </Select>
                                <Input value="{oModel>text}"/>
                                <Button icon="sap-icon://delete" press="deleteActivityRow"/>
                            </cells>
                        </ColumnListItem>
                    </items>
                    <columns>
                        <Column>
                            <header>
                                <Label text="Activity"/>
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Object"/>
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Details"/>
                            </header>
                        </Column>
                        <Column/>
                    </columns>
                </Table>

Controller:

My dummy data:

        var data = {
            result: [{
                text: 'text1',
                selectedEmpNo: undefined,
                selectedMobNo: undefined,
                results1: [{
                    empno: '',
                    mobno: ''
                }, {
                    empno: 'EMP1',
                    mobno: 'Mob1'
                }, {
                    empno: 'EMP2',
                    mobno: 'Mob2'
                }, {
                    empno: 'EMP3',
                    mobno: 'Mob3'
                }, {
                    empno: 'EMP4',
                    mobno: 'Mob4'
                }]
            }, {
                text: 'text2',
                selectedEmpNo: undefined,
                selectedMobNo: undefined,
                results1: [{
                    empno: '',
                    mobno: ''
                }, {
                    empno: 'EMP1',
                    mobno: 'Mob1'
                }, {
                    empno: 'EMP2',
                    mobno: 'Mob2'
                }, {
                    empno: 'EMP3',
                    mobno: 'Mob3'
                }, {
                    empno: 'EMP4',
                    mobno: 'Mob4'
                }]
            }, {
                text: 'text3',
                selectedEmpNo: undefined,
                selectedMobNo: undefined,
                results1: [{
                    empno: '',
                    mobno: ''
                }, {
                    empno: 'EMP1',
                    mobno: 'Mob1'
                }, {
                    empno: 'EMP2',
                    mobno: 'Mob2'
                }, {
                    empno: 'EMP3',
                    mobno: 'Mob3'
                }, {
                    empno: 'EMP4',
                    mobno: 'Mob4'
                }]
            }, {
                text: 'text4',
                selectedEmpNo: undefined,
                selectedMobNo: undefined,
                results1: [{
                    empno: '',
                    mobno: ''
                }, {
                    empno: 'EMP1',
                    mobno: 'Mob1'
                }, {
                    empno: 'EMP2',
                    mobno: 'Mob2'
                }, {
                    empno: 'EMP3',
                    mobno: 'Mob3'
                }, {
                    empno: 'EMP4',
                    mobno: 'Mob4'
                }]
            }, {
                text: 'text5',
                selectedEmpNo: undefined,
                selectedMobNo: undefined,
                results1: [{
                    empno: '',
                    mobno: ''
                }, {
                    empno: 'EMP1',
                    mobno: 'Mob1'
                }, {
                    empno: 'EMP2',
                    mobno: 'Mob2'
                }, {
                    empno: 'EMP3',
                    mobno: 'Mob3'
                }, {
                    empno: 'EMP4',
                    mobno: 'Mob4'
                }]
            }]
        };
        var oModel = new sap.ui.model.json.JSONModel(data);
        this.getView().setModel(oModel, 'oModel');

getData Function:

    getData: function () {
        console.log(this.getView().getModel('oModel').getData());
    }

Here, you dont need to fetch the table Id and loop through the items of table. However, as I previously mentioned, if you still need to validate individual element, you will need to still loop over the data in the model.

Hope this helps.