Skip to main content
V
19-Tanzanite
Velkumar19-Tanzanite
19-Tanzanite
June 1, 2020
Solved

How to execute service based on change in current selection

  • June 1, 2020
  • 2 replies
  • 4203 views

Hi all,

 

I have couple of question's about executing Thingworx Service in Vuforia Studio

  1. How to execute service based on data change / change in current selected item.
  2. How to execute service when view changes from one view to another
  3. And to execute service when popup widget opened/showed

Could any one help me with this.

 

Thanks in advance.


/VR

Best answer by RolandRaytchev

Here to this post  -  I  want to mention  same additionals points based on further observations. I hope this could be helpful.

1.) e.g. for a list widget for example we can use the twx.app.fn.clickItemInRepeater e.g. in the example:

 

// when defined this function it deactivate the events:
// Current Selected Item
//======================================================
function isThisAnObj(val) {
 if (val === null) { return false;}
 return ( (typeof val === 'function') || (typeof val === 'object') );
}
//======================================================
twx.app.fn.clickItemInRepeater = function()
{
 console.log("twx.app.fn.clickItemInRepeater()");
 const args = Array.from(arguments);
for(i=0;i < args.length; i++)
 { if( isThisAnObj(args[i]) )
 		{console.log("Object::args["+i+"]=>>"); console.warn(JSON.stringify(args[i]));}
 else
 		{console.log("primitive::args["+i+"]=>>"); console.warn(args[i]);}
 } 
};

 

this code will detect in the args[0} the  data set which is currently selected -e.g. the print:

 

twx.app.fn.clickItemInRepeater()
app.js?v1591308482832:1260 Object::args[0]=>>
app.js?v1591308482832:1260 {"fileType":"F","lastModifiedDate":"2020-03-24T10:56:40.340Z","name":"door_type_3.gif","path":"/image/door_type_3.gif","size":105175,"$$hashKey":"object:2034"}

 

 

2.) when we use the twx.app.fn.clickItemInRepeater , means when we define the callback in the JavaScript section - in this case this seems to DEACTIVATE the selection events on the widgets !!!  " Current Selected Item" for  the service is not working any more. When we comment the callback then it works again!

 

3.) When we use a property/item   of  the   Current Selected Item  section of  a service  - means   we  do not have a definition of the callback twx.app.fn.clickItemInRepeater  in javascript  - in this case we can link a item as mention in the previous post to an parameter and use a $watch angular construct

 

2020-06-05_0-22-19.jpg

and  the code e.g. :

 

//======================================================
$scope.$watch("app.params['SelItemPath']", function (newValue, oldValue, scope) {
 if ( oldValue != undefined)
console.log(".$watch :: Old Value -befor it was changed =" + oldValue); 
//! it could be undefined first time called
 if (newValue != undefined)
console.log(".$watch ::new Value -after it was changed =" + newValue); 
//prints the current $scope (copy) object passed to the $watch construct
// pay attention it has no $ !
 if (scope != undefined)
console.warn(scope);
})
///////////////////////////////////////////////

 

will print some thing like this:

 

.$watch :: Old Value -befor it was changed =/image/door_type_a.gif
app.js?v1591309561150:1295 .$watch ::new Value -after it was changed =/image/door_type_4.gif
app.js?v1591309561150:1299 m {$$childTail: m, $$childHead: m, $$nextSibling: null, $$watchers: Array(1), $$listeners: {…}, …}
(anonymous) @ app.js?v1591309561150:1299
$digest @ ionic.bundle.min.js:174
$apply @ ionic.bundle.min.js:177
(anonymous) @ ionic.bundle.min.js:472
Pf @ ionic.bundle.min.js:70
d @ ionic.bundle.min.js:70
n @ ionic.bundle.min.js:22
t @ ionic.bundle.min.js:22
a @ ionic.bundle.min.js:22
app.js?v1591309561150:1292 .$watch :: Old Value -befor it was changed =/image/door_type_4.gif
app.js?v1591309561150:1295 .$watch ::new Value -after it was changed =/image/door_type_3.gif
app.js?v1591309561150:1299 m {$$childTail: m, $$childHead: m, $$nextSibling: null, $$watchers: Array(1), $$listeners: {…}, …}
(anonymous) @ app.js?v1591309561150:1299
$digest @ ionic.bundle.min.js:174
$apply @ ionic.bundle.min.js:177
(anonymous) @ ionic.bundle.min.js:472
Pf @ ionic.bundle.min.js:70
d @ ionic.bundle.min.js:70
n @ ionic.bundle.min.js:22
t @ ionic.bundle.min.js:22
a @ ionic.bundle.min.js:22
app.js?v1591309561150:1292 .$watch :: Old Value -befor it was changed =/image/door_type_3.gif
app.js?v1591309561150:1295 .$watch ::new Value -after it was changed =/image/door_type_2.gif
app.js?v1591309561150:1299 m {$$childTail: m, $$childHead: m, $$nextSibling: null, $$watchers: Array(1), $$listeners: {…}, …}
(anonymous) @ app.js?v1591309561150:1299
$digest @ ionic.bundle.min.js:174
$apply @ ionic.bundle.min.js:177
(anonymous) @ ionic.bundle.min.js:472
Pf @ ionic.bundle.min.js:70
d @ ionic.bundle.min.js:70
n @ ionic.bundle.min.js:22
t @ ionic.bundle.min.js:22
a @ ionic.bundle.min.js:22
app.js?v1591309561150:1292 .$watch :: Old Value -befor it was changed =/image/door_type_2.gif
app.js?v1591309561150:1295 .$watch ::new Value -after it was changed =/image/door_type_4.gif
app.js?v1591309561150:1299 m {$$childTail: m, $$childHead: m, $$nextSibling: null, $$watchers: Array(1), $$listeners: {…}, …}

 

