How to init/Re-Init Page or trigger onBeforeRendering again? - sapui5

I have a main screen with a tile the user can press to go to another page. The onInit for this second page works fine in getting/setting the model and the data shows correctly.
If I 'go back' to the first page (after I have made changes on the second screen), and then click the tile to go to the second page, it doesn't call the onInit this second time and so the data reflects the changes that were made and not what I want (the true initialized data). I tried changing the onInit to onBeforeRedendering hoping that it would re-initialize the model/data but it doesn't seem to reset everything correctly.
Is there a way on going back to do something to force the onInit to be called the next time the page is called? I think, if I can make it so the onInit is called each time the page is called, that it would fix my problem.
Here is the portion of my controller for the onInit and 'go back'....
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/viz/ui5/controls/common/feeds/FeedItem',
'sap/m/MessageBox',
'sap/viz/ui5/data/FlattenedDataset'
], function(Controller, JSONModel, FeedItem, MessageBox, FlattenedDataset) {
"use strict";
var ColumnController = Controller.extend("controllers.Quarter", {
onInit: function(oEvent) {
var oRouter = sap.ui.core.routing.Router.getRouter("router");
var myView = this.getView();
var today = new Date();
var year = today.getFullYear();
var yr = year.toString();
var mnth = today.getMonth();
var qtr = Math.floor((mnth / 3));
this.makeYearList(yr);
var mthis = this;
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
yr: yr
});
sap.ui.getCore().setModel(oModel);
myView.byId("mySelectMenu").setSelectedKey(yr);
myView.byId("mySelectMenu").attachChange(function() {
yr = this.getSelectedKey();
mthis.checkYr(yr, qtr);
mthis.recList(myView, yr, qtr);
});
myView.byId("selQtr").attachChange(function() {
qtr = this.getSelectedKey();
mthis.checkYr(yr, qtr);
mthis.recList(myView, yr, qtr);
});
oRouter.attachRouteMatched(function(oEvent) {
mthis.checkYr(yr, qtr);
mthis.recList(myView, yr, qtr);
});
},
goBack: function() {
var oHistory = sap.ui.core.routing.History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
var oView = this.getView();
if (sPreviousHash) {
window.location.replace("#/" + sPreviousHash);
} else {
window.location.replace("#");
}
},
});
return ColumnController;
});
I'd appreciate any advice.

Put the logic to reset the model data into the route matched handler.

The better way to overcome this problem is, use shell for your page one and two. Shell will automatically destroy your content(if you are in page two then page one content would be destroyed and vice versa). else, you need to destroy the content manually to overcome duplicate id issue, u need to destroy by your own and call the controller wherever you want.

Related

Smart table's property initiallyVisibleFields + ODataModel

I used SmartTable with the property initiallyVisibleFields. I bound ODataModel to it. The problem is when I want to show all fields of ODataModel, e.g. after I click on SmartTable's row and try to display it in the dialog. I just see fields from initiallyVisibleFields property. It looks like ODataModel is filtered with initiallyVisibleFields property.
I was thinking about JSONModel where I put copy of ODataModel before it is bind to SmartTable, but I am planning to use SmartFilterBar, so index of shown data in the table will be changed after filtering. So I can not simply pull data from JSONModel. I can still filter data from JSONModel based on the fields I get from
ODataModel filtered with initiallyVisibleFields but there I can still get different data, because there can be differences in the fields which are hidden.
Please, can you advice me how to solve this issue?
Thanks for any tips.
...
return Controller.extend("ABC.View1", {
oDialog: null,
onInit: function() {
var oModel, oView;
oModel = new ODataModel("/sap/opu/odata/sap/ABC/", {
useBatch: false
});
oView = this.getView();
oView.setModel(oModel);
this._createSmartTable();
},
_createSmartTable: function() {
var oSmartTable = new SmartTable('idSmartTable',{
entitySet: "ABCListSet",
tableType: "ResponsiveTable",
sStyleClass: "sapUiResponsiveContentPadding",
initiallyVisibleFields: "A,B,C,D",
showRowCount: false,
enableAutoBinding: true,
demandPopin: false,
useVariantManagement: false,
useExportToExcel: false,
useTablePersonalisation: true,
});
// Register event row click
var that = this;
var oTable = oSmartTable.getTable();
oSmartTable.attachDataReceived(function() {
var aItems = oTable.getItems();
if (aItems.length === 0) return;
$.each(aItems, function(oIndex, oItem) {
oItem.detachPress(that._createDialog);
oItem.setType("Active");
oItem.attachPress(that._createDialog);
});
});
var oVBox = new VBox();
oVBox.addItem(oSmartTable);
var oPage = this.getView().byId("idPage");
oPage.addContent(oVBox);
},
_createDialog: function(oEvent) {
//HERE I the oEvent has data filtered by initiallyVisibleFields property of Smarttable.
},
});
...
Do I understand you correctly that you want to show the complete entry in a dialog? The SmartTable uses $select statements to only load the fields of an entity that are also shown in the table. If you want to load all, I think you should add them in the requestAtLeast property.

