How to change model data of a view from another view? - sapui5

viewtest is bound to a JSONModel. View2 is bound to the same JSONModel by creating a reference to viewtest and setting the model to viewtest.getModel().
What I'm trying to do is modify the shared model data in View3 by clicking a button so that the texts in textfield and textview will change automatically. However, the texts in textfield and textview remain "This is a text". What's the problem?
The index.html file:
and the viewtest.view.js file:
sap.ui.jsview("viewtest.viewtest", {
getControllerName : function() {
return "viewtest.viewtest";
},
createContent : function(oController) {
this.setModel(new sap.ui.model.json.JSONModel());
var oData = {
text: "this is a text"
};
this.getModel().setData(oData);
var oTextField = new sap.ui.commons.TextField({value: "{/text}"});
return [oTextField];
}
});
View2.view.js file:
sap.ui.jsview("viewtest.View2", {
getControllerName : function() {
return "viewtest.View2";
},
createContent : function(oController) {
var viewtest = sap.ui.view({viewName: "viewtest.viewtest", type:sap.ui.core.mvc.ViewType.JS});
this.setModel(viewtest.getModel());
this.getModel().setData(viewtest.getModel().getData());
var oTextView = new sap.ui.commons.TextView({text: "{/text}"});
return [oTextView];
}
});
View3.view.js file:
sap.ui.jsview("viewtest.View3", {
getControllerName : function() {
return "viewtest.View3";
},
createContent : function(oController) {
var oButton = new sap.ui.commons.Button({text:"click", press: func});
function func() {
var oView = new sap.ui.view({viewName:"viewtest.viewtest", type:sap.ui.core.mvc.ViewType.JS});
oView.getModel().setData({text:"hello world"}, true);
}
return [oButton];
}
});

Just a suggestion. Maybe it is worth to give in your .html file id to every view, and then in view3 update and set model to each one of the views by calling them by id?
Like,
in index.html:
var view1 = new sap.ui.view({id:"view1", viewName:"viewtest.View1", type:sap.ui.core.mvc.ViewType.JS});
and then in view3:
function func() {
var oView = sap.ui.getCore().byId("view1");
oView.getModel().setData({text:"hello world"}, true);
oView.getModel().refresh(); //if setting new model won't update the views
}
Or, if you use the same model in all your views, set model not to each view separately, but to the core:
viewtest.view.js file:
sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel());
thus, you don't need to set model in view2.

Related

Title and menu items of sap.ui.unified.Menu control

I am trying to add title to a sap.ui.unified.Menu control and it displays only the title; other menu items after this are not displayed.
How to bind the menu items to this, and how to get same view with other data without new menu element being created?
I want this :
I am getting :
My code:
sap.ui.define([], function () {
var dynamicMenu= new sap.ui.unified.Menu.extend("com.google.copa.common.CustomMenu", {
metadata: {
library: "com.google.copa.common",
properties: {
title: {
type: "string" } } },
init : function () { },
renderer:function(oRm,oControl){
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("myCustTitle");
oRm.writeClasses();
oRm.write(">");
oRm.write("<h2>"+oControl.getTitle()+"</h2>");
oRm.write("</div>");
oRm.write(oControl); },
setTitle:function(val){
this.setProperty("title",val,true);
return this; } });
return dynamicMenu; })
This is how I am calling my custom Control:
var menu=new CustomMenu({ title:"MyCustom Title" });
var oItemTemplate = new sap.ui.unified.MenuItem({
text: "{description}",press:e=>alert("test") });
menu.bindAggregation("items", {
path: "/plants",
template: oItemTemplate });
thisOfBtn.getView().addDependent(menu);
menu.setModel(that.getModel());
// const eDock = sap.ui.core.Popup.Dock;
// unable to align position of popup
// menu.openBy(oButton.getFocusDomRef(),true, "EndTop", "EndBottom","0 -2");
menu.open(true,oButton.getFocusDomRef(),"BeginTop", "BeginBottom", oButton.getParent().getDomRef());
Try calling oRm.renderControl(oControl) instead of oRm.write(oControl)

Not able to initilize the JS view in openui5

Not able to initilize the below JS view in index page. Could you please help me?
I m getting this error msg "Uncaught (in promise) TypeError: t.createContent is not a function"
Plunker link:
https://plnkr.co/edit/7v0CN93aDrAOY9WqU269?p=preview
app.view.js:
sap.ui.jsview("app",{
getControllerName:function(){
return "app";
},
createContent:function(oContoller){
var oButton = new sap.m.Button(this.createId("helloButton"),{
text:"Click Me"
});
return oButton;
}
});
change the view code like this
sap.ui.jsview("view.js.app", {
getControllerName: function() {
return "view.js.app";
},
createContent: function(oContoller) {
var oButton = new sap.m.Button(this.createId("helloButton"), {
text: "Click Me"
});
return oButton;
}
});
Also add a controller file app.controller.js and paste below code.
sap.ui.controller("view.js.app", {
onInit: function() {
}
});
You are specifying the resourceroots as "view.js" in the index file.
So while instantiating use below code
var view = sap.ui.view({
id:"idApp1",
type:sap.ui.core.mvc.ViewType.JS,
viewName:"view.js.app"
});
And in the view add these changes,
sap.ui.jsview("view.js.app",{
getControllerName:function(){
return "view.js.app";
},
createContent:function(oContoller){
var oButton = new sap.m.Button(this.createId("helloButton"),{
text:"Click Me"
});
return oButton;
}
});
And add one controller file named app as below,
sap.ui.define(["sap/ui/core/mvc/Controller"],
function (Controller) {
"use strict";
return Controller.extend("view.js.app", {
});
});
Here is the working link.

