How to select all the option in the multipledropdown field by default and also provide "select all" option in dropdown

Certified Associate Developer

Hi All,

i want to know , how to configure the below logic

BY default all the option should be selected. and also in dropdown i can have the option to deselect all /select all along with all the options.

Please help me how i can go about this

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    With some saveInto manipulation, we can accomplish the original use case request of having an item in the dropdown that overrides the user's existing choices in a context-sensitive manner (here, it selects all entries EXCEPT when all entries are all selected, in which case the behavior changes to deselecting all).

    With this, I'd caveat that a better user experience would be to use either a checkbox or a dynamic, rich-text-field-based link to add this behavior near the dropdown, because even when the dropdown works fine it's a little unintuitive in terms of User Experience.  But it's an interesting exercise so I'm posting my results here for everyone's review.

    Some additional notes: instead of hardcoding the language names and codes over and over gain, I start out by creating a map array of each language and its corresponding code/label.  This allows us to quickly set the default value to all extant options, plus to set another variable that stores what the "all selected" value looks like.




    a!localVariables(
      local!languageChoices: {
        a!map(code: "en_US", name: "English"),
        a!map(code: "es_ES", name: "Spanish"),
        a!map(code: "fr_FR", name: "French"),
        a!map(code: "de_DE", name: "German")
      },
      local!allChoiceCodes: local!languageChoices.code,
      
      local!selectedLanguages: local!allChoiceCodes,
      
      local!areAllCurrentlySelected: a!isNullOrEmpty(symmetricdifference(local!allChoiceCodes, local!selectedLanguages)),
      
      
      a!multipleDropdownField(
        label: "Language",
        instructions: "Which language(s) are you proficient in?",
        choiceLabels: {
          local!languageChoices.name,
          if(
            local!areAllCurrentlySelected,
            "[Click to Deselect All]",
            "[Click to Select All]"
          )
        },
        choiceValues: {
          local!languageChoices.code,
          "all"
        },
        value: local!selectedLanguages,
        saveInto: {
          a!save(
            local!selectedLanguages,
            if(
              contains(save!value, "all"),
              if(
                local!areAllCurrentlySelected,
                tostring({}),
                local!allChoiceCodes
              ),
              save!value
            )
          )
        },
        placeholder: "Select a language",
        searchDisplay: "ON"
      )
    )

Reply
  • 0
    Certified Lead Developer

    With some saveInto manipulation, we can accomplish the original use case request of having an item in the dropdown that overrides the user's existing choices in a context-sensitive manner (here, it selects all entries EXCEPT when all entries are all selected, in which case the behavior changes to deselecting all).

    With this, I'd caveat that a better user experience would be to use either a checkbox or a dynamic, rich-text-field-based link to add this behavior near the dropdown, because even when the dropdown works fine it's a little unintuitive in terms of User Experience.  But it's an interesting exercise so I'm posting my results here for everyone's review.

    Some additional notes: instead of hardcoding the language names and codes over and over gain, I start out by creating a map array of each language and its corresponding code/label.  This allows us to quickly set the default value to all extant options, plus to set another variable that stores what the "all selected" value looks like.




    a!localVariables(
      local!languageChoices: {
        a!map(code: "en_US", name: "English"),
        a!map(code: "es_ES", name: "Spanish"),
        a!map(code: "fr_FR", name: "French"),
        a!map(code: "de_DE", name: "German")
      },
      local!allChoiceCodes: local!languageChoices.code,
      
      local!selectedLanguages: local!allChoiceCodes,
      
      local!areAllCurrentlySelected: a!isNullOrEmpty(symmetricdifference(local!allChoiceCodes, local!selectedLanguages)),
      
      
      a!multipleDropdownField(
        label: "Language",
        instructions: "Which language(s) are you proficient in?",
        choiceLabels: {
          local!languageChoices.name,
          if(
            local!areAllCurrentlySelected,
            "[Click to Deselect All]",
            "[Click to Select All]"
          )
        },
        choiceValues: {
          local!languageChoices.code,
          "all"
        },
        value: local!selectedLanguages,
        saveInto: {
          a!save(
            local!selectedLanguages,
            if(
              contains(save!value, "all"),
              if(
                local!areAllCurrentlySelected,
                tostring({}),
                local!allChoiceCodes
              ),
              save!value
            )
          )
        },
        placeholder: "Select a language",
        searchDisplay: "ON"
      )
    )

Children
No Data