How to get the data of a view

I´m using SAPUI5, I have a MasterPage and a DetailPage, in the MasterPage I have a List and when I select de Item in the List the information is displayed in the DetailPage.
In the DetailPage I have a PositiveAction, When I press the PositiveAction I need to get the Data of the DetailPage but I don't know how to do this.
My code of the Item Press
onPoSelect : function(oEvent) {
var oListItem = oEvent.getParameter('listItem');
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("DetailPanel", {
invoicePath: oListItem.getBindingContext("solped").getPath().substr(1)
});
},
My code in the DetailPanel
onInit: function (){
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("DetailPanel").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/" + oEvent.getParameter("arguments").invoicePath,
model: "solped"
});
},
The line "oEvent.getParameter("arguments").invoicePath,"
returns this.
Invoices(CustomerName='Alfreds Futterkiste',Discount=0f,OrderID=10702,ProductID=3,ProductName='Aniseed Syrup',Quantity=6,Salesperson='Margaret Peacock',ShipperName='Speedy Express',UnitPrice=10.0000M)
I have the information but it is a String, How can I convert this String in an Object? Or, how else can I access the information in the view?
The image of the View
enter image description here
I assume you can already see the data of the detail in your Detail view.
You binded the data to the view by bindElement function and to retrieve them back in the code you are looking for "getBindingContext" function.
Create following function in your Detail controller:
// this must be connected to Button -> <Button press="onPositivePress">
onPositivePress: function(oEvent) {
var oBindingContext = this.getView().getBindingContext("solped");
// this is the path you can use to call odata service
var sPath = oBindingContext.getPath();
// this is data you are looking for
var oReqData = oBindingContext.getObject();
}
You can get all the properties as an object by passing the binding path as an argument to the getProperty function of the underlying Data model.
var oModel = this.getView().getModel("solped");
var oProps = oModel.getProperty(oListItem.getBindingContext("solped").getPath());
You can then access these properties as
oProps.CustomerName;
oProps.OrderID;
...
for converting string to object see below example.
var a = "how r u";
var b = [a];
you will get object of a in b.

setBusy not executing

