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

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

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

yleong
4-Participant

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. 

1 ACCEPTED SOLUTION

Accepted Solutions
yleong
4-Participant
(To:rperdigao)

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

 

View solution in original post

6 REPLIES 6
ytella
17-Peridot
(To:yleong)

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?

yleong
4-Participant
(To:ytella)

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.

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

yleong
4-Participant
(To:rperdigao)

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

 

Isma
2-Guest
(To:yleong)

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

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

 

Top Tags