Javascript – PowerApps Model Driven App: How to Prevent Reselecting Dropdown Options

To create a dynamic dropdown list where previously selected teams are disabled and prevent re-selection, we need to adjust your JavaScript logic to update dropdowns effectively. Since PowerApps does not allow us to remove or disable options directly in dropdown lists, we’ll need to filter the options in each dropdown based on the selectedTeams array and then set only the filtered list as available.

Here’s a revised approach with explanations for each part:

1. Store Selections: Track selected teams in an array.
2. Filter Options: Each time a team is selected or deselected, filter the options for each dropdown.
3. Reset Options: If a team is deselected, re-enable it in other dropdowns.

Updated Code

Below is a modified version of your code that implements these principles:

let selectedTeams = [];

// Function to handle team selection changes
function onTeamChange(executionContext, fieldName) {
    const formContext = executionContext.getFormContext();
    const selectedValue = formContext.getAttribute(fieldName).getValue();

    // If a value was deselected, remove it from selectedTeams
    if (selectedValue === null) {
        selectedTeams = selectedTeams.filter(team => team !== formContext.getAttribute(fieldName).getInitialValue());
        formContext.ui.clearFormNotification("duplicateTeam");
    } else {
        // Check if the team is already selected in another dropdown
        if (selectedTeams.includes(selectedValue)) {
            formContext.ui.setFormNotification("Cette équipe a déjà été choisie.", "ERROR", "duplicateTeam");
            formContext.getAttribute(fieldName).setValue(null); // Reset selection to prevent duplicate
        } else {
            formContext.ui.clearFormNotification("duplicateTeam");
            selectedTeams.push(selectedValue); // Add the new selection to selectedTeams
        }
    }

    // Update the options for all dropdowns
    updateDropdownOptions(formContext);
}

// Function to update options for each dropdown based on selections
function updateDropdownOptions(formContext) {
    const allDropdowns = ["teamOptionSet1", "teamOptionSet2", "teamOptionSet3", "teamOptionSet4"]; // Names of the dropdown fields

    allDropdowns.forEach(fieldName => {
        const dropdown = formContext.getAttribute(fieldName);
        const selectedValue = dropdown.getValue();
        const options = dropdown.getOptions();

        // Filter options based on the selected teams, allowing the current selection to stay available
        const availableOptions = options.filter(option => 
            !selectedTeams.includes(option.value) || option.value === selectedValue
        );

        // Remove existing options and add only the available ones back
        dropdown.clearOptions();
        availableOptions.forEach(option => dropdown.addOption(option));
    });
}

Explanation of Key Changes

1. Track Selections: selectedTeams is an array that tracks all selected team values across dropdowns.
2. onTeamChange Logic: When a team is selected, the function checks if it’s already in selectedTeams.

• If it’s a duplicate, it resets the selection and shows a notification.
• If not a duplicate, it adds the new selection to selectedTeams.
• If a team is deselected (i.e., the value is null), it removes that team from selectedTeams.

3. Filter Available Options:updateDropdownOptions loops through each dropdown and filters the options to exclude any value in selectedTeams, except the currently selected option for that dropdown.
   The clearOptions() and addOption() methods are used to reset options.

Notes
clearOptions() and addOption() are necessary because PowerApps doesn’t support direct modification of existing options in the dropdown.
If a dropdown’s current selection is allowed to stay, even if it’s part of selectedTeams, so it doesn’t get unintentionally disabled.