AnsweredAssumed Answered

Display or hide elements base on value user selects in an entitlement table

Question asked by Sriranjani Krishnaswamy

on Dec 9, 2016
Latest reply on Jul 22, 2018 by Boris Lekumovich

Like • Show 1 Like1
Comment • 9

Is there a way to hide or display elements in the request form based on a item selected in a entitlement table. For example if I have an entitlement table with three items a,b,c. If the user select a, I need to show a text field to get the phone number.

2 people also have this question

Outcomes

9 Replies

Marco Sannino Dec 12, 2016 3:40 AM
Mark Correct
Correct Answer
As far as i know it's not possible by default but i did it using javascript block and navigating the dom. I attached an event on the table checkboxes and onclick() i navigate the dom to take the checked elements. Maybe in these days i'll start a discussion with the code.

Marco Sannino
Moviri SpA
Milan, Italy
Like • Show 0 Likes0
Actions
Sriranjani Krishnaswamy Dec 12, 2016 10:57 AM
Mark Correct
Correct Answer
Hi Marco,

Thank you for your response. As always I have to get this implemented right away, could you please share you javascript code?
Like • Show 0 Likes0
Actions
- Marco Sannino @ Sriranjani Krishnaswamy on Dec 12, 2016 2:03 PM
  Mark Correct
  Correct Answer
  Hi Sriranjani,
  at the moment i'm very busy so a discussion where i explain all the contents is not possible for me. The code is attached below, if you have some question, i'll respond.
  My use case was to calculate the total of a column only where the rows(Entitlement) were selected
  
  var t = document.getElementById('YOUR-ENT-TABLE_table');
  var c=0;
  r = t.getElementsByTagName('tr');
  for (var j=0, l=r.length; j<l; j++){
  ce=r[j].getElementsByTagName('td');
  ce[0].onclick=function(){
  c=0;
  r=document.getElementsByTagName('tr');
  for(var k=0; k<r.length;k++){
  if(r[k].className=="Row_Sel"){
  h=r[k].getElementsByTagName('td');
  for(var u=0,n=h.length;u<n;u++){
  if(!isNaN(h[u].innerHTML))
  c+=parseInt(h[u].innerHTML);
  }
  }
  }
  avform.setValue('ANOTHER_VARIABLE',(c*12).toFixed(2));
  };
  }
  what you'll want to do must be programmed inside the function, you could also define a function in another JS block in order to have more char space, damn 500 char limit
  
  Hope it's useful
  
  Marco Sannino
  Moviri SpA
  Milan, Italy
  1 person found this helpful
  Like • Show 1 Like1
  Actions
  - Ganeshram Dharmarajan @ Marco Sannino on May 24, 2017 7:51 AM
    Mark Correct
    Correct Answer
    Hi @marco sannino,
    I have a simliar query. However, I am not able to extract all the selected rows in the entitlement table when there is a pagination in the entitlement table.
    Example: If I select a row in Page 1 of the entitlement table and when I move to Page 2 of the entitlement table and select a row, I don't get the rows selected from Page 1 using this - "document.getElementsByClassName("Row_Sel")".
    Like • Show 0 Likes0
    Actions
    - Marco Sannino @ Ganeshram Dharmarajan on May 24, 2017 8:03 AM
      Mark Correct
      Correct Answer
      Hi Ganeshram Dharmarajan ,
      since you're working on dom elements(and in js it's right) it's not working because the pagination will exclude the the elements from it. I suggest you to not use impagination if you want to achieve this. I can't imagine a different solution or better you could work adding the selected element to a variable in the form separated by a semicolon and then use it in the workflow parsing it, but depend on what's your goal. Maybe if you explain your needs i can help you.
      
      Regards.
      Like • Show 1 Like1
      Actions
      - Ganeshram Dharmarajan @ Marco Sannino on May 25, 2017 1:41 PM
        Mark Correct
        Correct Answer
        HI @marco sannino
        
        My requirement: This request form is for the requestor to add roles to the users. So there are few fields which are hidden and it appears when certain roles are selected. So I need to check if the requestor selects any of these roles for the hidden fields to be displayed. Below is my code:
        
        //fields that needs to be hidden
        $(field1).hide();
        $(field2).hide();
        
        //function call when an item is selected
        $(MyEntitlmentTable).change(function(){
        var flagnum=0;
        //function call to get the flag number based on the role selection
        flagnum=getRoles();
        if (flagnum == 1)
        {$(field1).show();
        $(field2).show();
        else
        {$(field1).hide();
        $(field2).hide();
        });
        
        function getRoles()
        {
        var flag=0;
        var roles = [];
        
        // these are the roles for which the hidden fields must be displayed when selected.
        var SigRol= ["RoleA","RoleB","RoleC"];
        
        // extacting the rows selected
        var rows = document.getElementsByClassName("Row_Sel");
        for(var i=0; i<rows.length; i++) {
        var role = rows[i].cells[1].innerText; // extracted the Role from the selected row
        roles.push(role);
        }
        for(var i=0; i<roles.length; i++) {
        for (var j=0; j<SigRol.length; j++){
        if (SigRol[j].trim()==roles[i].trim()) // checking if the selected roles are part of the roles defined in variable SigRol
        {flag=1;} // flag = 1 if the selected role matches with the role defined in variable SigRol
        }
        }
        return flag;
        }
        
        The above code works fine. However, I face issues when I select roles in the following scenarios:
        
        1. When I select roles from page 2 of the entitlement table, the line "var rows = document.getElementsByClassName("Row_Sel");" returns the selected roles from page 2 (ignores the selected roles in Page 1).
        
        2. When I select roles after using the search option. It returns the selected roles that is displayed in that page after the search criteria.
        
        3. Also, when I select the checkbox all, it returns all the roles of Page 1 and the roles present in other pages of the entitlement table is ignored.
        Like • Show 0 Likes0
        Actions
        Marco Sannino @ Ganeshram Dharmarajan on May 26, 2017 3:09 AM
        Mark Correct
        Correct Answer
        Hello Ganesh,
        
        As i said and you proved my code works only if the elements are displayed. What i can suggest is to create a hidden custom field where on role click the role name will be written in it. After with another js function you parse the field and display what you need.
        Like • Show 0 Likes0
        Actions
  - CW Moo @ Marco Sannino on Jul 20, 2018 3:40 AM
    Mark Correct
    Correct Answer
    Hi,
    I found that your code is useful. I have a question regarding the code below. Is 'YOUR-ENT-TABLE_table' referring to the business source name or the collector name?
    
    var t = document.getElementById('YOUR-ENT-TABLE_table');
    var c=0;
    r = t.getElementsByTagName('tr');
    for (var j=0, l=r.length; j<l; j++){
    ce=r[j].getElementsByTagName('td');
    ce[0].onclick=function(){
    c=0;
    r=document.getElementsByTagName('tr');
    for(var k=0; k<r.length;k++){
    if(r[k].className=="Row_Sel"){
    h=r[k].getElementsByTagName('td');
    for(var u=0,n=h.length;u<n;u++){
    if(!isNaN(h[u].innerHTML))
    c+=parseInt(h[u].innerHTML);
    }
    }
    }
    avform.setValue('ANOTHER_VARIABLE',(c*12).toFixed(2));
    };
    }
    
    Thanks.
    Like • Show 0 Likes0
    Actions
    - Boris Lekumovich @ CW Moo on Jul 22, 2018 9:37 PM
      Mark Correct
      Correct Answer
      Most likely 'YOUR-ENT-TABLE_table' refers to the variable name of the control type
      
      Like • Show 0 Likes0
      Actions