Set The Value Of A Global Variable In A Function
Solution 1:
I think that what you want to do is simplier that what you are doing. To save a global variable, get the Core object and set the variable as a new property of this object:
sap.ui.getCore().myGlobalVar = myCalculatedValue;
Then to use it in other view, get the property directly from the Core:
var mySavedVar = sap.ui.getCore().myGlobalVar
Then use the Router routeMatched event to handle your navigation and refresh the value.
Here a snippet: https://jsbin.com/bewigusopo/edit?html,output
<!DOCTYPE html><html><head><metahttp-equiv='X-UA-Compatible'content='IE=edge' ><metacharset="UTF-8" ><title>test</title><scriptid='sap-ui-bootstrap'src='https://sapui5.hana.ondemand.com/1.38.5/resources/sap-ui-core.js'data-sap-ui-theme='sap_bluecrystal'data-sap-ui-bindingSyntax="complex"></script><scriptid="view1"type="sapui5/xmlview"><mvc:Viewxmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><core:ComponentContainername='my.comp'/></mvc:View></script><scriptid="home"type="sapui5/xmlview"><mvc:Viewxmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"controllerName="my.controller1"><Page><Inputid="input"placeholder="Write a text to save it globally"/><Buttontext="Navigate to other view"press="onNavigate"/></Page></mvc:View></script><scriptid="add"type="sapui5/xmlview"><mvc:Viewxmlns="sap.m"xmlns:f="sap.ui.layout.form"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"controllerName="my.controller2"><Pageid="page"showNavButton="true"navButtonPress="onBack"><HBoxclass="sapUiLargeMarginBegin"><Labeltext="The global variable is:"class="sapUiSmallMarginEnd sapUiSmallMarginTop"/><Inputid="inputResult"/></HBox></Page></mvc:View></script><script>// jQuery.sap.declare("my.comp.Component");
sap.ui.define("my/comp/Component", ["sap/ui/core/UIComponent"], function(UIComponent) {
returnUIComponent.extend("my.comp.Component", {
metadata : {
name : "GreatComponent",
version : "1.0",
includes : [],
dependencies : {
libs : ["sap.m"]
},
routing: {
config: {
routerClass: "sap.m.routing.Router",
viewType: "XML",
viewPath: "my",
controlId: "app",
transition: "slide",
controlAggregation: "pages"
},
routes: [
{
name: "home",
pattern: "",
target: "home"
},
{
name: "add",
pattern: "add",
target: "add"
}
],
targets: {
home: {
viewName: "Home",
title: "home"
},
add: {
viewName: "Add",
title: "add"
}
}
}
},
init: function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var oRouter = this.getRouter();
var oViews = oRouter.getViews();
this.runAsOwner(function() {
var myHome = sap.ui.xmlview({viewContent:jQuery('#home').html()});
oViews.setView("my.Home", myHome);
var myAdd = sap.ui.xmlview({viewContent:jQuery('#add').html()});
oViews.setView("my.Add", myAdd);
});
oRouter.initialize();
},
createContent : function() {
var componentData = this.getComponentData();
returnnew sap.m.App("app", {
});
}
});
});
sap.ui.define("my/controller1", [
"sap/ui/core/UIComponent"
],function(UIComponent) {
return sap.ui.controller("my.controller1", {
onInit: function() {
this.oRouter = UIComponent.getRouterFor(this.getView());
},
onNavigate: function() {
var sInputText = this.getView().byId("input").getValue();
sap.ui.getCore().myGlobalVar = sInputText;
console.log(sap.ui.getCore().myGlobalVar)
this.oRouter.navTo("add");
}
});
});
sap.ui.define("my/controller2", [
"sap/ui/core/UIComponent"
],function(UIComponent) {
return sap.ui.controller("my.controller2", {
onInit: function() {
this.oRouter = UIComponent.getRouterFor(this.getView());
this.oRouter.getRoute("add").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function(){
var sGlobalVariable = sap.ui.getCore().myGlobalVar;
console.log(sGlobalVariable);
this.getView().byId("inputResult").setValue(sGlobalVariable);
},
onBack: function(){
this.oRouter.navTo("home");
}
});
});
sap.ui.require(["my/comp/Component"], function(myComp) {
// instantiate the View
sap.ui.xmlview({viewContent:jQuery('#view1').html()}).placeAt('content');
});
</script></head><bodyclass='sapUiBody'><divid='content'></div></body></html>Other possibility is to set a global model, which will simplyfy your binding very much. Just create it and set it into the Core
//To set itvar oGlobalModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(oGlobalModel, "myGlobalModelID");
//To get itvar oMyGlobalModel = sap.ui.getCore().getModel("myGlobalModelID");
Solution 2:
Please, avoid defining global variables (such as before sap.ui.define) especially if you are working on apps that are going to be placed into the Fiori Launchpad. This approach is considered harmful. This is also repeated in the documentation:
In control and class modules, you should not use global variables at all.
We're using "use strict" purposely to disallow such practices.
Also, defining properties or adding models on sap.ui.getCore() is an anti-pattern for Fiori apps. Not only does this lead to the same flaws as defining global variables but models set on the core are not propagated to the viewsby default because components are meant to be used modularly. Therefore, defining such data to the corresponding component instead of the core is the way to go for Fiori apps.
I created a global variable
var boo1; return Controller.extend("com.controller.Detail", {...});
What you created though was not a global variable since boo1 was declared inside an anonymous function. Instead, boo1 was stored in a closure which allowed the prototype methods (onInit and fonc) to maintain the lexical environment within which boo1 was made accessible not only by the methods but also by other instances of com.controller.Detail. In terms of Java, we can say that boo1 is a private static variable. But it's not a global variable.
That being said..
I passed
boo1as a parameter in my methodfonctinside myonInitmethod but it isundefined
The closure makes passing boo1 as an argument unnecessary (unless you want a hard copy of boo1 to maintain multiple states of it). The method fonct can access boo1 directly, even in the anonymous callbacks defined in fonct.
Now, you may be asking why boo1 was undefined. There are two reasons:
boo1wasundefinedbefore callingfonct. Ifboo1were an object instead of undefined, thenovarwould have been a reference to theboo1object and the change to anyovarproperty would have took place in theboo1object. Butundefinedis not an object. Soovardoesn't know whatboo1is at all. Note: The evaluation strategy of JS is "Call by object-sharing".alert(boo1)gets fired right after callingfonct. UnlessoModelworks synchronously (which I strongly recommend not to do so), the browser doesn't wait for the success callback to get fired in order to invokealert(boo1)later. The alert is fired immediately, and then the success callback whereboo1should be manipulated.
Removing ovar and using boo1 instead updates boo1 properly in the success callback.
fonct: function(/*no ovar*/) {
//...
oModel.read("/alertSet", {
success: function(data) {
//...
boo1 = /*new value*/;
alert(boo1);
}.bind(this)
});
}
Solution 3:
You should declare the global variable at global scope (i.e., before sap.ui.define).
Post a Comment for "Set The Value Of A Global Variable In A Function"