Uploaded image for project: 'UX Product'
  1. UX Product
  2. UXPROD-1677

UI tidy up for Agreement Create/Edit form



    • Type: New Feature
    • Status: Closed (View Workflow)
    • Priority: P3
    • Resolution: Won't Do
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: None
    • Labels:
    • Template:
    • Epic Link:
    • Development Team:
    • Calculated Total Rank:
    • PO Rank:
    • 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):
    • Rank: Chicago (MVP Sum 2020):
    • Rank: Cornell (Full Sum 2021):
    • Rank: Duke (Full Sum 2021):
    • Rank: 5Colleges (Full Jul 2021):
    • Rank: FLO (MVP Sum 2020):
    • Rank: GBV (MVP Sum 2020):
    • Rank: Lehigh (MVP Summer 2020):
    • Rank: U of AL (MVP Oct 2020):


      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)
          • DO: Change the "Update agreement" button text to "Save & close" (see UXPROD-1783)
          • 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)
          • DO: Change the "Create agreement" button text to "Save & close" (see UXPROD-1783)
      2. HOLD (Probably not required): The new headline style needs to be applied to the Edit form.
      3. DO: The "Remove" bin icon should have a tooltip for: (see UXPROD-1784)
        • removal of an internal contact
        • removal of an agreement line
        • removal of custom coverage
        • removal of a license
      4. DO: The "Remove" bin icon for Agreement line and Custom coverage icons should be grey, they are blue currently. (see UXPROD-1784)
      5. DO: FIelds should not have placeholder text.
        • Agreement Status: (see UXPROD-1785)
          • 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"
      6. 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/"
      7. 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/"
      8. 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)
      9. On save, if there are changes which have not been saved, a modal is displayed. The following changes should be made: (see UXPROD-1787)
        • 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 UXPROD-1675)
        2. -QUES: should it be possible to assign an inactive user as an internal contact? It is currently. (see https://wiki.folio.org/pages/viewpage.action?pageId=25726053)-
      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 UXPROD-1675 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 UXPROD-1675 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.
      3. 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".
      4. The "Add custom coverage" button (shown above) should have a white fill, it is currently grey.

        TestRail: Results


            Issue Links



                gosguthorpe Gill Osguthorpe
                gosguthorpe Gill Osguthorpe
                0 Vote for this issue
                4 Start watching this issue



                    TestRail: Runs

                      TestRail: Cases