Question

Hierarchical List- How to select any row on initial load?

I have a Hierarchical list configured to load the information of the nodes in an embedded section. (Display of Details: Embedded Elsewhere)

I want to be able to select any row on initial load of this Hierarchical list. I have an option at design time to select the first row on initial load(Select first row on initial load). Setting the pySelected property at run time on an specific item on the list before loading the screen does not perform the selection and display after the screen renders.

Is there any other property that needs to be set before screen rendering to see the selection of an item other than the first one?

Is there any way to perform the selection programmatically?

Thanks in advance

Correct Answer
June 25, 2019 - 10:57am

Hi, 

This is not recommended ,but if you want to achieve your functionlity you can go through it.

 keep the below code in userworkform and test it :

<script>

 

 $( document ).ready(function() {
    
  setTimeout(function(){ if(document.getElementsByClassName('testClass').length > 0 ) {document.getElementById('$PEmployeeResultsTree$ppyEmployeePL$l1').children[0].click();} }, 3000);

</script>
    
  });

 

where :

testClass need to be given in the parent layout of the hirarichical list (in the advance presentation tab).

and the $PEmployeeResultsTree$ppyEmployeePL$l1 is the id of the row which you want to open by default. This you can get by cheking the DOM. 

let me know for any concerns.

(This might break  if you are using defer load in the current harness.)

 

Comments

Keep up to date on this post and subscribe to comments

Pega
June 25, 2019 - 10:57am

Hi, 

This is not recommended ,but if you want to achieve your functionlity you can go through it.

 keep the below code in userworkform and test it :

<script>

 

 $( document ).ready(function() {
    
  setTimeout(function(){ if(document.getElementsByClassName('testClass').length > 0 ) {document.getElementById('$PEmployeeResultsTree$ppyEmployeePL$l1').children[0].click();} }, 3000);

</script>
    
  });

 

where :

testClass need to be given in the parent layout of the hirarichical list (in the advance presentation tab).

and the $PEmployeeResultsTree$ppyEmployeePL$l1 is the id of the row which you want to open by default. This you can get by cheking the DOM. 

let me know for any concerns.

(This might break  if you are using defer load in the current harness.)

 

June 25, 2019 - 3:14pm
Response to sahuv1

Thanks Sahuv1, 

I have tried the suggested approach. Set the custom css class in a dynamic layout where the control is contained, got the ID of the row from the DOM and in UserWorkForm the following code: 

<script>
  $( document ).ready(function() {    
  setTimeout(function(){ if(document.getElementsByClassName('testClass').length > 0 ) {document.getElementById('$PpyWorkPage$pDomainList$l2').children[0].click();} }, 3000);
    });  
 </script>

No selection happens. I also tried removing the if condition which checks on the class name but the same result. Anything I am missing ?

Also, how can I find the ID of the row programmatically?  I will store the index value of the row I want to display on load in a clipboard property. 

Thanks!

Ronny

Pega
June 26, 2019 - 1:12am
Response to PegasusOne

Hi Ronny,

Please find the attached screenshot for detetcting the ID. Let me know the pega version you are currenlty on.

June 27, 2019 - 8:04am
Response to sahuv1

Hi Sahuv,

The version is 7.4.0

Pega
July 2, 2019 - 12:58am
Response to PegasusOne

Hi, 

I have checked the code for 7.4 too and it is working. 

Try the code first with UI gallery and you might have to increase the time to 6000 ms. 

If there are any console errors in the devtools then let me know about it .