Skip to main content
15-Moonstone
June 23, 2022
Solved

list widget js api

  • June 23, 2022
  • 1 reply
  • 2833 views

Hello, I want to dynamically fill a list widget with some results from js code elaborations but I can't find how to properly set up the list (JSON?) and bind the app params to the list attributes. Is there some useful documentation on this widget? Thank you!

Best answer by RolandRaytchev

OK, but so far I know the working way should be similar or the same. So found in some old source something like this:

 

$scope.populateModelList = function() {

 $scope.my_json = [
 {
 display: "Suspension Assembly",
 value: "app/resources/Uploaded/Suspension_Low.pvz"
 },
 {
 display: "Arm Assembly",
 value: "app/resources/Uploaded/Arm_Assembly_Low.pvz"
 },
 {
 display: "Front Hub Assembly",
 value: "app/resources/Uploaded/Front_Hub_Low.pvz"
 },
 {
 display: "Shocker Assembly",
 value: "app/resources/Uploaded/Shock_Absorber_Low.pvz"
 }
 ];
 
console.warn( $scope.my_json );
$scope.view.wdg['list-1']['list'] = $scope.my_json ; 
 $scope.view.wdg['list-1']['label'] = 'display' ;
twx.app.fn.addSnackbarMessage("assemblyList was populated","twLogo");
}
 

$scope.$on('$ionicView.afterEnter', function() {$scope.populateModelList();})

 

where the widget was a list

1 reply

21-Topaz I
June 23, 2022

Hi @GianVal ,

could you clarify what means dynamically this case- is the list of widget should be selected dynamically or the data. so reading a json file and setting using a file e.g. json data  is no problem . so far I know there is no general document how to do this but we can find any small example in the different help sources. I did in the past some similar issues in the past. E.g. setting from json file the value of repeater (mobile project test_repeater_dynamic-Elements.zip ) Here the list should be a dynamic value -received from json file. Ok here in this example the json file is fix but it could be also received form any where as json file form upload folder or form TWX repository. 

2022-06-23_11-54-52.jpg

 

 

In the second example  here is shown how to read  a json file and setting of values of components widget values (without explicit widget definitions)   (HL attached project propSetComponetsHoloLensExamleCommunty.zip)

2022-06-23_11-49-20.jpg 

of course similar to this  - it will work when we have already widgets e.g. the following code:

 

//
//Global Variables			
var pjson ="properties.json"; //JSON File Name without extension
$scope.jsonData={}; //global $scope variable

gotJSON=function(data){
 try{
$scope.jsonData=JSON.parse(data);
 console.warn( JSON.stringify($scope.jsonData))
 $scope.setMutipleProps($scope.jsonData)
 } 
catch(wrong){ console.warn(wrong);}

}
doRead=function (jsonFile){
fetch(jsonFile)
 .then(response=>response.text())
 .then(data=>gotJSON(data))
}

$scope.Init=function() {
doRead('app/resources/Uploaded/'+pjson);
}
/////
$scope.$on('$ionicView.afterEnter',function(){
 console.log("$ionicView.afterEnter was called");
$scope.Init();}) //event: when 2d View loaded
//the code will read the complette JSON File and
//assignee it to a jsonData global variable
//func will set mutliple widget properties according JSON
$scope.setMutipleProps = function(obj){

 Object.keys(obj).forEach(function (item) {
 for(var prop in obj[item]) {
 $scope.view.wdg[item][prop]=obj[item][prop]; 
 //print the setting for debugging 
							console.log("==>$scope.view.wdg["+item+"]["+prop+"]="+obj[item][prop] )
 } 
 							})
 };
 
 

 

This sample code will read a json file with widgets (explicit defined widgets) definition form json file (here example properties.json -attached /zip) and will try to set the properties of widget there

{"button-1":{"class":"button1"},"button-2":{"class":"button1"},"button-3":{"class":"button1"},"3DLabel-1":{"visible":false,"text":"This is PTC Remote Control Model"}} 
GianVal15-MoonstoneAuthor
15-Moonstone
June 23, 2022

sorry, let me clarify. I meant the LIST widget, the widget named LIST. In general, in my js code, I want to assign values to the list items of this widget deriving from some other data. I hope the question is clearer.

21-Topaz I
June 23, 2022

ok, please check $scope.populateModelList  in the demo project (DynModelChangeUIcommunity.zip)

So it set on start the list property and do some other this but not relevant to the question