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 ?
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
