fill in a filtered list dynamically

Hello ALL,

I have two list and i want them to be filled dynamically by a method, the first is a normal list and the second is a filtered list.
I have already managed to fill in the first automatically by a client method.
The values of the first list are: A, B, C, since the second list is a filtered list which depends on the first list Then:


If the first list contains A the second filtered list will contain the value 1
If B => 2
If C => 3

below the code I used from a forum with the event onLoad: 

var dropdown = getFieldComponentByName('listeOne');
var teams = aras.IomInnovator.newItem("ItemType", "get");
teams.setAttribute("select", "id, keyed_name");
teams = teams.apply();

listOfTeams = [{
label: '',
value: ''
}];

for (var i = 0, teamCount = teams.getItemCount(); i < teamCount; i++)
{
var team = teams.getItemByIndex(i);
listOfTeams.push({
label: team.getProperty("keyed_name"),
value: team.getProperty("id")
});
}
dropdown.component.setState({list: listOfTeams});

So i want to filter the second list (1,2,3) based on the values in the firsll list (A,B,C)

Is there any way please to dynamically fill in the second filtered list  ?

Parents
  • Hello ALL

    Can anyone help on how to achieve this please ?

  • Hi Mouad

    Can you try the below steps and let me know if it works

    Step 1: Navigate to Administration --> List

    Step 2: Create new list

    Step 3: Navigate to Filter Value

    Step 4: Fill your list values

    Example:

    Step 5: Create New JavaScript Method and copy below code

    var UpdateListValuesAPI = function() {
    var dropdown = getFieldComponentByName('listeone');
    var teams = aras.IomInnovator.newItem("ItemType", "get");
    teams.setAttribute("select", "id, keyed_name");
    teams = teams.apply();
    var listOfTeams = [];
    for (var i = 0; i < teams.getItemCount(); ++i)
    {
    var team = teams.getItemByIndex(i);
    listOfTeams.push({
    label: team.getProperty('keyed_name'),
    value: team.getProperty('keyed_name')
    });
    }
    dropdown.component.setState({
    list: listOfTeams,
    calculatedWidth: '',
    value: listOfTeams[0].value
    });
    };
    UpdateListValuesAPI.prototype.updateSecondList = function() {
    var selectListValue = document.querySelector("input[name='listeone']").value;
    var dropdown2 = getFieldComponentByName('listetwo');
    var values = aras.IomInnovator.newItem("Filter Value", "get");
    values.setAttribute("select", "label,value");
    values.setProperty("filter", selectListValue);
    values.setProperty("source_id", "38EEFD3D9AB749478495D437D9919D7D"); // TO BE REPLACED
    values = values.apply();
    if (values.isError())
    {
    aras.AlertError(values.getErrorString());
    return;
    }
    else
    {
    var listTwo = [];
    for (var i = 0; i < values.getItemCount(); ++i)
    {
    var listVal = values.getItemByIndex(i);
    listTwo.push({
    label: listVal.getProperty('label'),
    value: listVal.getProperty('value')
    });
    }
    dropdown2.component.setState({
    list: listTwo,
    calculatedWidth: '',
    value: listTwo[0].value
    });
    }
    };
    objUpdateListValuesAPI = new UpdateListValuesAPI();

    Step 6: Replace Source_ID with ID of the above created list 

    Step 7: Open Form where your need to use this (example Part Form)

    Step 8: Ensure that form has the listeone and listetwo fields

    Step 8: Add above method in Form Event --> On Load

    Step 9: Create New JavaScript Method and copy below code

    objUpdateListValuesAPI.updateSecondList();

    Step 10: Add this method in field listetwo --> Field Event --> On Focus

    Step 11: Unlock form and test the data

    Thank You

    Gopikrishnan R

Reply Children
No Data