Creating a Widget Extension where the widget can be used within a Collection Item

[mdszy]

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?

[Constantine]

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

[mdszy · Accepted 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);
    });
  };