How to pass an event (a button click in this case) to a fragment in order to display the data associated with the specific row?

Question

I am developing an SAPUI5 application and I have a table of items fetched from an oData service. I need to display the details associated with the specific row on a button click thorough a fragment.

Answer 1

Bind the row data to the Dialog using getBindingContext() .

view.xml

<Button text="Show Detail" press="bindDialog"/>

DetailSFDialog.fragment.xml

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
    <Dialog title="SF title">
        <f:SimpleForm 
           editable="true"
           layout="ResponsiveGridLayout"
           labelSpanL="4"
           labelSpanM="4"
           labelSpanS="12"
           adjustLabelSpan="false"
           emptySpanL="0"
           emptySpanM="0"
           emptySpanS="0"
           columnsL="1"
           columnsM="1"
           singleContainerFullSize="false" >
            <f:content>
                <Label text="Amount">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Label>
                <Input value="{/data/Amount}">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Input>
                <Label text="Quantity">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Label>
                <Input value="{/data/Quantity}">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Input>
                <Label text="Unit">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Label>
                <Input  value="{/data/Unit}">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Input>
                <Label text="Status">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Label>
                <Input  value="{/data/Status}">
                    <layoutData>
                        <l:GridData span="L2 M3 S6"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
    </Dialog>
</core:FragmentDefinition>

controller.js

bindDialog: function(oEvent) {
  var oRowData = oEvent.getSource().getParent().getBindingContext().getObject();//get the row data
    if (!this._detailDialog) {
        this._detailDialog = sap.ui.xmlfragment("path/DetailSFDialog", this);
        this.getView().addDependent(this._detailDialog);
    }    
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({ "data": oRowData});
    this._detailDialog.setModel(oModel);
    this._detailDialog.open();
},

Output