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

How to invoke the widget service programmatically using js in Thingworx Studio?

SOLVED
Level 6

How to invoke the widget service programmatically using js in Thingworx Studio?

I will like to invoke the 'showpopup' service of 'Popup' widget from the js function instead of using 'click' event binding. 

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to invoke the widget service programmatically using js in Thingworx Studio?

Hi,

 

I have found the answer by exploring $scope.app object.

 

The $scope.app do provide property 'fn' that includes the function called triggerWidgetService(widget_id, service_name).

 

The sample script for reference.

$scope.showPopup = function(){
$scope.app.fn.triggerWidgetService('popup-1','showpopup');
}

 

6 REPLIES 6

Re: How to invoke the widget service programmatically using js in Thingworx Studio?

Hi @yleong

Could you please provide more details on this scenario? Would you like to invoke the show-popup service from another function written in js file?

Re: How to invoke the widget service programmatically using js in Thingworx Studio?

Example when a model item is selected, click event will trigger an js function. The function will performs some validation like check current step, after the validation i will like to use js to trigger the 'show popup' service of the new pop-up widget  inside the function. I will like also to use js to trigger the 'play' service of audio widget.

Re: How to invoke the widget service programmatically using js in Thingworx Studio?

Hi, 

Here is my suggestion:

  • Edit the <<viewname>>.js file and add a showPopup function to your view that will display or hide your popup:
    $scope.showPopup = function(flag) {
      $scope.view.wdg['yourPopUpName']['visible'] = flag;
    }
  • Replace 'yourPopUpName' with the name of your popup (case sensitive)
  • Save the <<viewname>>.js
  • On you JS Trigger, call the function passing True or False to Display or Hide the PopUp:
    showPopup(true);  // Display PopUp
    showPopup(false); // Hide PopUp

 

Hope it helps,

Ricardo

Re: How to invoke the widget service programmatically using js in Thingworx Studio?

Hi,

 

I have found the answer by exploring $scope.app object.

 

The $scope.app do provide property 'fn' that includes the function called triggerWidgetService(widget_id, service_name).

 

The sample script for reference.

$scope.showPopup = function(){
$scope.app.fn.triggerWidgetService('popup-1','showpopup');
}

 

Re: How to invoke the widget service programmatically using js in Thingworx Studio?

Hello, 

 

Can you please explain how to explore $scope.app ? it would really help me call some functions properly and see what's already out there that can be used. 

 

Thanks in advance,

regards

Re: How to invoke the widget service programmatically using js in Thingworx Studio?

Hi @Isma,

one possible way to explore here e.g. $scope.app -you can use the following code:

$scope.test_scope_app=function () {
console.log("explore here $scope.app")
console.warn($scope.app)  }

Then add it to the model loaded event :

 

2019-02-22_12-14-46.gif

Then start the project in Preview mode and click Strg-Shift-I to start the chrome debugging mode.

In the console tab you will find the warning print of $scope.app

2019-02-22_12-16-40.gifAfterwords you can explore by clicking the arrow (triangles) to expand the objects:

2019-02-22_12-18-29.gif

 

In case that you do not have a model widget - you will be not able to use the model load event in this case you can use e.g. $ionicView.afterEnter' . Sample code - add it simple to the Home.js (or otherwise <YourViewName>.js)

$scope.$on('$ionicView.afterEnter', function(){
  // Anything you can think of
console.warn("$ionicView.afterEnter")
console.log("explore here $scope.app")
console.warn($scope.app) })