Hello ladies and gentlemen,
working on my Mockup I found myself in a situation, where I wish i could manipulated on the Refernce Target by user action.
Since I don ́t know, how the reference object is working internally, I ask, if this is possible at all.
If this is technically possible, I would create a case story to illustrate you how I would use it.
Thank you.
4 answers
Hi Oleg,
Of course it is possible, you can even make it work immediately by using the “Call JavaScript Snippet” action.
For example, if you want the Reference_1 element refer to BarChart_1 element, you just need to put these code in the “Call JavaScript Snippet” action:
$(“#Reference_1”).attr(“ref”, “BarChart_1”);
updateElementAndReferences(window.foreui.elements.BarChart_1);
I just tested it and it works 🙂
I am interested in the cases that may need this feature, so please share your idea.
Hello ViVi,
I am glad to hear, that this is already possible, I will try to implement this.
My case is a little bit special, but still.
I think this will help to cleanup the mockup, where the standard elements are at side and the dynamic elements are replaced by the reference objects.
Maybe someone finds more ways, how to use this nice reference element.
Thank you 🙂
-
Like your idea, using Reference as a placeholder of dynamic element :-)
⋅ For the ones, who need this action in multiple cases I wrapped the whole code in a custom function.
You can store custom functions in the “Javascript Code” element:
changeRefTarget = function (ref, tar) {
// Delete behavior from OLD reference target
var behavior2 = window.foreui.behaviors[ref];
if (behavior2 != undefined) {
for (var i = 0; i < behavior2.length; i ++) {
behavior2[i].instance.selector.unbind();
behavior2[i].instance.callMe();
}
}
// Enable FOCUSED_ELEMENT_ID
initDefaultBehaviorForElement(window.foreui.elements[ref]);
// Set new reference target
$(“#”+ref).attr(‘ref’,tar);
initReferences(window.foreui.elements[tar]);
updateElementAndReferences(window.foreui.elements[tar]);
// Set behavior (Click events, etc) for NEW reference target
var behavior = window.foreui.behaviors[tar];
if (behavior != undefined) {
for (var i = 0; i < behavior.length; i ++) {
behavior[i].instance.selector.unbind();
behavior[i].instance.selector = $(“#”+ tar +”,[ref='” + tar +”‘]”);
behavior[i].instance.callMe();
}
}
// Enable FOCUSED_ELEMENT_ID
initDefaultBehaviorForElement(window.foreui.elements[tar]);
};
In your plot elements you can then call this function with the action “Call Javascript Snippet”:
changeRefTarget(“Reference_1”, “Button_3”);
Have fun 🙂
-
Thanks for the code Oleg :-)
However if the Reference element itself doesn't have a behavior defined. Your code will not remove the behavior from old target. Because in this case, the behavior is stored in the old target element, not in the Reference element itself.
So I think the correct code should be:
changeRefTarget = function (ref, tar) {
// Delete behavior from OLD reference target
var oldTar = $("#"+ref).attr('ref');
var behavior3 = window.foreui.behaviors[oldTar];
if (behavior3 != undefined) {
for (var i = 0; i < behavior3.length; i ++) {
behavior3[i].instance.selector.unbind();
}
}
var behavior2 = window.foreui.behaviors[ref];
if (behavior2 != undefined) {
for (var i = 0; i < behavior2.length; i ++) {
behavior2[i].instance.selector.unbind();
behavior2[i].instance.callMe();
}
}
// Enable FOCUSED_ELEMENT_ID
initDefaultBehaviorForElement(window.foreui.elements[ref]);
// Set new reference target
$("#"+ref).attr('ref',tar);
initReferences(window.foreui.elements[tar]);
updateElementAndReferences(window.foreui.elements[tar]);
// Set behavior (Click events, etc) for NEW reference target
var behavior = window.foreui.behaviors[tar];
if (behavior != undefined) {
for (var i = 0; i < behavior.length; i ++) {
behavior[i].instance.selector.unbind();
behavior[i].instance.selector = $("#"+ tar +",[ref='" + tar +"']");
behavior[i].instance.callMe();
}
}
// Enable FOCUSED_ELEMENT_ID
initDefaultBehaviorForElement(window.foreui.elements[tar]);
// Restore the behavior for old reference target
if (behavior3 != undefined) {
for (var i = 0; i < behavior3.length; i ++) {
behavior3[i].instance.selector = $("#"+oldTar+",[ref='"+oldTar+"']");
behavior3[i].instance.callMe();
}
}
}; -
You are right ViVi.
Forgot that point, since I have defined a dummy behavior for my Reference elements :)
Oh and to avoid loosing the {FOCUSED_ELEMENT_ID} property, you should not set the same target twice.
I created an IF clause, to detect this:
changeRefTarget = function (ref, tar) {
// Only change for different target than the existing
if ($("#"+ref).attr('ref') != tar) {
...
...the previous code...
....
}
};
⋅ This question is now closed
$("#Reference_1").attr("ref", "BarChart_1");
initReferences(window.foreui.elements.BarChart_1);
updateElementAndReferences(window.foreui.elements.BarChart_1);
The initReferences() call is needed, otherwise only a few kinds of elements can work.
Thank you for updating this snippet.
I think there is however something missing, what I will try to explain.
If you hardcode the reference, it will also clone the behavior (click events, etc) of the refered object.
But if I change the reference dynamically with that snippet, the behavior will not change and I can ́t interact with the my new reference.
Found some functions( initBehaviorForId and initDefaultBehaviorForElement ) in the foreui.js, but was not able to get it work...
Maybe you have an idea?
Thanks in advance :)
You need more code to clone the behavior as well. For example, you want to set the target of Reference element to Button_1, you need to append these:
var behavior = window.foreui.behaviors["Button_1"];
if (behavior != undefined) {
for (var i = 0; i < behavior.length; i ++) {
behavior[i].instance.selector.unbind();
behavior[i].instance.selector = $("#Button_1,[ref='Button_1']");
behavior[i].instance.callMe();
}
}
Please notice the slashes, they are required to escape the '{' and '}', otherwise ForeUI regards {???} as a property.
Your snippet works quite well.
But in regard to the future implementation, there still remains behavior of the old defined (hardcoded in the plot) reference.
So there can be both behaviors: from the hardcoded dummy and the dynamically defined new reference.
To avoid confusion, I removed all actions from the hardcoded placeholder element.
But I am sure, in the proper implementation this will work as expected.
Thank you for the workarrounds until the release, I am really looking forward to it :)
I think this is actually the proper implementation. When people explicitly set the behavior for Reference element, usually they won't like the behavior disappear, even after changing the reference target. Consider the scenario that every click on the Reference element will change its target element, you will hope the event handler for "Element Clicked" event remain after changing the target.
Anyway, if you wish to remove the "hard-coded" Reference behavior, you can still do it with Javascript:
var behavior2 = window.foreui.behaviors["Reference_2"];
if (behavior2 != undefined) {
for (var i = 0; i < behavior2.length; i ++) {
behavior2[i].instance.selector.unbind();
}
}
Please make sure you put this code snippet BEFORE changing the target, or the behavior from target will be removed as well.