Making a multi-page single view form?

Ignition
1

I have a part of a project where I have the user input a very long form. I wanted to break it up a bit so the user would fill out a few fields, click the next button and the next set of fields appears (as opposed to scrolling down).

My set up is such - I have the host/root column container I call Safety.

In my Safety column container, I have only 4 items - a header label, an embeded view, and two icons at the bottom for navigation. My Safety column container has a custom root property I call current step, which is added to or subtracted from based on usage of the navigation buttons at the bottom of the screen. This current step also determines what view is displayed in the embedded view like so -

if({parent.custom.currentStep} = 1,
'Safety/customerInfo',
	if({parent.custom.currentStep} = 2,
	'Safety/ppeChecklist',
		if({parent.custom.currentStep} = 3,
			'Safety/hazardousMaterial',
			'')
	)
)

Now I’m realizing, from my Safety view which holds the embedded view with the changing paths, I am not sure how to grab the data from the changing views. I know in React you’d do something with a callback function. I’m not quite sure how to do that here. I’m also not quite sure if the fact I have a single embedded view with a changing path is going to make this more difficult or easier.

How can I get the data from the dropdowns/tables/etc in my views that are existing in the embedded view? Alternatively, if there is a better way to make a form that is so long it requires next/back button navigations, I would also accept that as an answer.

Just to make sure I am clear about my setup -
image
My viewForcurrentStep is an embedded view that uses the path for customerInfo, hazardousMaterial, ppeChecklist depending no what the current step is. How can I get the data from customerInfo, hazardousMaterial, ppeChecklist into the safety view to use for submission of the form?

2

I had another idea where each page of the form is in a tab, but I run into the same issue where I can’t seem to expose the properties in the embedded view to the parent view. Is that possible? Or is this going to need a different way of doing things?

3

It's going to make it SO MUCH MORE DIFFICULT, because once the View is replaced (when you change the path), all of the data and properties disappear.

There are two ways to accomplish what you're trying to do:

Assuming the user can ONLY MOVE FORWARD AND NEVER BACK, you could use property change events to invoke system.perspective.sendMessage(), where you would essentially broadcast the currentValue.value of the field. You would then need to set up a listener for each of those messages (most likely on the root of the Safety View), so that as those values change you get the new data. The downside to this pattern is that if your users can go "back" (which it looks like they can), then you have to set up parameters for each of the Views you'er using and tie those parameters to the properties stored on the root container.

The better option is to bi-directionally bind the relevant value of each of the fields in each of the Views you're embedding to a session property. This way, as you change each field the session is aware of the value. Should your user go "back" to a section, the binding will result in the fields displaying the values they held before the user navigated away from the View. To obtain the values at any point you would only need to locate the relevant session properties.

1 Like
4

I do the same type form. Every pages “next buttons” inserts into sql tho into a “building table”. At the end of the form on “submit”… I re-query all the form data, session info, user info etc. And I stick that in a different table as “permanent record” then delete the entry in the building table. Building table also gets cleared at session end and if navigated away from view etc… This project only ever runs one client tho…

Not suggesting this method…It was just easier for me to get it done this way… Although its been reliable.

1 Like
5

Can you do something like this?
Have a custom property called StepNumber on the root of the main view. The buttons will +1 or -1 the step number.
Put all the embedded views on the screen, but bind the display property where it is true only when the current step number matches. The embedded view will have the parameters in the output direction for each value you want to bring back like customer name.

image
image1100Ă—661 84.7 KB

https://streamable.com/z5wl6