I'm trying to add dynamic table in sapui5 by using sap.ui.table.Table. But in this example using HTML view, but I want to XML for my view.
What is the alternative way to place the table in XML by using this way
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 table example with local JSON model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAPUI5 Dynamic Table</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.table'></script>
<script>
var columnData = [{
columnName: "firstName"
}, {
columnName: "lastName"
}, {
columnName: "department"
}];
var rowData = [{
firstName: "Sachin",
lastName: "Tendulkar",
department: "Cricket"
}, {
firstName: "Lionel",
lastName: "Messi",
department: "Football"
}, {
firstName: "Mohan",
lastName: "Lal",
department: "Film"
}];
var oTable = new sap.ui.table.Table({
visibleRowCount: 3
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().columnName;
return new sap.ui.table.Column({
label: columnName,
template: columnName,
});
});
oTable.bindRows("/rows");
page = new sap.m.Page({content:[
oTable
]});
app = new sap.m.App();
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
My XML file will look like
<mvc:View
controllerName="sap.ui.demo.toolpageapp.controller.Statistics"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page showHeader="false">
<content>
<!-- want to place the table here -->
</content>
</Page>
You can achieve it using bindColumns() and bindRows()
XML view
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:ui="sap.ui.table"
controllerName="XXXX.Main" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Dynamic Binding" class="sapUiContentPadding">
<content>
<ui:Table id="reOrderTable"></ui:Table>
</content>
</Page>
</core:View>
Controller.js
onInit: function() {
var oModel = this.getTableData(this);
this.createDynTable(this, oModel);
}
/**
* Get Data
*/
getTableData: function(that) {
var columnData = [
{ "colId": "Amt", "colName": "Amount", "colVisibility": true, "colPosition": 0 },
{ "colId": "Qty", "colName": "Quantity", "colVisibility": true, "colPosition": 1 },
{ "colId": "Unt", "colName": "Unit", "colVisibility": true, "colPosition": 2 },
{ "colId": "OPA", "colName": "OpenPOAmount", "colVisibility": true, "colPosition": 3 },
{ "colId": "OPQ", "colName": "OpenPOQuantity", "colVisibility": true, "colPosition": 4 }
];
var rowData = [{
"Amount": "200",
"Quantity": "RF",
"Unit": "CV",
"OpenPOAmount": "5988",
"OpenPOQuantity": "YY",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 10,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
},
{
"Amount": "80",
"Quantity": "UG",
"Unit": "RT",
"OpenPOAmount": "878",
"OpenPOQuantity": "RF",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 11,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
},
{
"Amount": "789",
"Quantity": "GV",
"Unit": "ED",
"OpenPOAmount": "8989",
"OpenPOQuantity": "FGG",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 12,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
return oModel;
},
/**
* Creating Dynamic table
*/
createDynTable: function(that, oModel) {
var oTable = this.byId("reOrderTable");
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().colName;
return new sap.ui.table.Column({
label: columnName,
template: columnName,
});
});
oTable.bindRows("/rows");
}
Related
I am trying to get Fusion Grid (https://www.fusioncharts.com/fusiongrid )to work from the example in the online docs. However, it does not parse the HTML. It just prints the unparsed HTML in the column. The grid does not parse the HTML. You can see this problem in F-Series data (last column) in the example below, as well as using a column formatter, see myFunction2. None of the online docs have complete work. Is this a bug or am I missing something?
<!doctype html>
<html>
<head>
<!-- FusionGrid JS files -->
<script src="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js"></script>
<link rel="stylesheet" href="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css">
<script type="text/javascript">
var schema = [
{
name: 'Rank',
type: 'number',
},
{
name: 'Model'
},
{
name: 'Make'
},
{
name: 'Units Sold',
},
{
name: 'Assembly Location'
},
{
name: 'Link',
// type: 'html'
}
];
var data = [
[1, "F-Series", "Ford", 896526, "Claycomo, Mo.", "<a href='http://www.google.com>Edit</a>'"],
[2, "Pickup", "Ram", 633694, "Warren, Mich."],
[3, "Silverado", "Chevrolet", 575600, "Springfield, Ohio"],
[4, "RAV4", "Toyota", 448071, "Georgetown, Ky."],
[5, "CR-V", "Honda", 384168, "Greensburg, Ind."],
[6, "Rogue", "Nissan", 350447, "Smyrna, Tenn."],
[7, "Equinox", "Chevrolet", 346048, "Arlington, Tex."],
[8, "Camry", "Toyota", 336978, "Georgetown, Ky."],
[9, "Civic", "Honda", 325650, "Greensburg, Ind."],
[10, "Corolla", "Toyota", 304850, "Blue Springs, Miss."],
[11, "Accord", "Honda", 267567, "Marysville, Ohio"],
[12, "Tacoma", "Toyota", 248801, "San Antonio, Tex."],
[13, "Grand Cherokee", "Jeep", 242969, "Detroit, Mich."],
[14, "Escape", "Ford", 241338, "Louisville, Ky."],
[15, "Highlander", "Toyota", 239438, "Princeton, Ind."],
[16, "Sierra", "GMC", 232325, "Flint, Mich."],
[17, "Wrangler", "Jeep", 228032, "Toledo, Ohio"],
[18, "Altima", "Nissan", 209183, "Smyrna, Tenn."],
[19, "Cherokee", "Jeep", 191397, "Belvidere, Ill."],
[20, "Sentra", "Nissan", 184618, "Canton, Miss."],
];
function myFunction2(params) {
console.log(params.cellValue);
let value = params.cellValue;
let bgColor = '#ff0000';
if (params.cellValue > 346048 && params.cellValue <= 575600) {
bgColor = '#ffff00'
} else if (params.cellValue > 575601) {
bgColor = '#00ff00'
}
//return '{background-color: ' + bgColor + '}';
return ('<span style="background-color: "' + bgColor + '/>' + value + '</span>');
}
function render() {
// Getting the grid-container
var container = document.getElementById('grid-container');
// Passing data through DataStore
var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {enableIndex: false });
var grid = new FusionGrid(container, dataTable,
{
defaultColumnOptions: {
searchable: true,
filter: {
enable: true,
type: "conditional"
},
},
columns: [
{
field: 'Rank' ,
},
{
field: 'Model' ,
},
{
field: 'Make' ,
},
{
field: 'Units Sold',
type: 'number',
formatter: myFunction2,
},
{
field: 'Assembly Location',
},
{
field: 'Link',
// type: 'html'
}
],
});
// Render the grid
grid.render();
}
</script>
</head>
<body onload="render()">
<h1>Hello from FusionGrid!</h1>
<div id="grid-container" style="width: 100%; height: 450px;"></div>
</body>
</html>
I would expect that <span style="background-color: would be evaluated to actual HTML output, not unprocessed HTML
Thanks to Cesar for finding a solution: use a template with HTML type, not a formatter, as was incorrectly shown in the online documentation:
{
field: 'Units Sold',
type: 'html',
template: myFunction2,
},
use type html and template
{
field: 'Units Sold',
type: 'html',
template: myFunction2
}
In a table, there is a drop-down for each row.
And every row has unique ID and based on it the values should be populated on UI
ID Country
1 India/Malasia/UK
2 Paris/spain/USA
3 Canada/Chile/China
So, I am trying to send the path of ObjectID.
The below code doesn't work. Not sure how to achieve this.
oEditTemplate = new Select({
forceSelection: false,
selectedKey: sPath,
items: {
path: {
path: "tempModel>ObjectId",
formatter: this._editableFormatter.bind(this, sName)
},
templateShareable: false,
template: new ListItem({
key: "{tempModel>value}",
text: "{tempModel>value}"
})
}
});
You can achieve it by using custom data and onAfterRendering. You can refer this JSBIN example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.table,sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
var ITEMS = {
"1": ["India", "Malasia", "UK"],
"2": ["Paris", "Spain", "USA"],
"3": ["Canada", "Chile", "China"]
};
sap.m.Select.extend("CustomSelect", {
metadata: {
properties: {
countryId: "string"
}
},
renderer: {}
});
var oSelect = new sap.m.Select({
customData: {
key: "countryId",
value: "{ID}"
}
});
oSelect.addEventDelegate({
onAfterRendering: function(oEvent) {
var src = oEvent.srcControl;
var countryId = src.data("countryId");
if (!!countryId && src.getItems().length === 0) {
ITEMS[countryId].forEach(function(i) {
src.addItem(new sap.ui.core.Item({
text: i,
value: i
}));
});
}
}
});
var oTable = new sap.ui.table.Table({
rows: '{/d/results}',
columns: [
new sap.ui.table.Column({
label: new sap.m.Label({text: "ID"}),
template: new sap.m.Text({text:"{ID}"}),
filterProperty: 'District'
}),
new sap.ui.table.Column({
label: new sap.m.Label({text: "Country"}),
template: oSelect
})]
});
var model = new sap.ui.model.json.JSONModel({
d: {
results: [
{ ID: "1"},
{ ID: "2"}
]
}
});
oTable.setModel(model);
oTable.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody sapUiSizeCompact">
</body>
</html>
I have an ajax json response and I have managed to bind the values into columns but I need to bind the values into rows.
I tried using oTable.bindRows("/"), but this binds the values into columns.
As a sample array I have : ( this is a response from a service )
Info [3]
[0] Object
name: "name",
surname: "surn"
[1] Object
address: "address",
phone: "22",
key: "val"
key2: "val2"
[2] Object
info: "information",
system: "sys",
data:"data here"
And I need a table( or a list ):
Key Value
name name
surname surn
phone 22
system sys
info information
You basically have to convert your Array. Please check below running example.
oData.forEach(function(data){
var keys = Object.keys(data);
keys.forEach(function(key){
oData_new.push({'key':key,'value':data[key]});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m"></script>
<script>
var oData = [{
name: "name",
surname: "surn"
}, {
address: "address",
phone: "22",
key: "val",
key2: "val2"
},
{
info: "information",
system: "sys",
data: "data here"
}
];
var oData_new = [];
oData.forEach(function(data) {
var keys = Object.keys(data);
keys.forEach(function(key) {
oData_new.push({
'key': key,
'value': data[key]
});
});
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData_new);
var aColumns = [
new sap.m.Column({
header: new sap.m.Label({
text: "Key"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Value"
})
})
];
var oTable = new sap.m.Table({
columns: aColumns
});
oTable.setModel(oModel);
oTable.bindAggregation("items", {
path: "/",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: {
path: 'key'
}
}),
new sap.m.Text({
text: {
path: 'value',
}
})
]
})
});
oTable.placeAt('content');
</script>
<body id="content" class="sapUiBody">
</body>
</html>
On my highchart how can I set the Y AXIS (dataItem) so that it will populate accordingly to amount of times a country appears in my json data. So in my snippet it should show GB as 66% instead of two 33%?
Also what would be a good way to import my json data if I was to keep in in a separate file. Was thinking of keeping it in a separate file called (json_data.json).
Please help.
$(document).ready(function () {
var json=
[
{
"Hot": false,
"Country": "NETHERLANDS",
"DomCountry": "NA",
"DomPortCode": "*PI",
"Code": "RTM",
"Origin": "NL",
"CodeDest": "NA",
},
{
"Hot": true,
"Country": "GREAT BRITAIN",
"DomCountry": "POLAND",
"DomPortCode": "*PI",
"Code": "CAL",
"Origin": "GB",
"CodeDest": "PL",
},
{
"Hot": true,
"Country": "GREAT BRITAIN",
"DomCountry": "POLAND",
"DomPortCode": "*PI",
"Code": "CAL",
"Origin": "GB",
"CodeDest": "PL",
}
];
var listData=json;
console.log(listData);
var dataList = []
var dataItem;
for (var i = 0; i < listData.length; i++) {
dataItem={
name: listData[i].Country,
y: 1
}
dataList.push(dataItem); //dataItem push
}
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'SHIPPING INFO'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: "Try",
colorByPoint: true,
data: dataList
}]
});
});
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<title>Highcharts Examples</title>
</head>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
You need to loop through your data and count the occurrences.
Then you need to calculate the percentages, and format the data in a way that Highcharts can use.
You can loop through it and build your first set up something like this:
var countryCounts = {};
var countryNames = [];
var totalCount = 0;
//loop through the object
$.each(json, function(i, node) {
//get the country name
var countryName = node["Country"];
//build array of unique country names
if($.inArray(countryName, countryNames) == -1) {
countryNames.push(countryName);
}
//add or increment a count for the country name
if(typeof countryCounts[countryName] == 'undefined') {
countryCounts[countryName] = 1;
}
else {
countryCounts[countryName]++;
}
//increment the total count so we can calculate %
totalCount++;
});
That gives you what you need to calculate from.
Then you can loop through your country names and build a data array:
var data = [];
//loop through unique countries to build data for chart
$.each(countryNames, function(i, countryName) {
data.push({
name: countryName,
y: Math.round((countryCounts[countryName] / totalCount) * 100)
});
});
This keeps it dynamic so that you can have any number of countries.
Then you just add your data array to your chart:
http://jsfiddle.net/jlbriggs/e2qq2j2L/
I am trying to create a splitapp application using routing in ui5. My first page is a login page. Then the next page should be a splitapp which I am not able to do.
I am not able to navigate to the splitapp from login page using routing. My routing url is getting changed but the splitapp view is not getting loaded.
enter code here
// component.js
jQuery.sap.declare("sap.demo.cart.Component");
sap.ui.core.UIComponent.extend("sap.demo.cart.Component",{
metadata:{
routing:{
config:{
viewType:"JS",
viewPath:"shopcart",
targetAggregation:"pages",
clearTarget:false
},
routes:[
{
pattern: "",
name: "login",
view: "login",
viewType:"JS",
viewPath:"shopcart",
targetControl:"topMaster"
},
{
pattern: "splitApp",
name:"app",
view:"app",
targetControl:"topMaster",
clearTarget:false,
subroutes:[{
pattern: "master",
name:"master",
view:"master",
targetAggregation:"masterPages",
targetControl:"splitApp"
preservePageInSplitContainer:true
subroutes:[{
pattern:"welcome",
name:"welcome",
view:"welcome",
targetAggregation:"detailPages"
}]
}]
}
]
}
},
init: function(){
jQuery.sap.require("sap.ui.core.routing.HashChanger");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
sap.ui.core.UIComponent.prototype.init.apply(this,arguments);
this._router = this.getRouter();
this._routerHandler = new sap.m.routing.RouteMatchedHandler(this._router);
this._router.initialize();
},
createContent:function(){
var oView = sap.ui.view({
id:"tmaster",
viewName:"shopcart.topMaster",
type:"JS",
viewData:{component: this}
});
return oView;
}
});
/*login.view*/
sap.ui.jsview("shopcart.login", {
getControllerName : function() {
return "shopcart.login";
},
createContent : function(oController) {
var opanel = new sap.m.Panel(
{
width:"100%",
height:"100%",
expandable : false,
expanded: true,
content:[
new sap.m.Panel("ologin",{
headerText:"Login",
width:"400px",
height:"300px",
content:[
new sap.m.Input("uname",{ tooltip:"Enter Username",placeholder : "Username"}),
new sap.m.Input("pwd",{ type: sap.m.InputType.Password,placeholder : "Password"}),
new sap.m.Link("fgt",{text:"Forgot Password?", press:oController.onForgot}),
new sap.m.Button("log",{text:"Login", press:[oController.onLogin, oController]}),
new sap.m.Button("clr",{text:"Clear", press:oController.onClear})
]
})
]
}).addStyleClass("logContainer");
return sap.m.Page({
content:[opanel]
});
}
});
/*login controller*/
sap.ui.controller("shopcart.login", {
onInit: function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
},
onLogin: function(){
var uname = sap.ui.getCore().byId("uname").getValue();
var pwd = sap.ui.getCore().byId("pwd").getValue();
if(uname=="" || pwd=="")
{
// openDialog(sap.ui.core.ValueState.Error,"Login Details","Please provide both the username and password details to login");
}
else{
// app.to("idhome2");
this.router.navTo("app");
}
},
onClear:function(){
sap.ui.getCore().byId("uname").setValue("");
sap.ui.getCore().byId("pwd").setValue("");
},
onForgot:function(){
openDialog(sap.ui.core.ValueState.None,"Forgot Password","Resetting is still under construction");
}
});
/*topmaster.view*/
sap.ui.jsview("shopcart.topMaster", {
createContent : function(oController) {
return new sap.m.App("topMaster",{
});
}
});
/*app.view*/
sap.ui.jsview("shopcart.app", {
getControllerName : function() {
return "shopcart.app";
},
createContent : function(oController) {
this.setDisplayBlock(true);
return new sap.m.SplitApp("splitApp");
}
});
/*master.view*/
sap.ui.jsview("shopcart.master", {
getControllerName : function() {
return "shopcart.master";
},
createContent : function(oController) {
var olist = new sap.m.List({
mode:sap.m.ListMode.SingleSelect,
items : [ new sap.m.StandardListItem({
title : "Employee Master"
}), new sap.m.StandardListItem({
title : "Product Master"
}),new sap.m.StandardListItem({
title : "Category Master"
}),new sap.m.StandardListItem({
title : "Order Master"
}),new sap.m.StandardListItem({
title : "Operation Master"
}) ]
});
return olist;
}
});
/*welcome.view */
sap.ui.jsview("shopcart.welcome", {
getControllerName : function() {
return "shopcart.welcome";
},
createContent : function(oController) {
return new sap.m.Text({text:"Welcome to Oncall Support Maintenance Fiori Application",design:sap.ui.commons.TextViewDesign.H5});
}
});
Have a look at this code. Pay attention to the TopMaster controller and to the routing config in the Component.
jQuery.sap.require("sap.m.MessageBox");
jQuery.sap.declare("shopcart.Component");
sap.ui.core.UIComponent.extend(
"shopcart.Component",
{
metadata:{
rootView : {
viewName: "shopcart.view.TopMaster",
type: sap.ui.core.mvc.ViewType.JS
},
routing:{
config:{
viewType: "JS",
viewPath: "shopcart.view",
targetControl: "topMaster",
targetAggregation: "pages",
clearTarget: false
},
routes: [
{
pattern: "",
name: "login",
view: "Login"
},
{
pattern: "splitApp",
name: "app",
view: "App",
subroutes:[
{
pattern: "master",
name: "master",
view: "Master",
targetAggregation: "masterPages",
targetControl: "splitApp",
preservePageInSplitContainer: true,
subroutes: [
{
pattern: "welcome",
name: "welcome",
view: "Welcome",
targetControl: "splitApp",
targetAggregation: "detailPages"
}
]
}
]
}
]
}
},
init: function(){
sap.ui.core.UIComponent.prototype.init.apply(
this,
arguments
);
var oRouter = this.getRouter();
oRouter.initialize();
}
}
);
// <-- TopMaster.view.js -->
sap.ui.jsview(
"shopcart.view.TopMaster",
{
getControllerName : function() {
return "shopcart.controller.TopMaster";
},
createContent : function(oController) {
return new sap.m.App(
"topMaster"
);
}
}
);
// <-- TopMaster.controller.js -->
sap.ui.controller(
"shopcart.controller.TopMaster",
{
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.attachRouteMatched(this.onRouteMatched, this);
},
onRouteMatched: function(oEvent) {
var oParameters = oEvent.getParameters();
var oView = this.getView();
var oApp = sap.ui.getCore().byId("topMaster");
if (oApp.getCurrentPage().sId !== oParameters.view.sId) {
oApp.to(oParameters.view.sId);
}
}
}
);
// <-- login.view -->
sap.ui.jsview(
"shopcart.view.Login",
{
getControllerName : function() {
return "shopcart.controller.Login";
},
createContent : function(oController) {
return new sap.m.Page(
{
title: "Login",
content: [
new sap.m.Panel(
{
width:"100%",
height:"100%",
expandable : false,
expanded: true,
content:[
new sap.m.Panel(
"ologin",
{
headerText:"Login",
width:"400px",
height:"300px",
content:[
new sap.m.Input(
this.createId("uname"),
{
tooltip: "Enter Username",
placeholder: "Username"
}
),
new sap.m.Input(
this.createId("pwd"),
{
type: sap.m.InputType.Password,
placeholder: "Password"
}
),
new sap.m.Link(
this.createId("fgt"),
{
text:"Forgot Password?",
press: oController.onForgot
}
),
new sap.m.Button(
this.createId("log"),
{
text:"Login",
press:[
oController.onLogin,
oController
]
}
),
new sap.m.Button(
this.createId("clr"),
{
text:"Clear",
press:oController.onClear
}
)
]
}
)
]
}
)
.addStyleClass("logContainer")
]
}
);
}
}
);
// <-- Login.controller.js -->
sap.ui.controller(
"shopcart.controller.Login",
{
onInit: function() {
},
onLogin: function(){
var oView = this.getView();
var sUsername = oView.byId("uname").getValue();
var sPassword = oView.byId("pwd").getValue();
if( sUsername === "" || sPassword === ""){
sap.m.MessageBox.alert(
"Please provide your login details",
{
title: "Error"
}
);
}
else{
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("welcome");
}
},
onClear:function(){
var oView = this.getView();
oView.byId("uname").setValue(null);
oView.byId("pwd").setValue(null);
},
onForgot:function(){
sap.m.MessageBox.alert(
"Resetting is still under construction",
{
title: "Error"
}
);
}
}
);
// <-- App.view.js -->
sap.ui.jsview(
"shopcart.view.App",
{
getControllerName : function() {
return "shopcart.controller.App";
},
createContent : function(oController) {
this.setDisplayBlock(true);
return new sap.m.SplitApp(
"splitApp"
);
}
}
);
// <-- App.controller.js -->
sap.ui.controller(
"shopcart.controller.App",
{
onInit: function() {
}
}
);
// <-- Master.view.js -->
sap.ui.jsview(
"shopcart.view.Master",
{
getControllerName : function() {
return "shopcart.controller.Master";
},
createContent : function(oController) {
return new sap.m.List(
{
mode:sap.m.ListMode.SingleSelect,
items : [
new sap.m.StandardListItem(
{
title : "Employee Master"
}
),
new sap.m.StandardListItem(
{
title : "Product Master"
}
),
new sap.m.StandardListItem(
{
title : "Category Master"
}
),
new sap.m.StandardListItem(
{
title : "Order Master"
}
),
new sap.m.StandardListItem(
{
title : "Operation Master"
}
)
]
}
);
}
}
);
// <-- Master.controller.js -->
sap.ui.controller(
"shopcart.controller.Master",
{
onInit: function() {
}
}
);
// <-- Welcome.view.js -->
sap.ui.jsview(
"shopcart.view.Welcome",
{
getControllerName : function() {
return "shopcart.controller.Welcome";
},
createContent : function(oController) {
return new sap.m.Text(
{
text: "Welcome to Oncall Support Maintenance Fiori Application"
}
);
}
}
);
// <-- Welcome.controller.js -->
sap.ui.controller(
"shopcart.controller.Welcome",
{
onInit: function() {
}
}
);
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link href="css/index.css" rel="stylesheet"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
function Login(){
**window.location.assign("dashboard.html#/dashboard");**
}
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content">
<div id="content-center-alignment">
<div class="inner">
<img alt="" src="">
<input id="txtUsername" type="text" placeholder="Enter user name"></input>
<br/>
<input id="txtPassword" type="password" placeholder="Enter your password"></input>
<br/>
<button id="btnLogin" type="submit" onClick="Login();" class="button">Login</button>
</div>
</div>
</div>
</body>
</html>
just add **stared line in your index.html by doing this you can able to redirect to another view from index.html