2 replies

R
RolandRaytchev21-Topaz I
21-Topaz I
June 1, 2020

Hi @Velkumar ,

about the 

1.) It depends on what item you did change for example checkbox widget:

2020-06-01_23-12-52.jpg

you have the events " Value Changed", Slected, deselected or clicked . You can use an event here to call a function which will call the service with some call like:

2020-06-01_23-19-22.jpg

2.) in this case you can use the inociView  - e.g.  and check the current view - for example you can track if the name was changed etc.

 

$scope.$on('$ionicView.afterEnter', function() {
 //this is called when you enter a view
console.log("current View="+document.querySelector('[twx-view]').getAttribute('twx-view') );
})

 

3.) when popup widget is shown or hidden via the services you can also call some other callbacks. Or how did open or show it?- I believe the only way is that you need to call the services - in this case the same action could call any other functions? Or is there is an example for other invocation of the popup?

 

2020-06-01_23-41-52.jpg

V
19-Tanzanite
Velkumar19-TanzaniteAuthor
19-Tanzanite
June 4, 2020

Hi @RolandRaytchev 

 

Thanks for your response.

 

1.  I'm looking for selected item change event in Thingworx service 

1.PNG

 

And also when I set Auto Select first row, I'm getting null values only.

 

/VR

R
RolandRaytchev21-Topaz I
21-Topaz I
June 4, 2020

Hi @Velkumar ,

thanks for clarification! But first I need to point that there is  a little a mix-up.

That what you are asking, I believe, it is not about a thingworx event but this is an event based on the twx data which has binding   to a particular Studio widget. That is the event which based on the selection in UI when selecting an item of  the widget. So, when a service does not have binding you will see that this element are empty / or do not have any values

So the question here is how to track the event / the select on the Studio side

Let consider here an example with the service GetFileListing (Repository Thing) :

 

2020-06-04_13-41-54.jpg

 

So, we can bind the service e.g. all Items - to a list property in a list widget and the different selected items to another widget / to the text properties:

 

2020-06-04_14-50-07.jpg

 

When  we test it we will get on select the value in the different widgets as shown:

 

2020-06-04_13-40-39.jpg

One possible thing is to read simple these values also in case if they are not visible. Possible is to bind them to an parameter ( or you can bind directly the Current selected Item of service to an application parameter and track the parameter change via the $watch construct:

 

$scope.$watch("app.params['SelItemPath']", function (newValue, oldValue, scope) {
console.log("Old Value -befor it was changed =" + oldValue); 
//! it could be undefined first time called
console.log("new Value -after it was changed =" + newValue); 
//prints the current $scope (copy) object passed to the $watch construct
// pay attention it has no $ !
console.warn(scope);
})
///////////////////////////////////////////////

 

2020-06-04_15-18-30.jpg

 But of course you can use the twx.app.fn.clickItemInRepeater() callback what you can defined in the javaScript of the view (e.g. Home.js). When we click on the item the sample function will print to the console as shown in the picture above

 

 

//==================
twx.app.fn.clickItemInRepeater = function()
{
 console.log("twx.app.fn.clickItemInRepeater()");
 const args = Array.from(arguments);
for(i=0;i < args.length; i++)
 { if( isObject(args[i]) )
 		{console.log("Object::args["+i+"]=>>"); console.warn(JSON.stringify(args[i]));}
 else
 		{console.log("primitive::args["+i+"]=>>"); console.warn(args[i]);}
 } 

};

 

 

Here the first argument (args[0] ) contains as object (json) the selected data set

 

L
lschier5-Regular Member
5-Regular Member
February 19, 2022

Hi Velkumar,

when googling for a solution for my challenge i found your thread. You have gotten some high effort and useful replies. However for me i was looking for a simpler solution and after making it work i want to log it in here for future people looking for a way to use something like the "value changed" event of a widget to trigger code.

 

By adding a watcher on the "value" parameter of a list (or any other widget with corresponding properties) you can execute code on change of that property:

 $scope.$watch("view.wdg['inspection-dropdown'].value", function (newValue, oldValue, scope) {
 console.log("Value Change");
 });
BR,
Lukas
Terms & ConditionsCookie settingsAccessibility statement