Scenario, I have a field with 20+ possible values where the user needs to select 1, if I render all 20+ the screen scrolls up degrading the user experience.
Ideally, I would like to present 10 items at a time and an extra button so the user can select "more" or "next"/"prev", does anyone have a reference implementation on how this can be done in formflow?
(I guess it involves some validation and reprompt logic where I update the underlying values for the selection but I'm not sure how to go about it)
Thanks
I have not tried this specific scenario, but I can think of two ways to do it.
You could split your field into two fields, i.e. one which has an
enumeration of the first 10 and a "more" choice and then a second
field with the next 10. The second field would be conditional on
the first field having a "more" value. This is the simplest method.
The second way would be to make use of PromptAsyncDelegate and ValidateAsyncDelegate. The PromptAsyncDelegate would split up long lists of results to add a "More" button. You would write a ValidateAsyncDelegate which on "more" would return a ValidateResult that says the value is not valid and which has a FeedbackCard in it with the second batch of buttons. You could either build it in the code or you some private state to pass the extra buttons.
Please let us know which approach works best for you.
Related
I use the latest ver of .Net Maui. In the scenario there is ObservableCollection of items bound to ItemsSource's CarouselView. User is supposed to do some actions upon the current item to make it "valid" in order to be able to move to the next one. CarouselView should block user from swiping card to the next one until the current one is valid, and valid state is defined by properties of the item.
First thing that came my mind was to subscribe for one of Scroll or PositionChanged event and cancel the action propagation, but I do not think the events are cancelable, did not find it in the even arguments. Second less desirable way to implement is to add items dynamically to the ObservableCollection of items once current item got valid. It won't be able to go to the next just because the current is always the last. It though seems to be a bit of a hacky way to resolve this, and I would prefer to implement it on a view level rather than model level (adding items on the fly). So if you know more direct ways to get it implemented please let me know. Thanks.
Update: I'd like users to be able to swipe to all previously handled items (all valid), getting back and forward, but only for valid cards.
Set the property IsSwipeEnable to false when the current item is not yet valid.
From docs
IsSwipeEnabled, of type bool, which determines whether a swipe gesture will change the displayed item. The default value is true.
I want to use <p:focus> in two ways:
1. Move to the input field if that field fails validation, i.e. is required
2. If on a page that has an input field that is visible when the page loads then move to that field. But if the page has a lot of introduction text and the input field is way down the page then don't move to the field as the user has to then scroll up to read the start of the page.
How can I have both cases handled? It seems that if I have <p:focus> I cannot avoid the page scrolling automatically way down the page if the first input field is there but I also want to move to the required field if a value has not been given.
Thanks
First, don't use the attribut for to select the default focused element.
Second, you only have to update your p:focus, and it will automatically select the first field where error occured.
For 1: See the answer above or http://www.primefaces.org/showcase/ui/misc/focus.xhtml
For 2: The only solution I know of that can achieve this is to not use the <p:focus/> and implement your own focus code (not to difficult). Detect the position of the first input and if it is far down, don't 'focus' it.
In MVC-3/Razor, I need to create a page which will have five set of controls. Each set will have a drop-down and a text box. User will select an option from drop-down and then provide some feedback on text box.
When the view is shown very first time, I only have to enable controls in first set. Whereas all controls in 4 other sets should be disabled. Once user perform action in first set of controls (select optino from drop-down and enter in text box), the second set should become enable now, whereas other set of controls should still be disbaled. The data shown in this second drop-down is dependent upon what user has selected in first drop-down. Once user complete action in this second set, the data in third drop-down will depend upon whatever user selected in first and second drop-down etc.
I am a web-form aspx developer and not sure what will be the best way of designing this in MVC-razor world (because there is not view state etc).
Step 1)
What needs to be clarified is what will cause the other “sets” to be enabled?
Is it after the user has selected an item in the dropdown
OR
Is it after they have entered some text in the textbox?
What also needs to be clarified is if you have a dropdown AND a textbox are they both enabled at the same time or is the textbox only enabled after you’ve selected an item in the dropdown?
Once you’ve got that figured out, move on to the next step.
Step 2)
Do the users need to visually see the 4 sets from the beginning (disabling the 3 other sets) or can you simply show the other sets (on the fly) once the previous one has been successfully filled?
Depending on the answers, this may vary your approach.
As for me, the way I’d do it is simply have/show one set that loads at the beginning.
Once the user has selected an item from the dropdown, I would make an AJAX call passing along the selected item and get back a list of values for the second dropdown.
Then, using jQuery, I would duplicate the row (or div) of the first set all while changing the values in the second dropdown box.
Repeat process for when an item is selected in the second dropdown.
But wait! There’s more!!!
Let’s assume you’ve reached the third set. What if the user decides to change the value in the first dropdown? What are your requirements if that happens? Should you remove all other sets and start back at square one? I guess so…
Since we are not aware of the full set of specs for your tasks, we can only assume stuff and this may (or not) be the best path to take.
Duplicating a row (or a div) using jQuery is quite fun and performance wise, it’s nice.
Keep in mind, you will have to give a different ID to your controls (dropdown + textbox) so when you submit the form, you could use the FormCollection to get those dynamically generated controls.
I have a list of brand names for a particular product in the db. I can either display it on the screen using a drop down or and auto-suggest textbox.
I love the user experience of the auto-suggest textbox. But, is it right to use it here?
I would also want to know the best scenario to use it?
I think it depends on the number of items you need to display. If there are only a few, it gives hardly any advantage. But when there are many items, you can use it to filter out a lot of items, until there are only a few left. This makes finding the right item easier.
The Auto-Suggest textbox should be used when the user will be entering in a new piece of data MOST of the time... and the dropdown box should be used when the user will be entering repeated data MOST of the time.
Can you offer both? One of the products I worked on had a drop down list of brand names but allowed the user to type free text as well. The drop down list would narrow as you typed characters.
EDIT:
This was using Java: JComboBox.setEditable(true) with some additional fiddling if I remember right.
What is the best way to design an interface so that very long drop down values that get trucated due to size limits do not create a very bad user experience. My question is for web applications.
Could you please send your suggestions.
Thanks.
One option is to use 'type-ahead' with postback (AJAX) to reduce the size of the list.
Well, what I have done in such a case is:
Using autocomplete (so that the user can start typing and get at the intended option faster).
Have the dropdown of a fixed length like 30 chars. Now, if the value of the drop down is longer I just truncate it to 25 with a '...' at the end. A hover on this value will make the full text appear as a 'title' or similar.
You can use a another window (div?) with list/grid with paging instead of dropdown.
Its very intuitive for general users.
have a tooltip for each item in the dropdown list so when a user hovers his mouse pointer to an item, he'll still be able to see the full description of the item.
or have your dropdown width auto-resize to the longest description in the list.