Bug 41151 - Vue Additional Fields UX Improvements
Summary: Vue Additional Fields UX Improvements
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: Martin Renvoize (ashimema)
QA Contact: Testopia
URL:
Keywords:
Depends on: 38262
Blocks:
  Show dependency treegraph
 
Reported: 2025-10-31 07:43 UTC by Martin Renvoize (ashimema)
Modified: 2025-10-31 13:00 UTC (History)
6 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: ---
Crowdfunding goal: 0
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 41151: Modernize clear button UX in additional fields (14.06 KB, patch)
2025-10-31 11:44 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.50 KB, patch)
2025-10-31 11:44 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.71 KB, patch)
2025-10-31 11:44 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Updated table display (10.25 KB, image/png)
2025-10-31 11:49 UTC, Martin Renvoize (ashimema)
Details
Updated input view (52.02 KB, image/png)
2025-10-31 11:49 UTC, Martin Renvoize (ashimema)
Details
Updated display view (33.01 KB, image/png)
2025-10-31 11:50 UTC, Martin Renvoize (ashimema)
Details
Bug 41151: Modernize clear button UX in additional fields (14.11 KB, patch)
2025-10-31 12:42 UTC, David Nind
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.54 KB, patch)
2025-10-31 12:42 UTC, David Nind
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.76 KB, patch)
2025-10-31 12:42 UTC, David Nind
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize (ashimema) 2025-10-31 07:43:20 UTC
The additional fields input UI's could do with some improvements as noted in bug 38262.

To summarise:
1) Spacing between 'Clear' and 'New' buttons on input fields needs work
2) When viewing repeatable, searchable fields in display tables we use a comma separated list instead of field per line.
3) When viewing fields in details display the alignment of the addiional field labels and container is inconsistent

I'd go further on point one and ask why we need 'Clear' as a distinct element as it's inconsistent with the 'normal' field entry input boxes.  I think I'd prefer to try and make additional fields as consistent as possible with normal input fields, perhaps embedding a 'x' clear check within the far right of input fields to give that 'Clear' functionality accross both additional field and normal field inputs.
Comment 1 Martin Renvoize (ashimema) 2025-10-31 11:44:22 UTC
Created attachment 188814 [details] [review]
Bug 41151: Modernize clear button UX in additional fields

This patch improves the UX of the clear functionality for additional
fields by:

- Replacing the separate "Clear" button with an inline clear icon (×)
  that appears inside the input field when there is content
- Adding proper spacing between the input field and "New" button
  using flexbox layout
- Styling the "New" button with Bootstrap button classes for
  consistency
- Making the clear button only visible when the field has content

This provides a more modern, intuitive interface pattern similar to
standard search inputs and maintains better visual consistency with
other form elements in Koha.
Comment 2 Martin Renvoize (ashimema) 2025-10-31 11:44:24 UTC
Created attachment 188815 [details] [review]
Bug 41151: Improve additional fields display alignment and formatting

This patch improves the display of additional fields by:

- Removing the nested fieldset wrapper that caused alignment issues
- Converting the legend to a header list item for consistency
- Aligning additional field labels with main form field labels
- Displaying multi-value fields (comma-separated) on separate lines
  without bullets or extra indentation, aligned with single values
- Using the same visual separator pattern as the entry form

This creates perfect alignment between additional fields and regular
fields in the display view, with multi-value fields showing cleanly
stacked values in the same column as single values.
Comment 3 Martin Renvoize (ashimema) 2025-10-31 11:44:26 UTC
Created attachment 188816 [details] [review]
Bug 41151: Display multi-value additional fields as lists in datatables

This patch improves the display of searchable repeatable additional
fields in datatable columns by:

- Detecting comma-separated values in the value_str field
- Rendering multiple values as an HTML unordered list instead of
  comma-separated text
- Adding appropriate CSS styling for list display within table cells
- Maintaining single-value display for non-repeatable fields

This makes multi-value additional fields much more readable in list
views, with each value appearing on its own line within the table cell.

For example, "Bang, History" now displays as:
  • Bang
  • History

