Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X
I'm creating a custom Widget extension that basically just wraps a Javascript library, and it works like this:
1. Create a <canvas> element with a certain ID/class/whatever
2. Attach the library to that <canvas> element
3. Do stuff after that
I'm currently creating the <canvas> element like so:
this.renderHtml = function() {
return (
'<div class="widget-content"><canvas id="' +
this.getProperty("Id") +
'"></canvas></div>'
);
}
However, this doesn't work when the Widget is in a Collection Item, since all the mashups within the collection have the exact same ID for the widgets within. The result is that none but the first widget actually display or function.
How do I go about making it so my widget can be used within a Collection widget, is there some way to get an ID that is unique to the collection item?
Solved! Go to Solution.
Thanks for the tip! I decided on this for a solution:
I found a function online that generates a UUID, and just used that to generate the ID of the <canvas> element. The function I found is as follows:
this.generateUuid = function() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
};
Hello,
Just in case you don't find a better solution, you can add some bindable "uniqueId" property to your widget and bind it to a (sub)mashup parameter, which corresponds to some unique identifier in your data.
/ Constantine
Thanks for the tip! I decided on this for a solution:
I found a function online that generates a UUID, and just used that to generate the ID of the <canvas> element. The function I found is as follows:
this.generateUuid = function() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
};