Perspective Page-Scoped State Management

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:

  1. Easy to use on a touchscreen
  2. Automatically advances to the next tab when a button is pressed
  3. Remembers your selection when you go back to the tab (and for submission)
  4. Options are dynamically generated

Layout

Here's what the layout looks like:

image
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

  1. 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?
  2. 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

image
Button View Unselected

image
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 ?