View Binding of Grid/UI Table with JSON

Click here and follow my SAP UI5/FIORI snippets and information Page

I have made Grid Table example, Below I have shown Application Structure, View Part, Controller Part, Formatter, JSON and Result.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<mvc:View controllerName="GridTable.controller.S1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

xmlns="sap.ui.table" xmlns:m="sap.m" xmlns:u="sap.ui.unified" xmlns:c="sap.ui.core">

<m:App>

<m:pages>

<m:Page title="Grid Table Example">

<m:content>

<Table selectionMode="None" rows="{/Result}" visibleRowCount="4">

<columns>

<Column>

<m:Label text="First Column"/>

<template>

<m:VBox>

<m:ObjectStatus text="{first}"/>

<m:Link text="Demo Link" visible="{path:'FI',formatter:'GridTable.util.Formatter.LinkDisplay'}"/>

</m:VBox>

</template>

</Column>

<Column>

<m:Label text="Second Column"/>

<template>

<m:Input value="{second}"/>

</template>

</Column>

<Column>

<m:Label text="Third Column"/>

<template>

<m:Label text="{third}"/>

</template>

</Column>

<Column>

<m:Label text="Fourth Column"/>

<template>

<m:Text text="{fourth}"/>

</template>

</Column>

<Column>

<m:Label text="Fifth Column"/>

<template>

<m:Text text="{fifth}"/>

</template>

</Column>

<Column>

<m:Label text="Sixth Column"/>

<template>

<m:Text text="{sixth}"/>

</template>

</Column>

<Column>

<m:Label text="Seventh Column"/>

<template>

<u:Currency value="{Price}" currency="{CurrencyCode}"/>

</template>

</Column>

</columns>

</Table>

</m:content>

</m:Page>

</m:pages>

</m:App>

</mvc:View>

Controller Part

// Loading formatter....

jQuery.sap.require("GridTable.util.Formatter");

sap.ui.define([

"sap/ui/core/mvc/Controller"

], function(Controller) {

"use strict";

return Controller.extend("GridTable.controller.S1", {

onInit: function() {

// Loading json file....

var json = new sap.ui.model.json.JSONModel("model/Record.json");

// Setting json to current view....

this.getView().setModel(json);

}

});

});

Formatter.js

// Declaring formatter file....

jQuery.sap.declare("GridTable.util.Formatter");

GridTable.util.Formatter={

LinkDisplay:function(path){

if(path!==null){

if(path==="R"){

return true;

}else{

return false;

}

}

}

};

Record.json

{

"Result": [{

"first": "Demo First",

"FI": "R",

"second": "Demo Second",

"third": "Demo Third",

"fourth": "Demo Fourth",

"fifth": "Demo Fifth",

"sixth": "Demo Sixth",

"Price": 1010,

"CurrencyCode": "INR"

}, {

"first": "Demo First 1",

"FI": "R",

"second": "Demo Second 1",

"third": "Demo Third 1",

"fourth": "Demo Fourth 1",

"fifth": "Demo Fifth 1",

"sixth": "Demo Sixth 1",

"Price": 1010,

"CurrencyCode": "INR"

}, {

"first": "Demo First 2",

"second": "Demo Second 2",

"third": "Demo Third 2",

"fourth": "Demo Fourth 2",

"fifth": "Demo Fifth 2",

"sixth": "Demo Sixth 2",

"Price": 10188,

"CurrencyCode": "INR",

"FI": ""

}, {

"first": "Demo First 3",

"second": "Demo Second 3",

"third": "Demo Third 3",

"fourth": "Demo Fourth 3",

"fifth": "Demo Fifth 3",

"sixth": "Demo Sixth 3",

"Price": 1016,

"FI": "R"

}, {

"first": "Demo First 4",

"second": "Demo Second 4",

"third": "Demo Third 4",

"fourth": "Demo Fourth 4",

"fifth": "Demo Fifth 4",

"sixth": "Demo Sixth 4",

"Price": 10567,

"CurrencyCode": "INR",

"FI": ""

}]

}

Result