Create SAPUI5 control using new Function() and string - javascript

This question is a continuation of this one.
I have a list of SAPUI5 controls in string format and to extract the required control I use:
var sDefaultControlConstructor = "new sap.m.Input()";
var sConstructor = "return " + sDefaultControlConstructor;
var oConstructor = new Function(sConstructor);
var oField = oConstructor();
The oField object I get looks like follows in the console:
M.c…s.f {bAllowTextSelection: true, mEventRegistry: Object, sId: "id",
mProperties: d, mAggregations: Object…}
The problem is that I cannot get the created object using sap.ui.getCore().byId() function.
I looked for the differences between the object I create and the object which is created "normally"
var oField = new sap.m.Input();
it looks like this:
d {bAllowTextSelection: true, mEventRegistry: Object, sId: "id",
mProperties: d, mAggregations: Object…}
Obviously, these two object are different.
The question is how do I create the control of the second format using new Function().
Thank you.

OK, I have found the solution.
I was declaring the control wrong - the id to every control is given by user when this control is being created, while when user doesn't give any id to the control, it is given automatically.
So, when I did
var sDefaultControlConstructor = "new sap.m.Input()";
var sConstructor = "return " + sDefaultControlConstructor;
var oConstructor = new Function(sConstructor);
var oField = oConstructor();
my control oField was created with automatically generated and assigned id.
And when I give id to this control afterwards -
oField.sId = "someID";
this control cannot be seen by sap.ui.getCore().byId("someID"); (I honestly don't know why. It always return undefined).
To fix the issue, its required to assign control's id during the control's creation:
var oConstructor = new Function("a", "return new sap.m.Input(a)");
var oField = oConstructor({id:'someID'});
OR
var sId = 'someID';
var oConstructor = new Function("a", "return new sap.m.Input(a)");
var oField = oConstructor({id:sId});
HERE is JSBIN example of two above declarations (working and not working ones).

Related

method plugin doesn't work within Function Constructor

What I'm trying to achieve in JavaScript is to make a method of the plugin I'm working with (called "Plugin") flexible. The plugin runs in an iFrame and has cross-domain trust settings applied. I want to use variables to build the method parameter rather than hard code it.
The hardcoded version is shown below and I've double checked this works. I've used it in functions and in a Function constructor. Both work.
window.Plugin.Session.Tags({
TagName: 'SomeTagName',
TagValueTagging: 'sometagvalue; secondtagvalue',
TagValueTaggingReset: '*'
}).Update();
My objective is to replace the 'sometagvalue' with a variable, so I can set the tag dynamically. The help says the parameter is a constant JSON string.
I've tried the following things:
build the parameter as string. Result: Though myText holds the exact same string as in the hardcoded version, the method is not executed.
var myTag = '\\'DEELNEMER ; name\\' ';
var myText = "{TagName : 'Workflow'," +
" TagValueTagging : " + myTag +
", TagValueTaggingReset : '*'}";
alert("myText = " + myText);
x = window.Plugin.Session.Tags(myText);
x.Update();
2) using new Function constructor. I created a variable with the session object and inserted that as parameter. In order to proof myself that I working with the right object, I've put it's LID in an alert as well outside as inside the constructor. Result: the Session.LID was the same inside and outside the constructor, but tagging did not happen.
var myFunction = "alert(\"in constructor Session.LID = \" + prmSession.LID); window.addTag =
prmSession.Tags({TagName : \'Workflow\', TagValueTagging : \'DEELNEMER\' , TagValueTaggingReset :
\'*\'}); window.addTag.Update();"
var addTagFunction = new Function("prmSession", myFunction)
var prmSession = window.Plugin.Session;
alert("in main function Session.LID = " + prmSession.LID);
addTagFunction(prmSession);
3) using JSON stringify. Again Result: Tag was not set, in neither variant..
var myTag = 'DEELNEMER ; name ';
var obj = new Object();
obj.TagName = "Workflow";
obj.TagValueTagging = myTag;
obj.TagValueTaggingReset = "*";<br/>
var myJSON= JSON.stringify(obj);
Plugin.Session.Tags(myJSON).Update();<br/>
/*variant 2*/<br/>
var myObjParsed = JSON.parse(myJSON);
Plugin.Session.Tags(myObjParsed).Update();
I would be very greatful for a tip how to solve this issue.
Regards
Plugin appears to translate the javascript into backend data queries during the compilation of the solution.
The use of parameters is therefore not possible.

JS- Call a method from a generated button for a specific object

I m new at coding , and I m searching for a way to launch a specific prototype method for each object of my array from a generated button
I've got json data to loop , and include each object on a js array.
//My data got 3 objects
var readArr = JSON.parse(myData)
var js_arr = [];
// loop on the array of object
for (var i = 0; i < readArr.length; i++) {
var generatedObject = new Object();
//init method from prototype
generatedObject.init(readArr[i].prop1, readArr[i].prop2, readArr[i].prop3, readArr[i].prop4, readArr[i].prop5,
readArr[i].prop6, readArr[i].prop7, readArr[i].prop8);
js_arr.push(generatedObject);
//generated a div which will contains a button for each occurence
var newCntent = document.createElement('div');
newCntent.id = readArr[i].prop1 + i;
newCntent.className = "cntent";
document.getElementById('zone_btn').appendChild(newCntent);
//create a button inside the div
var newBtn = document.createElement('div');
newBtn.id = i + readArr[i].prop1;
newBtn.className = "etalonBtn";
newBtn.innerHTML = readArr[i].prop1;
document.getElementById(newCntent.id).appendChild(newBtn);
I've got a prototype method on my Object class and what I want is launch that method for each object linked with a button.
The first generated button will launch the method for js_arr[0], the second for js_arr[2],...how to code the fact that when I click on the button , the method must be call by "the object of the array which permetted your creation"
I don't have any clue on the way I can do this I tried several things:
newBtn.addEventListener('click', function () {
read_arr[i].DisplayUpdate();
});
};
(returning read_arr[i] is not defined), so I just want to change that read_arr[i] by this now famous :"the object of the array which permetted your creation" !
and I really need help on this...
Thank you by anticipation and sorry for this preschool english.
The issue is that when you're getting to the click function (i.e. - when actually clicking the button) you're already out of the loop, so js doesn't know what 'read_arr[i]' is.
You need to pass 'read_arr[i]' as a parameter to the function.
Basically something like this:
newBtn.addEventListener('click', function (object) {
object.DisplayUpdate();
},js_arr[i]);
This will change the function's signiture to also take a parameter- object, and also pass js_arr[i] as that parameter.
Hope that helps
you could also assign and bind the function to call when you create the button in your loop:
var newBtn = document.createElement('div');
newBtn.id = i + readArr[i].prop1;
newBtn.className = "etalonBtn";
newBtn.innerHTML = readArr[i].prop1;
newBtn.onclick = jsArr[i];

javascript can't use input to grab an object property

So i've got this code below (all javascript). And I wish to grab the votecount for a game on user input
function Game(gamename,votes) {
this.gamename = gamename;
this.votes = votes;
};
var lol = new Game("League of Legends",1100);
var dota = new Game("DOTA 2",2100);
var ql = new Game("Quakelive",3100);
var csgo = new Game("Counter Strike: GO",4100);
function PostVotes(gnshort){
//string names - working
console.log(gnshort + 'name');
console.log(gnshort + 'votes')
var CalcVotes = function(gnshort){
var votecount = gnshort.votes;
console.log(votecount);
}
CalcVotes(gnshort);
//CalcVotes(lol); //works
};
PostVotes('lol');
I keep getting the error undefined when calling CalcVotes(gnshort). and I know it's not the function it's passing the lol as gnshort it's asif it's reading as a string instead of a variable or something. I've only been learning javascript for the past week so any advice would be helpful
PostVotes('lol'); will pass lol as a string ('lol' is equivalent to "lol"). What you need to do is simply pass the variable lol like
PostVotes(lol);
And it will return lol.votes, aka 1100.

Trouble with getting access to an object's property

I'm having a trouble with getting access to an object's property.
Isn't it possible to get access to an object's property like this?
key["heading"]
key in the code above is a variable.
This code below is the code I'm working on right now.
alertHeading.on('blur', function(){
var inputtedVal = $(this).val();
var key = alertMode.val();
chrome.runtime.getBackgroundPage(function(backgroundPage) {
var background = backgroundPage.background;
//(1)This works fine.
background.setStorage(key, {heading:inputtedVal});
console.log(background.getStorage(key));// Object {heading: "aaa"}
//(2)This doesn't work.
var alertObject = background.getStorage(key["heading"]);
console.log(alertObject);// null. I'm expecting to get "aaa".
});
})
I think I'm making a very simple mistake which comes from my lack of javascript knowledge.
Please help me out to solve this problem.
Your key isn't an object, it's a string. It is the return from background.getStorage(key) that is an object, so you can do this:
var alertObject = background.getStorage(key)["heading"]; // note () and [] placement
// OR, in two steps:
var alertObject = background.getStorage(key);
var heading = alertObject["heading"];
EDIT:
"I haven't understood why it's not an object but a string yet"
Your key variable is set to the return from jQuery's .val() method:
var key = alertMode.val();
...which returns a string that is the value of the form element that it is called on. Add in a console.log(key) and you'll see.

dynamic object properties javascript

Having issues with this code block:
var name = "";
var nutrients = {};
var tds = document.getElementById('data').getElementsByTagName('td');
name = tds[0].innerHTML;
nutrients[name].val = tds[1].innerHTML;
alert(nutrients.Energy.val);
If I take out the .val on both lines, the code works. I'm trying to dynamically create the "
nutrients" abject by extracting information from a table. "Energy", and all 50 of nutrient names must have a "value" and a "unit" property. Eventually this will be a loop.
Thanks for any help
When trying to assign
nutrients[name].val = tds[1].innerHTML;
the nutrients object is still empty, and nutrients["Energy"] (or whatever) will be undefined; throwing an exception when beeing assigned a property. Instead, use
nutrients[name] = {
val: tds[1].innerHTML
};

Categories

Resources