Hi All,
Wondering if anyone can share some wisdom around the best way to navigate around forms in REACT where there are several paths to follow depending on the answers a user selects on each page/block. Also saving data and passing up variables so values aren't lost when a user navigates away from a page. Does anyone have a standardised approach for this kind of thing which they feel works well? Some kind of navigation engine which keeps track of pages and values.
Any advice is much appreciated.
Thanks :o)
Hi JayPea,
If the data involved in storing the current user state is not too big, then I would consider creating a separate module for all the web blocks, and in that module I would use 10-15 client variables to store the user selected values. Client variables are lightweight variables saved in the browser storage.
They are accessible from client actions so making it a quicker access and would help in deciding which screen to browse to.
I suggested a separate module to avoid a lot of client variables in the same main module, to keep them separate and don't mix up with the really useful data pieces that are not part of this wizard. But you can keep them in same module also, just in its own separate folder inside Client variables, to keep things organised.
I did a couple of those recently.My favorite is:-The page has a Structure with all the fields.-The page has a Variable saying on which screen we should be.-The page has a MoveForward and a MoveBackward that based on current screen and structure values will say where to move going back or forward.-Each section will be a block that Section Variable toggles.-Each block will have input with the few values it shows/edits.-Each block will have its own validations (enable/disable input fields and Continue button) and Gets. And a Trigger when Continue is pressed that sends those values to parent Page to be saved.-You can create blocks inside the blocks if it is complex.
To avoid data loss when changing page, save to DB.
Thanks @Nuno Reis
This is kind of the approach we use. I was curious to know if there might be an alternative approach.
What's you take on using client variables for this kind of thing?
This is the best approach for manual input forms. Not to store binaries.
For heavier forms in content don't use variables. You need a constant db read/save.
I'd rather have a screen variable than client variables because:-the client variables area should only be used for transversal data.
-to reset, just refresh (you can prevent accidental exits with JS).
Thanks @Ravi Punjwani
This sounds like a different approach to what we have previously done. Previously we have used local variables and or structures to store information.
Can structures be used inside of client variables if needed?
Presumably we can store block or page info in a client variable too so that would enable the application to know where in the flow it is and where to navigate to next.
Keeping client variables organised in their own folders seems more straight forward to me as opposed to introducing additional modules.
Unfortunately it won't be able to store structures directly, but you can emulate the same effect by storing JSON. But don't store a few MBs of data here, it won't be able to handle it efficiently.
I think the value size also has some limitation, but won't stop you to store some lightweight JSON objects. These variables are directly stored into the browser's Local Storage, and you can even read their values from the browser's developer console.
They can prove great in terms of performance and ease of use.