cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

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

SOLVED
Regular Member

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

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?

1 ACCEPTED SOLUTION

Accepted Solutions

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

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);
    });
  };

View solution in original post

2 REPLIES 2

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

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

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

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);
    });
  };

View solution in original post

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum! ______________________________