I have setBusy exucuting elsewhere in my application, but why not here....
This is reading in my site details, so without the setbusy the page looks like it's doing nothing.
_onRouteMatched: function (oEvent) {
//initialise display
var view = this.getView();
view.setBusy(true);
view.byId("shopInput").setValue("");
view.byId("effectiveDateFrom").setValue("");
view.byId("shop24Hrs").setSelected(false);
view.byId("shopClosed").setSelected(false);
view.byId("createNext").setVisible(false);
view.byId("createSubmit").setVisible(false);
//view.byId("createSave").setVisible(false);
// initialise the store view model
var oModel = this.getModel("site");
this.getModel().read("/SiteSet", {
success: function (oData) {
var oSiteData = oModel.getData();
oSiteData.Sites = oData.results;
oModel.setData(oSiteData);
}.bind(this)
});
view.setBusy(false);
},
Any Ideas?
Actually your code sets busy but resets it right away. The read method is asynchronous. You have to reset busy inside the success callback function (it could be a good idea to reset it in an error callback too).
_onRouteMatched: function (oEvent) {
//initialise display
var view = this.getView();
view.setBusy(true);
view.byId("shopInput").setValue("");
view.byId("effectiveDateFrom").setValue("");
view.byId("shop24Hrs").setSelected(false);
view.byId("shopClosed").setSelected(false);
view.byId("createNext").setVisible(false);
view.byId("createSubmit").setVisible(false);
//view.byId("createSave").setVisible(false);
// initialise the store view model
var oModel = this.getModel("site");
this.getModel().read("/SiteSet", {
success: function (oData) {
var oSiteData = oModel.getData();
oSiteData.Sites = oData.results;
oModel.setData(oSiteData);
view.setBusy(false);
}.bind(this),
error: function(){
view.setBusy(false);
}
});
},
Generally when using setBusy() you should mind this points:
Per default the busy indicator is displayed 1000 milliseconds after setBusy(true). There is a setBusyIndicatorDelay() function to control that delay (can be set to 0).
The busy indicator is always created deferred (using setTimeout()). JavaScript is singlethreaded. So if your code after calling setBusy() blocks, the busy indicator will not be displayed until your code has finished and the control flow is returned to the event loop. So don't try this: setBusy(true); model.loadData("/data", false /*synchronous*/); setBusy(false);
You can create a busy dialog object and then use open and close function in the success call back and error call back respectively. Please have a look at the code:-
_onRouteMatched: function (oEvent) {
//initialise display
var busyDialog= new sap.m.BusyDialog;
view.byId("shopInput").setValue("");
view.byId("effectiveDateFrom").setValue("");
view.byId("shop24Hrs").setSelected(false);
view.byId("shopClosed").setSelected(false);
view.byId("createNext").setVisible(false);
view.byId("createSubmit").setVisible(false);
//view.byId("createSave").setVisible(false);
// initialise the store view model
var oModel = this.getModel("site");
busyDialog.open();
this.getModel().read("/SiteSet", {
success: function (oData) {
busyDialog.close();
var oSiteData = oModel.getData();
oSiteData.Sites = oData.results;
oModel.setData(oSiteData);
}.bind(this)
});
busyDialog.close();
},

Button remove when you click on second tab and back

Im using the following code to display simple button,when you click on tab 2 and return to the old tab the button is removed,any idea how do put it permanent in tab1 ?
This is the controller shell
onInit: function() {
this.oViewBuffer ={};
this.oViewBuffer.btn = sap.ui.jsview("codetalk.Main");
var oShell = sap.ui.getCore().byId("main-shell");
oShell.setContent(this.oViewBuffer.btn);
},
onWorksetItemSelected:function(oEvent){
var oShell = sap.ui.getCore().byId("main-shell");
var key = oEvent.getParameter("key");
oShell.setContent(this.oViewBuffer[key]);
}
This is the JS view
createContent : function(oController) {
var oButton = new sap.ui.commons.Button({
text:"Hello Test",
tooltip:"This is toolTip",
press:function(){
alert("test alert");
}
});
return oButton;
}
This is the view of the shell
createContent : function(oController) {
var oButton = new sap.ui.ux3.NavigationItem({
key:"bth",
text:"Tab 1"
});
var oMusicStore = new sap.ui.ux3.NavigationItem({
key:"btn2",
text:"Tab 2"
});
var oShell = new sap.ui.ux3.Shell({
id:"main-shell",
appTitle:"Demo",
worksetItems:[oButton,oMusicStore],
worksetItemSelected:[oController.onWorksetItemSelected,oController]
});
return oShell;
}
first I'd recommend removing the "-" in your shell id (UI5 Dev Guide) and using camel case instead.
secondly you're calling your view with your button in the Init function but once that's done you handle your worksetItems with your controller and set the worksetItem according to your key. So far so good.
But your worksetItems aren't associated with any content so there's no reason for your shell to show you the button when you click on your first Tab
I'd recommend something like initializing your views with IDs and ste the content in your shell controller according to that id
Example:
var oViewButton = sap.ui.view("bth",{
viewName : "codetalk.Main",
type : sap.ui.core.mvc.ViewType.JS
)} //do that in your view where you define your Shell
//do the same for your view with the musicstore also in the view with the Shell
//your id of the view must match the key of your worksetItem
in your shell's controller do this:
onWorksetItemSelected : function(oEvent){
var oShell = sap.ui.getCore().byId("mainShell");
var key = oEvent.getParameter("key");
var oView = sap.ui.getCore().byId(key);
oShell.setContent(oView);
}
this solution will bypass the content aggregation of your Shell but at least it worked for me.
In shell view.js remove second last line
Example
"worksetItemSelected:[oController.onWorksetItemSelected,oController]"
It might work

Bootstrap datepicker with knockout.js databind

