Undo / Redo

[former_member202465]

Motivation

In many scenarios the user makes changes to the data. Maybe presses Save now and then. Then wants to revert... and here are some familiar quotes (swearwords left out):

 

"What was the previous price on that item?"

"Or was it the one before it?"

"And the product code, do you recall that?"

"But I can't! I already pressed Save!"

"Don't they have Undo in this thing?"

 

Having the Undo option adds great value. This includes a scenario with a Save action: Did you save the wrong value? Undo it and Save again.

 

See also:Undo / Redo in Table: Insert, Delete and Edit Rows

 

 

The Application

In this document we focus on simple editing of values in a form. Here is the example application:



 

 

The Undo action is made possible by holding a list of "past" actions. The same goes for Redo with "future" actions. Here is the same application with the debugging panel made visible, showing these lists:



 

 

 

Do, Undo and Redo

It is easy to think of this as a person going through a time axis. Undo moves us back, Redo moves us forward.



 

Do - change of value - moves us forward towards a "new future", as we could only have one.



 

Here is a basic example with values:

Action	Past	Present	Future
Starting with value A and changing to B and then C
Undo
Undo
Redo

 

 

 

Modeling

We hold lists for Past and Future values, that we can use in Undo / Redo actions.

When the user changes a value, we need to pass the former value to the past, but we only know the new value! So we must hold in memory the Present too. When the UI changes, we use it to get previous UI values.

 

Modeling steps:

1. Add a Form View and define two fields - Text (TXT1) and Date (Date1).

2. Add three Data Share elements, for the past, present and future.

3. Define the cardinality to be Record Set (0..n).

4. Define the same set of fields: Text (TXT1) and Date (Date1) fields.

5. For the present data share open from the Define Data dialog the Initialize Data dialog, and add one record.





6. Add a Panel element, set its visibility to false (in the Configuration Panel).


7. Connect Grid View elements to the Data Shares, and place them inside the Panel. They are used for debugging / testing.




 

8. Add a Data Share element and name it size.

9. Define the following numeric fields: past and future. This is later used to set or get the size of our lists. Knowing the size we could disable / enable the Undo Redo buttons as appropriate.




 

10. Optional - change Txt1 control to a Drop Down and add an Entry List to it.

11. Add two buttons for Undo and Redo. The layout should look like this:




 

12. Define the Do (change value) Action for the controls Txt1 and Date1 as follows (see movie for the same😞

Action	Parameters	Remarks
COPYTO	From:present To: past Scope: Current row Insert: First	Former present value is added to the Past list
ASSIGN	From: Form1 Value: =@TXT1 To: present Target Field: TXT1	For Date1 copy value =@DATE1
ASSIGN	From: [none] Value: =size@past+1 To: size Target Field: past	Increase past size
ASSIGN	From: [none] Value: 0 To: size Target Field: future	Reset future size
DELETE	From: Future Delete: All rows	The "old" future is irrelevant

 

 

13. Define the Action for the Undo button (movie here😞

Action	Parameters	Remarks
MOVETO	From: present To: future Scope: Current row Insert: First	Former present value is added to the Future list
MOVETO	From: past To: present Scope: Current row Insert: First	Recent past record is moving to present
ASSIGN	From: [none] Value: =size@past-1 To: size Target Field: past	Decrease past size
ASSIGN	From: [none] Value: =size@future+1 To: size Target Field: future
COPYTO	From: present To: Form1 Scope: Current row Insert: After	update the UI

 

 

14. Define the Action for the Redo button (movie here):

Action	Parameters	Remarks
MOVETO	From: present To: past Scope: Current row Insert: First	Former present value is added to the Past list
MOVETO	From: future To: present Scope: Current row Insert: First	Recent future record is moving to present
ASSIGN	From: [none] Value: =size@past+1 To: size Target Field: past
ASSIGN	From: [none] Value: =size@future-1 To: size Target Field: future
COPYTO	From: present To: Form1 Scope: Current row Insert: After	update the UI

 

 

15. Define the Enabled condition for the Undo Button: =size@past>0

16. Define the Enabled condition for the Redo Button: =size@future>0



 

That's it

 

Next relevant scenario:

Handling table values: Allow undo / redo for insert, delete and edit of table rows.

Here is an example modeled application: