I have this popup in my app where I ask a question with "yes" or "no" being the possible options a user can choose. I would like to track a funnel of users that see the popup and then tap either yes or no. I would like to take it one step further though I would like to a/b test the text in the popup so I would like to see what users saw the popup with text A and tapped yes or no as well as who say text B etc etc.
I'm trying to figure out what custom events need to be where. Currently I have a custom event called popup and I pass in either a yes or no to the event. The issue is when I go to make a funnel I can only see the parent event called popup I can't select yes or no for the funnel. So do I need to create an event for the popup, for the text the user saw, for yes button and no button all individually for it to work? Seems like it would be a lot of events to have to create. Or is it possible to have a parent event called popup and in there have custom events for the different texts as well as what button they selected?
Related
Consider a modal dialog where a user can select an item from a list.
Option 1: Instantly close the modal upon selecting an item from the list.
Option 2: Have a selected state for the selected item and provide OK / Cancel buttons to confirm the selection before closing the modal.
Which of the two options is preferred from an accessibility standpoint? (considering keyboard navigation support, etc). Note that the selection is non-destructive and the user could easily re-open the modal and change the selection.
Option 2 is your best option here is some guidance related to this and the WCAG guideline
Basically do not change context, update lists etc. automatically on any type of input, you should always give the user a chance to confirm their actions.
Now the question is do you really need a modal if all the user is doing is selecting an item from a list?
Surely it would be a better UX to just have a list you can choose from (this depends on what you are doing, just thought I would point it out as you didn't give an example).
You also need to consider the fact that your modal list should present number of options, currently selected options etc. etc. Yet again these are just guesses and something to consider, it could be irrelevant.
I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
The expected behavior is shown at this link (AngularJs Material)
The actual behavior is shown at this link.
Is Async options' loading supported by md-select?
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
Here the most simple example of that. This is not the best approach... see below.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
Here is an example using the openChanged event. I also made the component more robust overall.
I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. This required View Encapsulation to be turned off.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.
I'm looking for a Qt/QML multiselect control that have a remove button.
I want to add a filter builder and I didn't find a good example or control for this purpose.
I can design token by myself. I'm just curious if someone already did that and can share it.
Multi filter selector
Thanks
A simple radio button for each option can do the job. If you do not include all these radio buttons under an exclusive group, a second click on these buttons deselects the option.
A click on the radio button includes selected option in the search results and second selection removes the option from the results.
An extra button which deselects all the radio buttons can also be added.
I don't intend to insult or disrespect you, but i think with radio buttons the task takes less time than posting this question.
I'm using jqgrid inline edit in my application which is also accessed in mobile. Since the user access space in the mobile is small i dont want the pop-up's throwing in the middle.
So, basically when the user did not select the row and click the edit/delete button the warning dialog is thrown "Please, select a row". Now i did not want the alert. Just when the user click on the edit/delete button without selecting the row it should stand still. Nothing happens.
Is this possible? How can i achieve this?
I would suggest you another way. One can disable or hide Delete/Edit buttons until a row will be selected. Inside of loadComplete one should test whether any row is selected (it could be selected if you use reloadGrid with {current:true} option for example). In the case you can disable or hide Delete/Edit buttons once more.
The demo created for the old answer shows how to disable navigator buttons by adding ui-state-disabled class. Another demo created for the answer demonstrates in interactive form how to show/hide navigator buttons.
Is there an event associated with the cancel button of various jQGrid dialog boxes like ADD, Edit and Delete ? For my edit dialog box, I need to do some processing when the user clicks the cancel button.
please help
thanks
Probably it could be enough to use onClose callback for form editing (see the documentation here and here).
If you would fund out that the callback are called not allays (I don't tested it in the current version of jqGrid) then you can choose another way. If you really need to process all closing of all dialogs you can consider to overwrite or to subclass $.jgrid.closeModal or $.jgrid.hideModal functions. See the demo from the answer (compare the code with original one here).