Radio Button with Confirm Popup Window

Ignition
1

How would I add a confirmation window to Vision's radio button?

Desired behavior:

  1. Click on radio button while still showing button as unselected.
  2. Confirm window pops up with a yes, no and X (close window) buttons.
    a. Selected yes: Confirm window closes. Radio button shows selected.
    b. Selected no OR selected X (close window): Confirm window closes. Radio button keeps to previous radio button selection (not the one pressed in this sequence)

I do know the multi-state button is also an option. However, I like the radio button's look because the user easily associates the clickable options together without all the shading/coloring requirements of buttons.

I experimented with the radio button confirm window myself, looking through the docs, modifying event scripts, etc., but alas, could not get it to work.

Some scripts I've tried:

Script 1:

if(system.gui.confirm('Are you sure?', 'Confirm'), system.tag.writeToTag('<tagpath>', 1), system.tag.writeToTag('<tagpath>', 0))

Script 2: (not quite what I wanted, but thought close enough to try)

currentValue = event.source.isSelected()

if not system.gui.confirm("Are you sure you want to change this?", "Confirm"):
    # If the user cancels, revert the state back to the original
    # Use invokeLater to ensure the UI is updated after this event completes
    def revertSelection():
        event.source.setSelected(not currentValue)
    
    system.util.invokeLater(revertSelection)
2

I don't play with Vision much, but I'd be tempted to add a transparent button overlay to each radio button and bind its width and height to the radio button's dimensions. The button should then intercept the mouse click, you can run your popup with it's confirmation and set the "selected" property of the radio buttons appropriately - or not - depending on the value returned by the popup dialog.

2 Likes
3

Consider trying the slightly different approach of having the radio button with the option and then a second confirm button that is enabled by selecting the radio button. This button could be below the radio button.

When the user selects/interacts with the second button, then it actually writes the value to the tag. Less scripting and no pop up, and I'd argue its a cleaner interaction flow.

You could also have a short timer to uncheck the radio button if the user doesn't press the confirm button, so they can't accidentally press it after coming back from doing something else on the page.

3 Likes
4

gui locking popups are a pet peeve of mine, but if you must do it this way, here's how:

Example:
First, add a custom property to the parent container called selectedButton:
image

Then, add this script to the actionPerfomed event handler of the radio buttons:

# Make sure the user is sure
if system.gui.confirm('Are you sure?', 'Confirm'):
	
	# If so, update the parent container's selectedButton property
	# ...to trigger the action script
	event.source.parent.selectedButton = event.source.name

# Otherwise, revert the changes by reselecting the previously confirmed radio button
elif event.source.parent.selectedButton:
	event.source.parent.getComponent(event.source.parent.selectedButton).selected = True

Finally, add this script to the propertyChange event handler of the parent container:

# Only fire if a new selection is confirmed
if event.propertyName == 'selectedButton':
	# Do work here
	
	print 'working!'

The act of confirming the button will store the button's name on the parent container and trigger a propertyChange event to actually carry out the work of the button. If the user declines to confirm the selection, the name of the last confirmed button will simply be retrieved from the parent container and used to reselect the previous button.

2 Likes
5

Adding propertyChange to the parent container was what I was missing. Thanks, appreciate it.

1 Like