Binding a JSON to a Table

Question

EDIT: I updated my function! I want to bind the JSON data to my sap.ui.table but I kinda have no clue how this works

So this is my table:

<content>
<t:Table id="transactionUiTable" 
                columnHeaderVisible="true" 
                selectionMode="Single" 
                selectionBehavior="RowSelector"
                enableColumnReordering="false" 
                enableGrouping="false" 
                showColumnVisibilityMenu="false" 
                enableSelectAll="false" 
                enableCustomFilter="false"
                enableBusyIndicator="false" 
                rows="{path: '/'}" 
                rowSelectionChange="onTableSelectionChange">
                    <t:toolbar>
                        <Toolbar id="toolbar">
                                <Input width="15%" id="transactionId"  value="txn_18KlBw2eZvKYlo2CdHGDlpAJ"/>
                                <Button text="Search Transaction" type="Emphasized" icon="sap-icon://search" press="onTransactionByTransactionId"/> 
                                <Button text="Transactionlist" type="Unstyled" press="onTransactionList"/>
                                <Button text="Customer Transactionlist" type="Unstyled" press="onCustomerTransactionList"/>
                                <ToolbarSpacer/>
                                <Button icon="sap-icon://action-settings" type="Default" />
                        </Toolbar>
                    </t:toolbar>
                    <t:columns>
                        <t:Column id="id" hAlign="Center" width="10%">
                            <Label id="labelId" text="Transaction Id"></Label>
                            <t:template>
                                <Text text="{orderId}"/>
                            </t:template>
                        </t:Column>
                        <t:Column id="columnDate" hAlign="Center">
                            <Label id="labelDate" text="Date"></Label>
                        </t:Column>
                        <t:Column id="columnAmount" hAlign="Center">
                            <Label id="labelAmount" text="Amount"></Label>
                        </t:Column>
                        <t:Column id="columnCurrency" hAlign="Center">
                            <Label id="labelCurrency" text="Currency"></Label>
                        </t:Column>
                        <t:Column id="columnFee" hAlign="Center">
                            <Label id="labelFee" text="Fee"></Label>
                        </t:Column>
                        <t:Column id="columnNet" hAlign="Center">
                            <Label id="labelNet" text="Net"></Label>
                        </t:Column>
                        <t:Column id="columnType" hAlign="Center">
                            <Label id="labelType" text="Type"></Label>
                        </t:Column>
                            <t:Column id="columnStatus" hAlign="Center">
                            <Label id="labelStatus" text="Status"></Label>
                        </t:Column>
                    </t:columns>
                </t:Table>
            </content>

By clicking on the Button with the text "Search Transaction", I want to call via GET to a service with a transactionId, which can be wrote into a Input field, I already filled it with the value "txn_blablabla"

so this is my function:

onTransactionByTransactionId : function() {
        this.oView = this.getView();
        var query =  this.oView.byId("transactionId").getValue();

        var oJsonModel =  new sap.ui.model.json.JSONModel();
        oJsonModel.loadData("/retrieveTransacion?transactionId=" + query , {}, false);

        var oData = oJsonModel.getProperty("/");
        this.oView.setModel(oData);


    }

so on my variable oData I got my JSON binded, but how can I bind those JSON data on my table columns?

for example I want to bind the JSON data amount with the column with the id "columnAmount" ....

jpenninkhof jpenninkhof · Accepted Answer · 2016-06-21T21:20:00

You're actually almost there. The only thing you need to do is to set the model to the JSONModel rather than to the raw JSON data, i.e.:

this.oView.setModel(oData); -> this.oView.setModel(oJsonModel);

You may also want to move initialisation of your JSONModel and the binding to the view to the init section, as this doesn't need to happen every time the search button is pressed. Moving it to the init-method would get your code to perform faster and I think it would make it more understandable as well.

Please find a slightly cleaned and modified version (so that it can connect to the public countrylist service) in this jsbin: http://jsbin.com/laqefak/1/edit?html,output

Binding a JSON to a Table

1 Answers