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: rel_26_05_candidate
Depends on: 38262
Blocks:
  Show dependency treegraph
 
Reported: 2025-10-31 07:43 UTC by Martin Renvoize (ashimema)
Modified: 2025-12-04 11:44 UTC (History)
7 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: ---
Comma delimited list of Sponsors:
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
Bug 41151: Modernize clear button UX in additional fields (14.11 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.54 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.76 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Preserve multi-value formatting in datatable exports (2.51 KB, patch)
2025-11-01 14:12 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Add optional clear button to standard input components (9.41 KB, patch)
2025-11-01 14:47 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Wire clearable prop through FormElement to input components (2.89 KB, patch)
2025-11-01 14:47 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Replace FontAwesome icons with SVG and improve input styling (10.12 KB, patch)
2025-11-01 14:47 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Replace FontAwesome icons with SVG and improve input styling (11.03 KB, patch)
2025-11-03 10:35 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Modernize clear button UX in additional fields (14.11 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Improve additional fields display alignment and formatting (4.54 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Display multi-value additional fields as lists in datatables (4.76 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Preserve multi-value formatting in datatable exports (2.51 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Add optional clear button to standard input components (9.41 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Wire clearable prop through FormElement to input components (2.89 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Replace FontAwesome icons with SVG and improve input styling (11.03 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 41151: Revert multi-value display and export formatting changes (5.54 KB, patch)
2025-11-07 12:20 UTC, Martin Renvoize (ashimema)
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 Comment hidden (obsolete)
Comment 2 Martin Renvoize (ashimema) 2025-10-31 11:44:24 UTC Comment hidden (obsolete)
Comment 3 Martin Renvoize (ashimema) 2025-10-31 11:44:26 UTC Comment hidden (obsolete)
Comment 4 Martin Renvoize (ashimema) 2025-10-31 11:49:00 UTC Comment hidden (obsolete)
Comment 5 Martin Renvoize (ashimema) 2025-10-31 11:49:47 UTC Comment hidden (obsolete)
Comment 6 Martin Renvoize (ashimema) 2025-10-31 11:50:14 UTC Comment hidden (obsolete)
Comment 7 David Nind 2025-10-31 12:42:04 UTC Comment hidden (obsolete)
Comment 8 David Nind 2025-10-31 12:42:07 UTC Comment hidden (obsolete)
Comment 9 David Nind 2025-10-31 12:42:11 UTC Comment hidden (obsolete)
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
Comment 12 Martin Renvoize (ashimema) 2025-11-01 14:12:30 UTC Comment hidden (obsolete)
Comment 13 Martin Renvoize (ashimema) 2025-11-01 14:12:33 UTC Comment hidden (obsolete)
Comment 14 Martin Renvoize (ashimema) 2025-11-01 14:12:35 UTC Comment hidden (obsolete)
Comment 15 Martin Renvoize (ashimema) 2025-11-01 14:12:38 UTC Comment hidden (obsolete)
Comment 16 Martin Renvoize (ashimema) 2025-11-01 14:14:35 UTC
Thankyou so much for the thorough testing and great spot finding the export issue Michaela, hopefully my additional patch resolves that too now :)
Comment 17 Martin Renvoize (ashimema) 2025-11-01 14:47:41 UTC Comment hidden (obsolete)
Comment 18 Martin Renvoize (ashimema) 2025-11-01 14:47:44 UTC Comment hidden (obsolete)
Comment 19 Martin Renvoize (ashimema) 2025-11-01 14:47:47 UTC Comment hidden (obsolete)
Comment 20 Martin Renvoize (ashimema) 2025-11-01 14:48:56 UTC
I've added a few more follow-ups to add the clear functionality on to the standard inputs now too.. more consistency accross the board,
Comment 21 Michaela Sieber 2025-11-03 08:25:25 UTC
(In reply to Martin Renvoize (ashimema) from comment #16)
> Thankyou so much for the thorough testing and great spot finding the export
> issue Michaela, hopefully my additional patch resolves that too now :)

Your're welcome! 
I set up a new sandbox with the new patches but the exported values are still in one cell without separator. As well in Excel as in Libre Office
Comment 22 Martin Renvoize (ashimema) 2025-11-03 10:35:20 UTC Comment hidden (obsolete)
Comment 23 David Nind 2025-11-05 23:33:10 UTC
Can confirm that when exporting repeatable fields with multiple values, the values are no longer comma separated with a space.

For example, before the patches it was "Test 1, Test2", now it is "Test 1Test2".
Comment 24 David Nind 2025-11-05 23:35:33 UTC
It may be one of the dependent bugs causing this: bug 38262, bug 38466
Comment 25 Martin Renvoize (ashimema) 2025-11-07 11:21:00 UTC
Right.. I've found the issue.. Davids security work around for DataTables breaks any multiple line formatted cells for export/output.

Bug 37727 - CVE-2024-24337 - Fix CSV formula injection - client side (DataTables)
Comment 26 Martin Renvoize (ashimema) 2025-11-07 12:20:22 UTC Comment hidden (obsolete)
Comment 27 Martin Renvoize (ashimema) 2025-11-07 12:20:24 UTC Comment hidden (obsolete)
Comment 28 Martin Renvoize (ashimema) 2025-11-07 12:20:27 UTC Comment hidden (obsolete)
Comment 29 Martin Renvoize (ashimema) 2025-11-07 12:20:29 UTC Comment hidden (obsolete)
Comment 30 Martin Renvoize (ashimema) 2025-11-07 12:20:32 UTC Comment hidden (obsolete)
Comment 31 Martin Renvoize (ashimema) 2025-11-07 12:20:34 UTC Comment hidden (obsolete)
Comment 32 Martin Renvoize (ashimema) 2025-11-07 12:20:37 UTC Comment hidden (obsolete)
Comment 33 Martin Renvoize (ashimema) 2025-11-07 12:20:39 UTC Comment hidden (obsolete)
Comment 34 Martin Renvoize (ashimema) 2025-11-07 12:22:25 UTC
OK, I had to revert part of this set.. I chose to revert it as a distinct commit to clarify my intentions, and I'll add a follow-up bug for the datatable display enhancement we intended to implement here.

Apologies, but I feel it's better to drop that last piece for now rather than hold up the rest.