Requirements
I'm trying to create a wizard-like popup in Perspective, but I'm stuck on how to create radio button-like functionality using standard buttons. I'm using a tab container Here's what I want out of the first tab of the wizard:
- Easy to use on a touchscreen
- Automatically advances to the next tab when a button is pressed
- Remembers your selection when you go back to the tab (and for submission)
- Options are dynamically generated
Layout
Here's what the layout looks like:
Radio Button Selection Layout
The problem is that I can't get the selection to highlight the chosen option after swapping tabs because the buttons are regenerated and lose any temporary state.
Possible Methods
- Create bindings for each button in the flex repeater
a. I don't know if this is even possible or practicable to do dynamically
b. Would this count as a binding within a binding?
- Use
system.perspective.sendMessage()
a. I haven't gotten this to work yet
b. Putting a sendMessage()
script in the onStartup
event for the Flex Repeater doesn't seem to work
c. The more I try this method, the messier it gets
Context
Button View Unselected
Button View Selected
Wizard View Flex Repeater Properties
Question
Does anyone know of a clean way to manage state within a page but across views that reload themselves?
is your tab container dynamic, or does it always have 2 tabs?
It might potentially work if you set your tabs to runWhileHidden
https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Tab+Container#PerspectiveTabContainer-Properties
1 Like
I would try to make the menu tree component work for this.
Otherwise, you probably can create an object class with methods to mutate the state (implementing a basic state machine). All your tabs would just bind to the object itself and call the methods. You would use an event and the current state to determine the next state in the state machine.
1 Like
I ended up just making my binding for the instances
property dependent on the custom property option_id
(the "state") so that the instances always update when the selected option updates. This is the path I should've gone down in the first place. I realized that I didn't need a full-on state machine and that a "binding within a binding" is just a single binding with multiple variables.
I wanted to give kudos to @Matthew.gaitan and @dkhayes117 for your suggestions though. The runWhileHidden
property was useful, and I'll keep the menu tree component idea in mind for future use cases. Thanks y'all!
2 Likes
I just tried and the selections seem to persist when changing tabs.
How are you populating the repeaters' instances ?