This question is similar to knockoutjs databind with jquery-ui datepicker, but instead of the jQueryUI datepicker, I would like to use one of the Bootstrap datepickers.
The API for the Bootstrap datepicker is different from jquery-ui, and I am having some trouble wrapping my head around making it work with knockout.js. I have created a jsFiddle to try it out.
It seems like the Bootstrap datepicker could be much simpler to use because it does not independently store the date. However, I would like to know how whether the jsFiddle is the appropriate way to use the Bootstrap datepicker widget with knockout.js i.e.
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
update: function(element, valueAccessor) {
}
};
Here is a sample of how you could accomplish this with the datepicker that you are using:
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function(event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function(element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
if (widget.date) {
widget.setValue();
}
}
}
};
It did not look like there was any destroy functionality, so I removed that piece. This handles the widgets changeDate event to update the view model, when a user changes the date. The update function handles when the view model is changed to update the widget.
If you want to bind the value to a non-observable, then it would take a little more code. Let me know if that is something that you need to support.
http://jsfiddle.net/rniemeyer/KLpq7/
my current version is a mix between the already shown solutions:
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var binding = allBindingsAccessor();
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
$(element).datepicker('update', dataSource());
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
var value = ko.utils.unwrapObservable(valueAccessor());
//when the view model is updated, update the widget
if (widget) {
widget.date = value;
if (widget.date) {
widget.setValue();
$(element).datepicker('update', value)
}
}
}};
The accepted answer didn't work for me with the current version of the date picker. The input wasn't being initialized with the value of the observable. I made an updated binding, to which I added this:
$(element).datepicker('update', dataSource());
That seems to do the trick.
Here's an updated fiddle that uses the latest available date picker, Bootstrap, jQuery, and Knockout: http://jsfiddle.net/krainey/nxhqerxg/
Update:
I experienced some difficulty with the date picker not playing nicely with the observable when a user would edit the value in the text field manually. The tool would immediately parse the date, and plug the result into the input field.
If the user tried to edit 10/07/2014, for example, and used the backspace or delete to remove a number (10/0/2014), the resulting value would be parsed immediately and inserted into the text input. If the value was, for a moment, 10/0/2014, the picker would shift the calendar to 09/30/2014, and plug that value into the text field. If I tried to edit the month, and the value was, for a moment, 1/7/2014, the picker would shift to January 7, 2014, and plug that value in to the text field.
You can see that behavior in this fiddle:
http://jsfiddle.net/krainey/nxhqerxg/10/
I had to update my binding with a special handler to detect focus, and bind a one-time blur event to get it to handle manual edits correctly.
$(element).on("changeDate", function (ev) {
var observable = valueAccessor();
if ($(element).is(':focus')) {
// Don't update while the user is in the field...
// Instead, handle focus loss
$(element).one('blur', function(ev){
var dateVal = $(element).datepicker("getDate");
observable(dateVal);
});
}
else {
observable(ev.date);
}
});
The fiddle referenced in the original answer has been updated to reflect this:
http://jsfiddle.net/krainey/nxhqerxg/
Here is what I Ended up
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = {
autoclose: true,
format: 'yyyy-mm-dd',
}
//var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
var myDate = event.date;
var month = myDate.getMonth() + 1;
var monthText = month;
if (month < 10)
monthText = "0" + month;
var day1 = parseInt(myDate.getDate());
var dayText = day1;
if (day1 < 10)
dayText = '0' + day1;
value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
widget.setValue(widget.date);
}
}};
There is a much simpler way to get bootstrap-datepicker.js and knockout.js working together. Typically the initialization of the datepicker inputs is invoked during/after the page load. However when knockout.js updates the value binding, the datepicker is not updated correctly with the new value and so when you focus on the datepicker input it defaults to 01-Jan-2001.
All you have to do is to destroy and reinitialise the datepicker inputs after any knockout.js value bindings are updated as per the ViewModel method below, which sets up a mapped object to be edited.
self.showEditOrderForm = function (data) {
ko.mapping.fromJS(data, self.entity);
self.mode('edit');
$('#edit-dateordered').datepicker('destroy');
$('#edit-dateordered').datepicker({
format: 'dd-M-yyyy',
title: 'Select Date',
weekStart: 1,
todayHighlight: true,
autoClose: true,
endDate: '0d'
});
};