Date Inline Edit Storyboard

Use Case: Allow user to edit date information

Note: Though this scenario can stand on its own, you may also want to reference the related, previous scenario on the Date Inline Edit Storyboard page.

Scenario: Change assignment due date so it is due 3 days earlier.

User now wants to change the due date for this assignment so they mouse (or tab) over the "07/19" and it is highlighted in yellow (though whether or not the highlight appears is configurable) to show that it is editable. If using a mouse, the cursor also changes to a hand show that it is an editable text field.

User clicks within the date field (or presses "Enter" if a keyboard user) and a pop-up calendar opens. The blinking text entry cursor is placed at the end of the date text (though this location is configurable), and the mouse cursor becomes an i-Bar. The current value of the Due Date field is circled in red. Today's date has a dark blue background. The "Open" date for the assignment has a light blue background.

The user moves their cursor (or tabs to) the square on the calendar for July 26th. If using the mouse, the cursor changes to a hand while the user is over the calendar to show that it is clickable.

The user clicks on the square for July 26th (or if a keyboard user, presses "Enter" when in that square), the pop-up calendar closes, and they can see that the value for this field has changed to "07/26." There is now an "undo" icon next to the field which allows the user to undo that edit by clicking on it. Any other "undo" icons that have been previously placed on this page remain. (Note: the Undo icon is a placeholder, and more thinking should probably be done on exactly how this should look. Perhaps it should be blue like the other links.)

The user realizes they actually wanted to change the due date to July 27th. They move their cursor (or tab) back to that field and it is highlighted yellow (configurable) to show that it is editable. If using the mouse, the cursor also changes to a hand to show that it is an editable text field.

User clicks within the date field (or presses "Enter" if a keyboard user) and a pop-up calendar opens. The blinking text entry cursor is placed at the end of the date text (configurable) to show where the user can begin editing, and the mouse cursor becomes an i-Bar.

The user moves the text entry cursor back one (either with the mouse or with the arrow key on the keyboard) so it's in the middle of the 2 and the 6.

User moves the i-Bar mouse cursor out of the text entry field so they can better see what they are doing. They then backspace one space with the keyboard and the "2" is erased. Since the value is currently 7/6, the date circled in red on the calendar changes to match this.

The user types a "1" in the field where the text entry cursor is currently located.

The user either presses "Enter" or clicks anywhere outside the field and calendar, the pop-up calendar closes, and they can see that the value for this field has changed to "07/16." There is now an "Undo" icon next to this field to show that it can be undone by clicking on it. The date circled in red on the calendar changes to match the new value.

The user leaves this particular Assignments2 page. When they come back, the undo icons have been erased.