Unable to use page objects in my spec file in protractor

//This is my AngularPage.cs page object file
var AngularPage= function()
{
var nameInput= element(by.model('yourName'));
var greeting = element(by.binding('yourName'));
this.get=function()
{
browser.get('http://www.angularjs.org');
};
this.setName= function(name)
{
nameInput.sendKeys(name);
};
this.getGreeting= function()
{
return greeting.getText();`
};
};
module.exports = new AngularPage();
//This is my AngularHome_spec.js file
var angularPage = require('./AngularPage.js');
describe('angularjs homepage',function()
{
var angular_page;
beforeEach(function()
{
angular_page= new AngularPage();
});
it('greetings for new user', function()
{
// var angular_page= new AngularPage();
angular_page.get();
angular_page.setName('Rahul');
expect(angular_page.getGreeting()).toEqual('Hello Rahul!');
}
);
}
);
//I am unable to use page objects in my spec file as it is throwing an error
:AngularPage is not defined
In your code, object has been created twice. First time on page "AngularPage.js" and second time on spec "AngularHome_spec.js" level.
Do following on page "AngularHome_spec.js"
module.exports = AngularPage;
Change the
var AngularPage = require('./AngularPage.js');//Capital the 'A'

SAPUI5 - Content is not displayed

experts,
I've just started to study sapui5, and right now the thing that bothers me is that I can't get a dropdown menu to be shown, while a button I create together with the drop down menu is displayed.
Here is my view:
createContent : function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id : this.createId("MyButton"),
text : "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
$.ajax({
url : "GetEmployees",
type : "post",
success : function(response) {
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee"+index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: "+oItem);
});
alert(oEmployeeSelection);
// Attach the DropdownBox to the page
aControls.push(oEmployeeSelection);
}, // end success call handler
error: function(){
alert("error while building employee select menu");
}
});// end Employee selection
return aControls;
}// end createContent
I do get data from the server, alerts inside the success function shoot, but I see only the button on screen.
What an I doing wrong?
Thanks.
The root cause is that you add the Dropdown box in the service callback method and the aControls is already returned with only oButton inserted before the service callback.
Adjust the code as following will do:
createContent: function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id: this.createId("MyButton"),
text: "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
//Add dropdown box before your service call
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
aControls.push(oEmployeeSelection);
$.ajax({
url: "GetEmployees",
type: "post",
success: function(response) {
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee" + index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: " + oItem);
});
alert(oEmployeeSelection);
}, // end success call handler
error: function() {
alert("error while building employee select menu");
}
}); // end Employee selection
return aControls;
} // end createContent

No views are displayed in ViewRepeater with activated respnsive

I've created this view. If I activate responsive, nothing is displayed. If I deactivate responsive I see the rows. What can be the reason?
createContent : function(oController) {
var oTileTemplate = new sap.ui.commons.layout.HorizontalLayout("tileTemplate");
var oEmployeeDetailsTemplate = new sap.ui.commons.layout.VerticalLayout("employeeDetailsTemplate");
//Name
var oEmployeeNameText = new sap.ui.commons.TextView( {
text: {
parts: [
{ path: "title" },
{ path: "firstname" },
{ path: "lastname" }
]
},
});
oEmployeeDetailsTemplate.addContent(oEmployeeNameText);
//Company
var oEmployeeCompanyText = new sap.ui.commons.TextView( {
text: "{company}",
});
oEmployeeDetailsTemplate.addContent(oEmployeeCompanyText);
//Plant
var oEmployeePlantText = new sap.ui.commons.TextView( {
text: "{plant}",
});
oEmployeeDetailsTemplate.addContent(oEmployeePlantText);
//Orgunit
var oEmployeeOrgunitText = new sap.ui.commons.TextView( {
text: "{orgunit}",
});
oEmployeeDetailsTemplate.addContent(oEmployeeOrgunitText);
oTileTemplate.addContent(oEmployeeDetailsTemplate);
var oViewRepeater = new sap.suite.ui.commons.ViewRepeater("tilesViewReapeater", {
title: new sap.ui.commons.Title({text: "Employee View", level: sap.ui.commons.TitleLevel.H1}),
noData: new sap.ui.commons.TextView({text: "Sorry, no data available!"}),
showViews: false, // disable view selector
showSearchField: false,
//set view properties directly to the repeater
responsive: true,
itemMinWidth: 210,
numberOfRows: 5, // view property NumberOfTiles has legacy name here
rows: {
path: "/employees",
template: oTileTemplate
}
});
return oViewRepeater;
In HTML-Output is nothing rendered in the ViewRepeaters body ul-element.
I don't understand why the element is only rendered correctly when responsive is true? Has anybody an idea?
Thanks!
I don't see any model-binding being done, probably this is missing. (or going wrong)