Skip to main content
A
Anonymous
April 29, 2016
Solved

open a thingworx popup from html anchor tag.

  • April 29, 2016
  • 2 replies
  • 2644 views

Hi,

i have created my own thingworx list widget using HTML template and angular js, that list have one column which rendered html anchor tag. currently on click of that anchor it opens new browser window.

anchor tag html looks like as below.

<a href="http://www.facebook.com/sharer" onclick="window.open(this.href, 'mywin','left=20,top=20,width=1024,height=600,toolbar=1,resizable=0'); return false;" >my image</a>

can we open thingworx popup instead of browser window on click of html anchor tag?

Regards,

Lalit

Best answer by

Hi,

i have resolved this issue. I followed as below, also added some code snippet for better reference.

1) Created one widgetEvent in .ide.js file.

this.widgetEvents = function() {

  return {

       'linkClicked': { 'warnIfNotBound': true }

  }

};

2) Created one function in .runtime.js file, that function will trigger Event created in .ide file

$scope.imageLinkClicked = function(item) {

       $scope.widget.jqElement.triggerHandler('linkClicked');

};

3) In HTML template file, on click of anchor tag called function created in .runtime.js file

<td data-ng-repeat="document in item.Documents.rows" style="padding-right:5px;">

  <div data-ng-click="imageLinkClicked(item)">{{document.Name}}</div>

</td>

4) In Mashup, bound navigate event of navigation with linkClicked(this we have created in .ide.js file).

Thanks,

Lalit

2 replies

P
PaiChung22-Sapphire I
22-Sapphire I
April 30, 2016

Take a look at the Navigation Widget which has the ability to do so.

A
Anonymous
Answer
May 10, 2016

Hi,

i have resolved this issue. I followed as below, also added some code snippet for better reference.

1) Created one widgetEvent in .ide.js file.

this.widgetEvents = function() {

  return {

       'linkClicked': { 'warnIfNotBound': true }

  }

};

2) Created one function in .runtime.js file, that function will trigger Event created in .ide file

$scope.imageLinkClicked = function(item) {

       $scope.widget.jqElement.triggerHandler('linkClicked');

};

3) In HTML template file, on click of anchor tag called function created in .runtime.js file

<td data-ng-repeat="document in item.Documents.rows" style="padding-right:5px;">

  <div data-ng-click="imageLinkClicked(item)">{{document.Name}}</div>

</td>

4) In Mashup, bound navigate event of navigation with linkClicked(this we have created in .ide.js file).

Thanks,

Lalit

Terms & ConditionsAccessibility statement