Dynamically Remove Content of Droplists

advanced-prototyping

#1

Hello all!

I´m wondering how I could remove (or maybe add) options dynamically for a droplist. In my case I want to add ways to contact the customer but the rule is that there is always one of a kind. For example I got:

  • E-Mail
  • Mobile
  • Skype
  • Instagram

Each entry is added one by one.

Droplist -> Choose E-Mail
The text field description switches to mail and the user can enter his e-mail and this is displayed in the user profile. So far so good.

If I now “add” another contact method for example Mobile. I don´t want the droplist to display all 4 options but only (mobile, skype, instagram) without E-Mail because this was already added.

Can someone help me there? I can´t get it done.


#2

The content of a droplist cannot be dynamically or programmatically controlled in Axure. The best way to do this is with a repeater, which gives you the ability to sort, filter, add and remove items from a list. If you haven’t used repeaters before you may be in for a long learning curve. It is possible to fairly quickly leverage an existing example, and there are plenty here, if you search the forum for “repeater droplist”. I’m away from my computer just now or I’d search for a good one or make a quick demo for you.

The basic approach is to build your list of 4 items as a repeater widget instead of using a droplist widget, then hide/show it when user clicks the droplist button. When the user successfully adds a contact preference, like email, you would filter the repeater to hide the “E-Mail” row (list item). Then, if the user adds another preference, like Mobile, you’d add a filter to hide that as well, etc.

A different solution would be more of a “brute force” approach, where you could create your standard droplist, then make a dynamic panel (dp) from it, then duplicate the dp states to include all the possible permutations—all 4 items, then all combinations of 3 items, etc. For a list with 4 items, this should be 24 states. Unwieldy, but not impossible. Fairly straightforward logic to show the appropriate dp state when user adds a contact preference.


#3

Here is a quick demo of a custom droplist implemented in a Repeater widget.

Dynamic Droplist As Repeater.rp (55.9 KB)

This file has a Droplist widget that is essentially blank–there is one entry for “Select a contact method”–and placed behind a Hotspot widget–to block any browser-specific behavior with droplist interactions. Instead, the Click or Tap of the hotspot shows the repeater as its “list that drops in.” There is also a group of input fields, one for each possible contact method, which are hidden by default. As contact methods are chosen the input fields show up.

You can inspect the repeater and see how it is set up by clicking into it and looking at the STYLE pane to see its datasheet, and the INTERACTIONS pane to see how an item click is handled. The key thing here is that when a list item (row) is clicked, it adds a filter to the repeater to “filter itself out” thus hiding it from the list (but not deleting it entirely.) This is done by setting a rule of:
[[TargetItem.Mode != Item.Mode]]
…which means “show all rows in which the target row does not have the same text as this row.”
…where “.Mode” is a pointer to the datasheet column named “Mode” for this current row

The “else if” conditional cases test if any of the contact method input fields are shown and shows the “next contact input group” …and labels it based on the currently chosen contact method.

Let me know if you have any questions about details!


#4

You absolutely saved my day! Thanks a lot this works perfectly fine!