{
"Objects": [{
"Name": "Alice Mutton",
"Supplier": "Exotic Liquids",
"Price": "75.00 EUR",
"Units": "20 PC"
}, {
"Name": "Aniseed Syrup",
"Supplier": "Grandma Kelly's Homestead",
"Price": "3.00 EUR",
"Units": "6 PC "
}, {
"Name": "Chang",
"Supplier": "New Orleans Cajun Delights",
"Price": "56.00 EUR",
"Units": "40 PC"
}
]
}
<mvc:View controllerName="navigationjson.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<App id="app">
<pages>
<Page title="Tableview">
<content>
<Table class="sapUiSizeCompact" id="table1" includeItemInSelection="true" items="{path: 'DataModel>/Objects'}" mode="MultiSelect"
selectionChange="onselectionChange">
<columns>
<Column>
<Label text="Product Name"/>
</Column>
<Column>
<Label text="Supplier"/>
</Column>
<Column>
<Label text="Price"/>
</Column>
<Column>
<Label text="Units Ordered"/>
</Column>
</columns>
<ColumnListItem press="onPress" type="Navigation">
<Text text="{DataModel>Name}"></Text>
<Text text="{DataModel>Supplier}"></Text>
<Text text="{DataModel>Price}"></Text>
<Text text="{DataModel>Units}"></Text>
</ColumnListItem>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "navigationjson",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.32.0"
},
"dataSources": {
"tableData_alias": {
"uri": "model/Object.json",
"type": "JSON"
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_hcb", "sap_bluecrystal"]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "navigationjson.view.View1",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "navigationjson.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [{
"pattern": "",
"name": "View1",
"view": "View1",
"controlAggregation": "pages"
},
{
"pattern": "View2/{selectedobj}",
"name": "View2",
"target": "View2",
"controlAggregation": "pages"
}
],
"targets": {
"View1": {
"viewName": "View1"
},
"View2": {
"viewName": "View2"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "navigationjson.i18n.i18n"
}
},
"tableData": {
"type": "sap.ui.model.json.JSONModel",
"dataSource": "tableData_alias"
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
}
"tableData": {
"type": "sap.ui.model.json.JSONModel",
"dataSource": "tableData_alias"
}
"dataSources": {
"tableData_alias": {
"uri": "model/Object.json",
"type": "JSON"
}
}
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"navigationjson/model/models",
"sap/ui/model/json/JSONModel"
], function(UIComponent, Device, models,JSONModel) {
"use strict";
return UIComponent.extend("navigationjson.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
/***Create the model and load data from the local JSON file ***/
// var oModel = new JSONModel("./model/Object.json");
// oModel.setDefaultBindingMode("OneWay");
// set the device model
this.setModel(models.createDeviceModel(), "device");
this.getRouter().initialize();
}
});
});
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function(JSONModel, Device) {
"use strict";
return {
createDeviceModel: function() {
var oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel;
}
};
});
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("navigationjson.controller.View1", {
onInit: function() {
/*this below code for get the JSON Model form Manifest.json file*/
var dataModel = this.getOwnerComponent().getModel("tableData");
this.getView().setModel(dataModel, "DataModel");
},
/*this below code for cilck on row the the page will navgate to next View*/
onPress: function(oEvent) {
var spath = oEvent.getSource().getBindingContext("DataModel").getPath();
var selectedPath = JSON.stringify(oEvent.getSource().getBindingContext("DataModel").getProperty(spath));
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("View2", {
"selectedobj": selectedPath
});
},
/*this below code for selected the row data and then navigate to next View */
onselectionChange: function() {
var contexts = this.getView().byId("table1").getSelectedContexts();
var items = contexts.map(function(c) {
return c.getObject();
});
var selectedItems = JSON.stringify(items);
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("View2", {
"selectedobj": selectedItems
});
}
});
});
<mvc:View controllerName="navigationjson.controller.View2" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<App id="app">
<pages>
<Page navButtonPress="onNavBack" showNavButton="true" title="Tableview2">
<content>
<Table class="sapUiSizeCompact" id="abc" items="{path: 'navigationModel>/Objects'}">
<columns>
<Column width="11rem">
<Label text="Product Name"/>
</Column>
<Column width="11rem">
<Label text="Supplier"/>
</Column>
<Column hAlign="End" width="6rem">
<Label text="Price"/>
</Column>
<Column hAlign="End" width="15rem">
<Label text="Units Ordered"/>
</Column>
</columns>
<ColumnListItem press="onPress" type="Navigation">
<Text text="{navigationModel>Name}"></Text>
<Text text="{navigationModel>Supplier}"></Text>
<Text text="{navigationModel>Price}"></Text>
<Text text="{navigationModel>Units}"></Text>
</ColumnListItem>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("navigationjson.controller.View2", {
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("View2").attachMatched(this._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) {
var selectedArguments = oEvent.getParameter("arguments");
var selectedRecord = JSON.parse(selectedArguments.selectedobj);
var obj = {
"Objects": selectedRecord
};
var navigationobjModel = new JSONModel();
navigationobjModel.setData(obj);
this.getView().setModel(navigationobjModel, "navigationModel");
},
onNavBack: function() {
window.history.go(-1);
}
});
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
6 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 |