Skip to main content
D
drieder1-Visitor
1-Visitor
September 17, 2019
Solved

Pass selected Listelement to Javascript function

  • September 17, 2019
  • 1 reply
  • 2896 views

Hello everyone,

 

I have a list in my AR-Experience which contains some names. I recognized that you can call a javascript function when a element is clicked. 

 

How do I pass the value of the selected item to the javascript aswell? I tried to define the list itself as an application parameter but I can't find nothing about a method like "getSelectedElement" or similar.

 

Any help is appreciated very much!

 

Best Regards,

Dominik

Best answer by drieder

Actually found out the following:

 with

var selectedValue = $scope.app.view['Home'].wdg['list-1']['list']['current']['columnName']

where "list-1" is the name of the list widget

and "columnName" is the columnValue you want to access for the selected Item

1 reply

R
RolandRaytchev21-Topaz I
21-Topaz I
September 17, 2019

Hi @drieder ,

the following sample project:

 


2019-09-17_19-55-45.gif

where we have one applicaiton parameter named "LIST" and one select /list widget "select-1"

There is also a  binding between parameter LIST and the  Widget property "LIST" of "select-1"

There was   added to the Select widget event "valaue selected" -> the callback function  "checkSelection();"

 

Then added the following javaScript code:

//////////////////////
//this function fill the list- it set the list to the parameter LIST
// and on other hand the parameter LIST has binding to the List property of "select-1"
$scope.populateModelList = function() {

 $scope.app.params.LIST = [
 {
 display: "Display-1",
 value: "Value-1"
 },
 {
 display: "Display-2",
 value: "Value-2"
 },
 {
 display: "Display-3",
 value: "Value-3"
 },
 {
 display: "Display-3",
 value: "Value-5"
 }
 ];
 
}
 
//$scope.populateModelList();
//call the init of the list after the view was displayed
$scope.$on('$ionicView.afterEnter', function() {$scope.populateModelList();});
//this is the function for the value selection event of the widget "select-1"
$scope.checkSelection = function(){ 
 var selectedValue= $scope.app.view['Home'].wdg['select-1']['value'];
 
 var List = $scope.app.view['Home'].wdg['select-1']['list'];
 for (i = 0; i < List.length; i++){
 if( selectedValue == List[i]['value'])
 {console.log("Selected was Display="+List[i]['display'] +" Value="+List[i]['value'])
//handle somehow the slected item of the lists here both display and value
}
 
 }
}

 

Tested then in preview mode:

 

2019-09-17_19-53-34.gif

    D
    drieder1-VisitorAuthor
    1-Visitor
    September 18, 2019

    Hello @RolandRaytchev ,

     

    thank you for your detailed answer! I was able to run this. But now my next question is:

    How to retrieve the selected Value, when the List is an Infotable Property of a thing?
    This infotable only has one column with the name "filename". 

    Since you constructed the list by yourself you defined the field "value", but how is the field defined for Infotables?

     

    Thank you!

     

    Best Regards,

    Dominik

     

    Edit:

    This is how my current List looks like. When clicking on one of the items I can call the JS function from the "ItemClick" event. Then I need to access the displayed value of the selected item (e.g test.pdf) in the JS-function

    screenshot.PNG

    R
    RolandRaytchev21-Topaz I
    21-Topaz I
    September 18, 2019

    Ok , I checked it and  I think it is  solved for you.

    Yes, I did not pay attention, that you used a list widget and not the select widget.

    I tested with a service e.g. here readJsonTestShort which returns a InfoTable:

    2019-09-18_18-41-29.gif

    Then added the service as External Data:

     

    2019-09-18_18-38-03.gif

     

    And it is correct - then you can find the object of the current selection in the :

    $scope.app.view['Home'].wdg['list-1'].list.current

    Which contains the whole object for the fields with values for the selected row - dataset of the used InfoTable

    In case that you need the number i of the selected row you can use the following construct in the function called by the ItemClick event e.g. $scope.testList()

     

    $scope.testList= function()
{

var current_object=$scope.app.view['Home'].wdg['list-1'].list.current
// this is json for the selected row

for(i=0;i<$scope.app.view['Home'].wdg['list-1'].list.length; i++)
{
 if(current_object.$$hashKey==$scope.app.view['Home'].wdg['list-1'].list[i].$$hashKey)
 {
 console.error("I object in the list was selected i="+i)
 }
    }}

    2019-09-18_18-40-02.gif

    Terms & ConditionsAccessibility statement