Agreements (UXPROD-573)

[UXPROD-1677] UI tidy up for Agreement Create/Edit form Created: 29/Apr/19  Updated: 16/Sep/20  Resolved: 15/Oct/19

Status: Closed
Project: UX Product
Components: None
Affects versions: None
Fix versions: None
Parent: Agreements

Type: New Feature Priority: P3
Reporter: Gill Osguthorpe Assignee: Gill Osguthorpe
Resolution: Won't Do Votes: 0
Labels: erm
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original estimate: Not Specified

Attachments: JPEG File custom coverage errors.JPG     PNG File screenshot-1.png    
Issue links:
Relates
relates to UXPROD-1669 UX improvements for Agreements up to ... Closed
Epic Link: Agreements
Development Team: Bienenvolk
PO Rank: 11
PO Ranking Note: These are small tidy up jobs for the UI and so not ranked highly although individual parts of this may be picked up where there is developer capacity
Rank: Chalmers (Impl Aut 2019): R2
Rank: Chicago (MVP Sum 2020): R4
Rank: Cornell (Full Sum 2021): R4
Rank: Duke (Full Sum 2021): R4
Rank: 5Colleges (Full Jul 2021): R2
Rank: FLO (MVP Sum 2020): R4
Rank: GBV (MVP Sum 2020): R2
Rank: Lehigh (MVP Summer 2020): R4
Rank: U of AL (MVP Oct 2020): R4

 Description   

To conform with the Folio UX guidelines.

  1. Change the header of the Edit and New agreements forms as shown in the mockup:

    • Edit form:
      • HOLD (Stripes?): Add the small "Edit" icon and "Agreement" icon (see UXPROD-1780 Closed )
      • DO: Change the "Update agreement" button text to "Save & close" (see ERM-308 Closed )
      • Display the name of the agreement
      • HOLD (Stripes?):Display the last updated message (needs clarification)
    • HOLD (Stripes?): New form: Add the small "New" icon and "Agreement" icon (see UXPROD-1780 Closed )
      • DO: Change the "Create agreement" button text to "Save & close" (see ERM-308 Closed )
  1. HOLD (Probably not required): The new headline style needs to be applied to the Edit form.
  2. DO: The "Remove" bin icon should have a tooltip for: (see ERM-310 Closed )
    • removal of an internal contact
    • removal of an agreement line
    • removal of custom coverage
    • removal of a license
  3. DO: The "Remove" bin icon for Agreement line and Custom coverage icons should be grey, they are blue currently. (see ERM-310 Closed )
  4. DO: FIelds should not have placeholder text.
    • Agreement Status: (see ERM-306 Closed )
      • remove the default text "Select the status of this agreement"
    • Internal contacts Role:
      • remove text "Select a role for this user"
    • Agreement-lines, Select-from-basket:
      • remove the text "Select e-resource or package
    • License-information, All-licenses.Status (this agreement):
      • remove the text "Select a status"
    • Organizations Name
      • remove "Select an organization"
    • Organizations Role
      • remove "Select a role"
  5. HOLD (needs clarification - when more than one validation error exists, is each displayed in its own toast or combined - seems to be a limit of 5 toasts at once? If combined what is the format for presenting the errors?) On save, when validation errors exist, a message banner should be displayed at the top of the page listing all the errors. The format for an error message is "The following required field in accordion heading is missing: Fieldname", where Fieldname is a link to the errored field.
    See https://ux.folio.org/docs/guidelines/ux-patterns/new-record/"
  6. HOLD (needs clarification re multiple fields) On save, when the accordions are collapsed, and validation errors exist the following message should be added on the right side of the section with the error: "Required field".
    See https://ux.folio.org/docs/guidelines/ux-patterns/new-record/"
  7. On save, when the save is successful and the updated record is displayed in the Preview panel, a toast should be displayed confirming the action. See https://ux.folio.org/docs/guidelines/ux-patterns/new-record/#media-12797 and https://ux.folio.org/docs/guidelines/components/toast/ (see UXPROD-1786 Closed )
  8. On save, if there are changes which have not been saved, a modal is displayed. The following changes should be made: (see ERM-307 Closed )
    • Change the title to: “Close page”
    • Change the content to: “There are unsaved changes. If you would like to save changes, press the “Keep editing” button.”
    • Move the button “Close without saving” on the left at the bottom (leave the "Keep editing" button where it is).

General UX improvements

  1. Internal contacts
    1. the lookup process needs to use the new UX pattern (probably needs mockups) (see ERM-309 Closed )
    2. QUES: should it be possible to assign an inactive user as an internal contact? It is currently. (see https://folio-org.atlassian.net/wiki/pages/viewpage.action?pageId=5835301)
  2. External licenses should be displayed as repeating groups (see /UXPROD-1788).
  3. Organizations - when the development work is underway to integrate the Organizations app with agreements, the new lookup UX pattern will need to be applied. If the integration is not going ahead, then the "Create" and "Add" options need design input. Either way will probably need mockups.
  4. TBC - use of cross to clear field. Drop-downs: "Renewal priority" and "Is perpetual" have no option for "None" or "Not selected". Instead the user is expected to select an empty option. Not good usability and probably not accessible?
  5. SUPERSEDED BY ERM-309 Closed In "Internal contacts" I selected to "Add internal contact". This displayed the new field group with the User Search immediately in error mode (with the red exclamation icon). It appears that validation is being performed on display of the field group.
    • SUPERSEDED BY ERM-309 Closed In "Internal contacts", the user lookup field widget is not correct. It says "Click the 'search' button to select a user"

Possibly bugs?

  1. FIXED: When an agreement has been saved and the modal closes to show the agreement in preview mode, the selection in the search results panel is lost - i.e. the current agreement is not highlighted in the results list. Note that a record could be filtered out of the list (e.g. status is changed to "Cancelled") when saved - so could be displayed in the preview panel but not in the results list.
  2. When more than one custom coverages are set and the dates include overlap the error message "The following coverages have overlapping dates: 2 & 1" is displayed. Change this to "Please correct overlapping custom coverage dates in: #1, #2." The hash is important. Also, can they be listed in ascending order?
    #I added Custom coverage #2 (#1 was already saved) and set the start date to overlap. This caused the errors in #1 to be displayed, but not in the Start date in ""Custom coverage #2"" - it should be errored also.
    When the agreement was updated (saved), the error in #2 was then displayed.

  1. When an error exists on the custom coverage and "Update agreement" is selected, should there be a message displayed somewhere to the effect of "The agreement has not been updated, please correct the errors shown".
  2. The "Add custom coverage" button (shown above) should have a white fill, it is currently grey.


 Comments   
Comment by Anya [ 13/Jun/19 ]

FC: this seems more as appearance and not functionality

Comment by Marie Widigson [ 04/Jul/19 ]

Hi Khalilah Gambrell Do you think we should rank this?

Comment by Khalilah Gambrell [ 04/Jul/19 ]

Marie Widigson, I think you can rank this feature although it seems like minor cosmetic fixes.

Generated at Fri Feb 09 00:17:33 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.