I created javascript view
sap.ui.jsview("view.taskListView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf view.taskListView
*/
getControllerName : function() {
return "view.taskListView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf view.taskListView
*/
createContent : function(oController) {
var oLabel = new sap.m.Label("l1",{ text :"Weekly Tasks", textAlign:"Center", width:"100%"});
// var oList = new sap.m.List({noDataText:"No data", items:"{/modelData}"});
var oList= new sap.m.List({ // define List Control
// mode: "MultiSelect", // multi selection mode
columns : [
new sap.m.Column({ // first column
}),
new sap.m.Column({ // second column
})
],
items : [
new sap.m.ColumnListItem({ // first row
type : "Navigation",
//selected : true, // first item is selected (from ListItemBase)
cells : [
new sap.ui.core.Icon({
src : "{/iconTaskSource}",
size : "1.5em"
}),
new sap.m.Text({ // second cell related to second column definition
text : "{/taskName}"
})
]
}),
new sap.m.ColumnListItem({ // second row
type : "Navigation",
cells : [
new sap.ui.core.Icon({
src : "{/iconTaskSource}",
size : "1.5em"
}),
new sap.m.Text({ // second cell related to second column definition
text : "{/taskName}"
})
]
})
]
});
return new sap.m.Page({
title: "Title",
content: [
oLabel , oList
/*
new sap.m.Button({
text:"Go to Page2",
tap: function(){
//app.to("abc.SecondPage");
alert("Hello");
}
})
*/
]
});
}
});
and controller
sap.ui.controller("view.weeklyTasks", {
onInit: function() {
var aData2 = { modelData : [
{iconTaskSource:"icon1", taskName: "task1"},
{iconTaskSource:"icon2", taskName: "task2"}
]};
var oModel = new sap.ui.model.json.JSONModel(aData2);
this.getView().setModel(oModel2);
}
});
The binding is not working
Did I miss something ?
Try running this code snippet.
sap.ui.jsview("view.taskListView", {
getControllerName: function() {
return "view.taskListView";
},
createContent: function(oController) {
var oLabel = new sap.m.Label("l1", {
text: "Weekly Tasks",
textAlign: "Center",
width: "100%"
});
var oList = new sap.m.List({ // define List Control
columns: [
new sap.m.Column({ // first column
})
]
});
var oTemplate = new sap.m.ColumnListItem({
type: "Navigation",
cells: [
new sap.m.Text({
text: "{taskName}"
})
]
});
oList.bindItems('/modelData', oTemplate);
return new sap.m.Page({
title: "Title",
content: [
oLabel, oList
]
});
}
});
sap.ui.controller("view.taskListView", {
onInit: function() {
var aData2 = {
modelData: [
{
iconTaskSource: "icon1",
taskName: "task1"
}, {
iconTaskSource: "icon2",
taskName: "task2"
}
]
};
var oModel = new sap.ui.model.json.JSONModel(aData2);
this.getView().setModel(oModel);
}
});
var oApp = new sap.m.App();
var myView = sap.ui.view({
type: sap.ui.core.mvc.ViewType.JS,
viewName: "view.taskListView"
});
oApp.addPage(myView);
oApp.placeAt('content');
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>test</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'></script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Check this for the fixed version of your code http://jsbin.com/kequme/1/edit
You neeed to include data-sap-ui-xx-bindingSyntax="complex" in index.html file.
Look:
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
Related
I am trying to use Side Navigation component in UI5. From the below picture you can see a modal dialog, I have used side navigation to get the items in the left. when ever I select something from the list, corresponding content should be visible on the right.
Can someone please suggest me on how it can be achieved.
You will need some form of Splitter e.g. sap.ui.layout.Splitter
Take a look a this little Demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="UTF-8">
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m,sap.ui.layout" data-sap-ui-theme="sap_belize"></script>
<script>
var dialogModel = {
RateCategory_ID: {
id: "RateCategory_ID",
label: "Rate Category",
type: "MultiSelect",
values: [{
key: "ST",
value: "ST",
selected: true
}, {
key: "DT",
value: "DT",
selected: false
}]
},
Approval_Filter: {
id: "Approval_Filter",
label: "ApprovalFilter",
type: "SingleSelect",
values: [{
key: "Separate_Filter",
value: "Separate",
selected: true,
}, {
key: "Last_Approval_Filter",
value: "Last Approval",
selected: false
}]
}
};
var model = new sap.ui.model.json.JSONModel();
model.setData(dialogModel);
var oParentList = new sap.m.List({
mode: "SingleSelectMaster",
items: {
path: "/",
template: new sap.m.StandardListItem({
type: "Active",
title: "{label}"
})
},
selectionChange: function(event) {
var oBindingContext = event.getSource().getSelectedItem().getBindingContext();
oMembersList.setBindingContext(oBindingContext);
oSelectedItemsList.setBindingContext(oBindingContext);
oSelectedItemsList.getBinding("items").filter(new sap.ui.model.Filter("selected",sap.ui.model.FilterOperator.EQ,true));
}
});
oParentList.addEventDelegate({
onAfterRendering: function() {
// check if nothing is selected
if (this.getSelectedItem() === null) {
var items = this.getItems();
// check if there are items
if (items && items.length > 0) {
this.setSelectedItem(items[0], true);
}
}
this.fireSelectionChange();
}
}, oParentList);
var oMembersList = new sap.m.List({
mode: "{type}",
includeItemInSelection: true,
modeAnimationOn: false,
items: {
path: "values",
template: new sap.m.StandardListItem({
type: "Active",
title: "{value}",
selected: "{selected}"
})
},
selectionChange: function(event) {
var oBindingContext = event.getSource().getBindingContext();
oSelectedItemsList.setBindingContext(oBindingContext);
oSelectedItemsList.getBinding("items").filter(new sap.ui.model.Filter("selected",sap.ui.model.FilterOperator.EQ,true));
}
});
var oSelectedItemsList = new sap.m.List({
mode: "Delete",
modeAnimationOn: false,
visible: {
path: "type",
formatter: function(type) {
return type === "MultiSelect";
}
},
items: {
path: "values",
template: new sap.m.StandardListItem({
title: "{value}",
})
},
delete: function(oEvent) {
model.setProperty(oEvent.getParameters().listItem.getBindingContextPath() + "/selected", false);
oMembersList.fireSelectionChange();
}
});
var variablesVBox = new sap.m.VBox({
items: [
new sap.m.Label({
text: "Variables"
}),
new sap.m.Label({
text: ""
}),
oParentList
],
layoutData: new sap.ui.layout.SplitterLayoutData({
resizable: false
})
});
var membersVBox = new sap.m.VBox({
items: [
new sap.m.Label({
text: "Available Members"
}),
new sap.m.Label({text: ""}),
oMembersList
],
layoutData: new sap.ui.layout.SplitterLayoutData({
resizable: false
})
});
var selectedMembersVBox = new sap.m.VBox({
items: [
new sap.m.Label({
text: "Selected Members"
}),
new sap.m.Label({text: ""}),
oSelectedItemsList
],
layoutData: new sap.ui.layout.SplitterLayoutData({
resizable: false
})
});
var splitter = new sap.ui.layout.Splitter({
contentAreas: [variablesVBox, membersVBox, selectedMembersVBox]
});
splitter.setModel(model);
var okButton = new sap.m.Button({
text: "OK",
press: function(event) {
oDialog.close();
}
});
var cancelButton = new sap.m.Button({
text: "Cancel",
press: function(event) {
oDialog.close();
}
});
var oDialog = new sap.m.Dialog({
title: "Global Variables",
content: [splitter],
buttons: [okButton, cancelButton],
contentWidth: "70%",
contentHeight: "70%"
});
var oButton = new sap.m.Button({
text: "Open dialog",
press: function() {
oDialog.open();
}
}).placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
sap.tnt.SideNavigation has to be placed inside sap.tnt.ToolPage in order to work properly. But the ToolPage control is meant to take the full width and height of the page, not only a part of it, like it would if placed inside Dialog. Therefore using this controls to achieve what you need is not possible.
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 a requirement wherein I have to populate columns and rows dynamically from oData. For test purpose I created the following JSON files for columns and rows.
column.json
{
"Columns": [
{ "column": "col1" },
{ "column": "col2" },
{ "column": "col3" }
]
}
row.json
{
"Rows": [
{ "col1": "abc",
"col2": "def",
"col3": "ghi"
},
{ "col1": "jkl",
"col2": "mno",
"col3": "pqr"
}
]
}
Here is my view
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sam.test" xmlns:html="http://www.w3.org/1999/xhtml">
<Table id="ID"
columns="{path: 'Column>/Columns', factory: '.populateColumns'}"
items="{path: 'Row>/Rows', factory: '.populateItems'}">
</Table></core:View>
Note that in manifest file "Column" points to column.json and "Row" points to row.json file.
Here is my corresponding controller -
sap.ui.controller("sam.test", {
// onInit: function() {
// },
// onBeforeRendering: function() {
//
// },
// onAfterRendering: function() {
//
// },
// onExit: function() {
//
// }
populateItems: function(sId, oContext) {
var row = new sap.m.ColumnListItem(sId, {
type: "Active",
cell: [
new Text({
text: "{Column>col1}"
}),
new Text({
text: "{Column>col2}"
}),
new Text({
text: "{Column>col3}"
})
]
});
return row;
},
populateColumns: function(sId, oContext) {
var sColumnId = oContext.getObject().column;
return new sap.ui.table.Column({
id: sColumnId,
label: sColumnId,
template: sColumnId,
sortProperty: sColumnId,
filterProperty: sColumnId
});
}
});
This however is not working. It renders table with no column headers and no rows. When I bind rows directly to items aggregation of Table and also provide columns aggregation with same value it works.
Am I missing something? I am having tough time figuring this out. Any pointers will be appreciated
Thanks!
3 Mistakes which I found:
Wrong type of Column: new sap.ui.table.Column- The correct column type should be sap.m.Column since this is a sap.m.Table.
Wrong name of aggregation used for sap.m.ColumnListItem: The correct aggregation is cells and not cell ( typo).
Wrong model is bound to ColumnListItem: It should be Row>col1 and not Column>col1 as Row model stores the data.
Lets correct these mistakes and below is the working code:
populateItems: function(sId, oContext) {
var row = new sap.m.ColumnListItem(sId, {
type: "Active",
cells: [
new sap.m.Text({
text: "{Row>col1}"
}),
new sap.m.Text({
text: "{Row>col2}"
}),
new sap.m.Text({
text: "{Row>col3}"
})
]
});
return row;
},
populateColumns: function(sId, oContext) {
var sColumnId = oContext.getObject().column;
return new sap.m.Column({
header: new sap.m.Text({
text:'{Column>column}'
})
});
},
Let me know if this works.
View1.Controller.js
onClickRUSSIA: function() {
var dialog = new Dialog({
title: 'Default Message',`enter code here`
type: 'Message',
content: new Text({
text: 'Country : RUSSIA \n Contenent : ASIA \n language:RUSSIAN.'
}),
beginButton: new Button({
text: 'OK',
press: function() {
dialog.close();
}
}),
endButton: new Button({
text: 'More Info',
press: function() {
//this.getRouter().navTo("mohan");
var router = sap.ui.core.UIComponent.getRouterFor();
router.navTo("View2");
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
},
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"Test1/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("Test1.Component", {
metadata: {
//rootView: "test1.webapp.view.App",
manifest: "json",
routing: {
config: {
viewType: "XML",
viewPath: "test1.webapp.view",
controlId: "rootControl",
controlAggregation: "pages",
//routerClass: "Test1.controller",
transition: "slide"
},
routes: [
{
pattern: "",
name: "default",
view: "view1"
}, {
pattern: "mohan",
name: "view2",
View: "view2"
}
]
// targets: {
// page1: {
// viewName: "View1",
// viewLevel: 0
// },
// page2: {
// viewName: "View2",
// viewLevel: 1
// }
// }
}
},
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
this._router = this.getRouter();
// set the device model
this.setModel(models.createDeviceModel(), "device");
//initlialize the router
this._routeHandler = new sap.m.routing.RouteMatchedHandler(this._router);
this._router.initialize();
}
});
});
You will have to get the router for your controller/view. As this is not your controller inside endButton.press(), you have to use a helper variable that.
You have to give Router.navTo() the name of the route to navigate to. So it has to be view2 instead of View2.
var that = this;
var dialog = new Dialog({
...
endButton: new Button({
text: 'More Info',
press: function() {
var router = sap.ui.core.UIComponent.getRouterFor(that);
router.navTo("view2");
}
}),
...
this.getOwnerComponent().getTargets().display("page1");
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