This completes the UX improvements for additional fields across all
three contexts: entry forms, detail views, and list datatables.
Comment 4 Martin Renvoize (ashimema) 2025-10-31 11:49:00 UTC
Created attachment 188817 [details]
Updated table display
Comment 5 Martin Renvoize (ashimema) 2025-10-31 11:49:47 UTC
Created attachment 188818 [details]
Updated input view
Comment 6 Martin Renvoize (ashimema) 2025-10-31 11:50:14 UTC
Created attachment 188819 [details]
Updated display view
Comment 7 David Nind 2025-10-31 12:42:04 UTC
Created attachment 188820 [details] [review]
Bug 41151: Modernize clear button UX in additional fields

This patch improves the UX of the clear functionality for additional
fields by:

- Replacing the separate "Clear" button with an inline clear icon (×)
  that appears inside the input field when there is content
- Adding proper spacing between the input field and "New" button
  using flexbox layout
- Styling the "New" button with Bootstrap button classes for
  consistency
- Making the clear button only visible when the field has content

This provides a more modern, intuitive interface pattern similar to
standard search inputs and maintains better visual consistency with
other form elements in Koha.

Signed-off-by: David Nind <david@davidnind.com>
Comment 8 David Nind 2025-10-31 12:42:07 UTC
Created attachment 188821 [details] [review]
Bug 41151: Improve additional fields display alignment and formatting

This patch improves the display of additional fields by:

- Removing the nested fieldset wrapper that caused alignment issues
- Converting the legend to a header list item for consistency
- Aligning additional field labels with main form field labels
- Displaying multi-value fields (comma-separated) on separate lines
  without bullets or extra indentation, aligned with single values
- Using the same visual separator pattern as the entry form

This creates perfect alignment between additional fields and regular
fields in the display view, with multi-value fields showing cleanly
stacked values in the same column as single values.

Signed-off-by: David Nind <david@davidnind.com>
Comment 9 David Nind 2025-10-31 12:42:11 UTC
Created attachment 188822 [details] [review]
Bug 41151: Display multi-value additional fields as lists in datatables

This patch improves the display of searchable repeatable additional
fields in datatable columns by:

- Detecting comma-separated values in the value_str field
- Rendering multiple values as an HTML unordered list instead of
  comma-separated text
- Adding appropriate CSS styling for list display within table cells
- Maintaining single-value display for non-repeatable fields

This makes multi-value additional fields much more readable in list
views, with each value appearing on its own line within the table cell.

For example, "Bang, History" now displays as:
  • Bang
  • History

This completes the UX improvements for additional fields across all
three contexts: entry forms, detail views, and list datatables.

Signed-off-by: David Nind <david@davidnind.com>
Comment 10 David Nind 2025-10-31 12:44:59 UTC
Fantastic work Martin!

These changes make adding, editing, and viewing the additional fields for Vue enabled modules much more consistent and usable.

Testing notes (using KTD):

1. Apply patches (and dependencies)
2. Rebuild the JavaScript (yarn js:build or yarn build(?))
3. Restart everything: restart_all
4. Define some additional fields for vendors (Administration > Additional parameters > Additional fields > Acquisitions > E-resource management > Vendors (aqbooksellers:vendor)). Create a combination of additional fields:
  . Single field
  . Repeatable field
  . Field using authorized values (YES_NO)
  . Repeatable field using authorized values (YES_NO)
  . Searchable
  . Repeatable and searchable
5. Define some additional fields for ERM agreements (Administration > Additional parameters > Additional fields > Acquisitions > Vendors > Agreements (erm_agreements))
  . Single field
  . Repeatable field
  . Field using authorized values (YES_NO)
  . Repeatable field using authorized values (YES_NO)
  . Searchable
  . Repeatable and searchable
6. Test additional fields for the ERM module:
   . Enable the ERM module (ERMModule system preference)
   . Create an agreement and add some additional fields
   . View the agreement with the additional fields
   . View the list of agreements
7. Test additional fields for vendors:
   . Create a new vendor and add some additional fields (Acquisitions > + New vendor)
   . View the vendor information with additional fields
   . View the list of vendors
Comment 11 Michaela Sieber 2025-10-31 13:00:54 UTC
I like it ! 
There is only one thing I noticed when exporting a result list:

if you have an additional field that is repeatable it is displayed now as a list with bullets. 
But if you do an export (excel or csv) the values are all in one cell without separators. 
In the past the values were separated with a comma+space