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

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

how to use add data filter?

wxywxy
5-Regular Member

how to use add data filter?

 

javascript

 

ItemList = [
{
"checked":false,
"title": "title0"
},
{
"checked":false,
"title": "title2"
},
{
"checked":true,
"title": "title2"
},
{
"checked":false,
"title": "title3"
}
];

 

$scope.app.params["ItemList"] = ItemList;

 

 

I made 2D Widget

 

Left Panel

 + repeater

   + checkbox

 

i bind ItemList to repeater

 

checkbox Label is {{item.title}} 

 

it's well display title

 

i bind ItemList to checkbox Value

 

and How to write Add Filter?

 

Can I Change CheckBox Value By DataList

 

Filter Body

return (  HowToget( item.checked ) === true ? true : false )

 

 

 

 

 

3 REPLIES 3

Hi @wxywxy ,

 

I do not think that this is possible in this context (or at least it not trivial )

In your case you will set a list (array of json’s) directly to the repeater.

You can put in the text field of the label. {{item.<propertyName>}} where <propertyName> is the name of the field in the array that is to be displayed in the label.  In this case you will see the value in the field but unfortunately, I did not find a way to access this value on runtime when the table is created and also it was not possible to access this in a filter

The filter is text which is evaluated later in a filter function. The problem only the value is passed to the filter and there is no possible to access variables outside (e.g. $scope in not valid there)

For example I have an simple project with 2 repeater.

The one repeater with widget name “repeater-1” use a data from a TWX service

The second repeater used data from an app parameter (your example) containing a Jason list (array)

So when we  can see the difference:

 

...
$scope.$on('$ionicView.afterEnter', function()  {
  $scope.app.params["ItemList"] = ItemList;
  
  console.warn($scope.view.wdg['repeater-1'])
  console.warn($scope.view.wdg['repeater-2'])
...
});

 

2019-10-29_13-49-14.jpg

So in the one data set  we do not have an info about the current data set and could used it directly to assigneed a value to a repeater element. 

Only the syntax  {{item.<propertyName>}} is working on the fly to to replace the text with a value of  a property when the repeat widget is displayed. 

In a filter we have only access to the "value" variable which means here the whole list.

For example:

2019-10-29_14-17-07.jpg

 

the follwoing filter definiton:

 

{ 
let obj= value;
let nameIn='title';
let nameOut='checked';
let val=  'title0'; // this will return false
//let val=  'title2'; // if this line is used - returns true

for (var i = 0; i < obj.length; i++){
  // look for the entry with a matching `code` value
  if (obj[i][nameIn] == val){
    return obj[i][nameOut];}
                                    }                                   
};

 

this filter will work fine and will return false

If we replace the line :

let val=  'title0';
by
let val=  'title2';

 

the checkbox wil be selected . 

Unfortunately we can not use a syntax like:

 

val= $scope.view.wdg['repeater-1'].text;
or
let val=    {{item.title}} ;
or 
let val=   item.title ;
and etc.

it always will lead to error. Also the $scope is not defined inside the filter.

Also if we try to use a binding of other field which is set using the syntax  {{item.<propertyName>}} - there is also no success:

2019-10-29_14-23-00.jpg

 

What should be here the possible solution/ workaround:

- to use instead of  list from javaScript a twx service. So you can simple define such service which should  send json fille to the External data:

2019-10-29_14-31-24.jpg

Where the twx service is defined as:

var data=  [
{ id_num: 0, display: "France", value: "Paris", checked:false },
{ display: "Italy",  value: "Rome"  },
{ display: "Spain",  value: "Madrid"},
{ display: "UK",  value: "London"},
{ display: "Germany",  value: "Berlin"},
{ display: "Norway",  value: "Oslo"},
{ display: "Switzerland",  value: "Bern"},  
{ display: "Greece",  value: "Athens"},
{ display: "France",  value: "Paris"}

];
 

//get the first row for the dataShape defintion
var FirstRowJson  =data[0];
//create an empty Info Table
var resInfoTable = { dataShape: { fieldDefinitions : {} }, rows: [] };
//defines the dataShape

for(var prop in FirstRowJson)
{
    if(FirstRowJson.hasOwnProperty(prop))
    {  
      if(prop == "id_num") 
      resInfoTable.dataShape.fieldDefinitions[prop] = { name:prop, baseType: 'INTEGER' };
       else if(prop == "checked")  
      resInfoTable.dataShape.fieldDefinitions[prop] = { name:prop, baseType: 'BOOLEAN' };
      else  
      resInfoTable.dataShape.fieldDefinitions[prop] = { name:prop, baseType: 'STRING' };
    }  
}
//add the rows to the InfoTables
for(i in data){ resInfoTable.rows[i]=data[i]; //copy one to one
                resInfoTable.rows[i].id_num=i;
                 resInfoTable.rows[i].checked=false;
              } 
//
result = resInfoTable;
 

 

I used such service here for the repeater-1 and it worked fine.

Of course, this will work only if you have a TWX instance which allow access of the TWX database.

Otherwise we can try to simulate the creation of such TWX service only in Studio angular environment  without having TWX or we can try to listen to the a repeater row event - but unfortunately I  did not find a way how to do this yet.

Thank you for the fast answer.

Hi @wxywxy1 ,

 

I think , I found an option  where we can solve the original problem using a filter but it is not very 'clean' way to do this , but it worked fine in this case.

So the solution is based on a global variable (window.my_variableX) and I docount every filter call and respectively will increment the variable and will compore with the list size. The value of the checkbox here  is the list Parameter ItemList :

 

ItemList = [
{
"checked":false,
"title": "title0"
},
{
"checked":false,
"title": "title1"
},
{
"checked":true,
"title": "title2"
},
{
"checked":false,
"title": "title3"
}
];
//======   set the json to the parameter ItemList after ViewStart ====
$scope.$on('$ionicView.afterEnter', function()  {
  $scope.app.params["ItemList"] = ItemList;
})

 

  Now I will   set a binding between Studio parameter "ItemList" and the value of the checkbox with a filter:

 

2019-10-30_14-40-15.jpg

 

And here the following definition of the filter:

 

 if(!window.my_filter) window.my_filter=1;
 else {
 if(window.my_filter>= value.length) window.my_filter=1;
  else {window.my_filter++;} }
                            
  console.log("Filter i="+(window.my_filter-1)+" max length="+value.length)
  console.log( "title:=" +value[window.my_filter-1]['title'] +"  chcked:="+value[window.my_filter-1]['checked']);
 return(value[window.my_filter-1]['checked']);

 

there the console.log was only for debugging and should be removed from the real filter. Also for each filter the global variable should be different (because we can face the problem that more different filters will increment the same global variable in the same time and we will have a very erroneous results )

So, when I test it in preview mode:

 

2019-10-30_14-48-04.jpg

Top Tags