PowerApps 模型驱动应用程序：如何防止重新选择下拉选项

Question

我目前正在开发一个 PowerApps 项目，其中有几个下拉列表（选项集），仅允许用户选择每个团队一次。我想阻止用户在选择团队后重新选择团队。但是，我遇到了一些问题。 这是我的代码片段：

let selectedTeams = [];

// Codes pour les équipes


function onTeamChange(executionContext, fieldName) {

const formContext = executionContext.getFormContext();

const selectedValue = formContext.getAttribute(fieldName).getValue();

// Si une valeur a été désélectionnée

if (selectedValue === null) {

// Retirer l'élément désélectionné de \selectedTeams``

selectedTeams = selectedTeams.filter(team => team !== fieldName);

formContext.ui.clearFormNotification("duplicateTeam");

return;

}

// Vérifie si l'équipe est déjà dans la liste des équipes sélectionnées.

if (selectedTeams.includes(selectedValue)) {

formContext.ui.setFormNotification("Cette équipe a déjà été choisie.", "ERROR", "duplicateTeam");

formContext.getAttribute(fieldName).setValue(null); // Réinitialise la sélection pour éviter le doublon.

} else {

formContext.ui.clearFormNotification("duplicateTeam");

selectedTeams.push(selectedValue); // Ajoute la nouvelle sélection dans \selectedTeams`.`

}

// Met à jour les options des dropdowns

updateDropdownOptions(formContext);

}

function updateDropdownOptions(formContext) {

const allDropdowns = ["teamOptionSet1", "teamOptionSet2", "teamOptionSet3", "teamOptionSet4"]; // Noms des champs

allDropdowns.forEach(fieldName => {

const dropdown = formContext.getAttribute(fieldName);

const options = dropdown.getOptions(); // Récupère toutes les options de l'option set

// Réinitialise les options de l'option set

options.forEach(option => {

// Si l'option est dans la liste \selectedTeams`, désactivez-la`

option.disabled = selectedTeams.includes(option.value);

});

// Met à jour le dropdown avec les options modifiées

// Note: Dans PowerApps, vous ne pouvez pas appeler setOptions. Vous devez le gérer par logique utilisateur.

});

}

我有一个 JavaScript 函数，在每个下拉列表的 onchange 事件上运行。目标是检查选定的团队是否已被选择，如果是，则防止重新选择。

我将所选值存储在数组中，但在做出选择后清除选项时遇到问题。

我面临的问题：选择后项目不会从下拉列表中消失。 问题： 如何修改我的代码以确保从下拉列表中正确删除所选选项？

任何见解、代码示例或指针将不胜感激！预先感谢您的帮助！

我将所选值存储在数组中，但在做出选择后清除选项时遇到问题。

Answer 1

要创建一个动态下拉列表，其中先前选择的团队被禁用并防止重新选择，我们需要调整您的 JavaScript 逻辑以有效更新下拉列表。由于 PowerApps 不允许我们直接在下拉列表中删除或禁用选项，因此我们需要根据

selectedTeams

数组过滤每个下拉列表中的选项，然后仅将过滤后的列表设置为可用。

这是修改后的方法，并对每个部分进行了解释：

1. 存储选择：跟踪阵列中选定的团队。
2. 过滤选项：每次选择或取消选择团队时，过滤每个下拉列表的选项。
3. 重置选项：如果取消选择某个团队，请在其他下拉菜单中重新启用它。

更新代码

下面是实现这些原则的代码的修改版本：

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));
    });
}

主要变更说明

1. 跟踪选择：selectedTeams 是一个数组，用于跟踪下拉列表中所有选定的团队值。

2. onTeamChange

   逻辑：选择团队时，该函数会检查该团队是否已在 selectedTeams 中。

• 如果重复，则会重置选择并显示通知。
• 如果不重复，则会将新选择添加到 selectedTeams。
• 如果取消选择某个团队（即该值为空），则会从 selectedTeams 中删除该团队。

3. 过滤可用选项：

   updateDropdownOptions

   循环遍历每个下拉列表并过滤选项以排除 selectedTeams 中的任何值，但该下拉列表当前选择的选项除外。

   clearOptions()

   和

   addOption()

   方法用于重置选项。

注意事项

clearOptions()

和

addOption()

是必需的，因为 PowerApps 不支持直接修改下拉列表中的现有选项。 如果允许保留下拉列表的当前选择，即使它是 selectedTeams 的一部分，那么它就不会被无意中禁用。