feat(personas): introduce new keytag custom field implementation by nicobytes · Pull Request #34625 · dotCMS/core

nicobytes · 2026-02-12T14:41:14Z

Migrate Custom Fields to New Edit Mode and Consolidate Shared Styles

Summary

This PR migrates multiple custom field implementations to the new edit mode architecture, replacing legacy Dojo-based code with modern DOM manipulation and the DotCustomFieldApi framework. Additionally, shared dropdown styles have been extracted and consolidated for reusability across field types. Comprehensive accessibility improvements and code quality fixes have been applied throughout.

Changes

Custom Field Migrations

1. Personas KeyTag Field (`keytag_custom_field`)

New Implementation: keytag_custom_field_new.vtl
- Replaces Dojo framework with native DOM and DotCustomFieldApi
- Implements camelCase transformation with proper casing (first letter uppercase, remaining lowercase)
- Real-time field validation and synchronization with persona name input
Legacy Preservation: keytag_custom_field_old.vtl retained for backward compatibility
Switcher Logic: keytag_custom_field.vtl conditionally routes based on isNewEditModeEnabled()

2. File Browser Field (`file_browser_field_render`)

New Implementation: file_browser_field_render_new.vtl
- Replaces legacy dijit FilteringSelect with native input and DotCustomFieldApi browser modal
- Native file/page/folder browser integration
- Accessibility improvements: Added placeholder for URI input field
Legacy Preservation: file_browser_field_render_old.vtl retained for backward compatibility
Switcher Logic: file_browser_field_render.vtl conditionally routes based on isNewEditModeEnabled()

3. Tag Storage Field (`tag_storage_field_creation`)

New Implementation: tag_storage_field_creation_new.vtl
- Replaces legacy dijit dropdown with custom native select component
- Null-safe Velocity templating (guards against missing attributes)
Legacy Preservation: tag_storage_field_creation_old.vtl retained for backward compatibility
Switcher Logic: tag_storage_field_creation.vtl (FIXED)
- Corrected inconsistent #parse directive paths to use leading slash (/static/...) for consistency

DEMO

Screen.Recording.2026-02-13.at.5.21.12.PM.mov

### Summary This commit adds a new implementation for the keytag custom field, enhancing the user experience by allowing dynamic updates based on the name field input. ### Changes - **New File**: Added `keytag_custom_field_new.vtl` which includes JavaScript functions for camelizing the name input and updating the keytag field accordingly. - **Old Implementation**: The previous keytag custom field logic has been preserved in `keytag_custom_field_old.vtl` for backward compatibility. - **Integration**: Updated `keytag_custom_field.vtl` to conditionally parse the new or old implementation based on the `isNewEditModeEnabled` flag. ### Benefits This new approach improves the usability of the keytag field by allowing real-time updates and editing capabilities, enhancing the overall functionality of the personas feature.

…dering to support new edit mode ### Summary This commit refactors the file browser and tag storage field rendering templates to conditionally include new implementations based on the flag. ### Changes - **File Browser**: Removed old JavaScript and HTML structure from , now conditionally parses either or . - **Tag Storage Field**: Similar changes made in , parsing either or . ### Benefits This update streamlines the rendering logic for both components, allowing for easier maintenance and improved user experience in the new edit mode.

Copilot

Pull request overview

This pull request migrates multiple custom fields to the new Custom Field API, implementing a conditional rendering pattern based on the edit mode. The primary focus is on the persona keytag custom field (as mentioned in issue #34450), but it also includes migrations for tag storage and file browser fields, plus a refactoring of shared dropdown styles.

Changes:

Migrated persona keytag custom field to new Custom Field API with modern JavaScript and styling
Migrated tag storage field to new Custom Field API with dropdown implementation
Migrated file browser field to new Custom Field API with modal integration
Refactored shared dropdown CSS from template_custom_field_new.vtl to native-field.component.scss

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
keytag_custom_field.vtl	Main switcher that conditionally loads new/old implementation
keytag_custom_field_old.vtl	Preserved legacy Dojo-based keytag implementation
keytag_custom_field_new.vtl	New DotCustomFieldApi-based keytag implementation
tag_storage_field_creation.vtl	Main switcher for tag storage field
tag_storage_field_creation_old.vtl	Preserved legacy Dojo-based tag storage dropdown
tag_storage_field_creation_new.vtl	New custom dropdown with DotCustomFieldApi integration
file_browser_field_render.vtl	Main switcher for file browser field
file_browser_field_render_old.vtl	Preserved legacy Dojo-based file browser
file_browser_field_render_new.vtl	New modal-based file browser implementation
template_custom_field_new.vtl	Removed redundant CSS styles (moved to SCSS)
native-field.component.scss	Added shared dropdown/select styles for custom fields

dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field_new.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/content/file_browser_field_render_new.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/personas/keytag_custom_field_new.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/tag/tag_storage_field_creation.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/content/file_browser_field_render_new.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/personas/keytag_custom_field_old.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/tag/tag_storage_field_creation_old.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/personas/keytag_custom_field_new.vtl

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 6 comments.

dotCMS/src/main/webapp/WEB-INF/velocity/static/content/file_browser_field_render_new.vtl

...lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.scss

dotCMS/src/main/webapp/WEB-INF/velocity/static/tag/tag_storage_field_creation_new.vtl

dotCMS/src/main/webapp/WEB-INF/velocity/static/personas/keytag_custom_field_new.vtl

...lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.scss

…new-custom-field-api

zJaaal · 2026-02-19T16:31:04Z

...lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.scss

Check

gaps

margins

paddings

font sizes

pixel values

We should use available vars for spacing and fonts and if the vars does not comply with the figma, we should review it with Melissa to see be sure if we need to use the closest one or use a custom

This is to save time when migrating as its being made with the lara theme. Its easier to match the new vars with the current ones.

And about the pixel values, rem is more scalable, since some of our uses modify their browser font size for accessibility, so it might brake some cases if we inconsistently use pixels for positioning or sizes while preserving gaps and spacings on rem

Done. Gaps, margins, padding, font sizes. Are now using the css vars

…new-custom-field-api

…field-api' of https://github.com/dotCMS/core into 34450-task-migrate-persona-key-tag-field-to-new-custom-field-api

nicobytes linked an issue Feb 12, 2026 that may be closed by this pull request

[TASK] Migrate Persona Key Tag Field to new Custom Field API #34450

Open

github-project-automation bot added this to dotCMS - Product Planning Feb 12, 2026

github-actions bot mentioned this pull request Feb 12, 2026

[TASK] Migrate Persona Key Tag Field to new Custom Field API #34450

Open

adrianjm-dotCMS added 3 commits February 13, 2026 11:23

Add new files

0f126fe

Migrate tag_storafgge field and reuse styles from template_custom_field

ec68e33

adrianjm-dotCMS marked this pull request as ready for review February 13, 2026 20:16

Copilot AI review requested due to automatic review settings February 13, 2026 20:16

Copilot started reviewing on behalf of adrianjm-dotCMS February 13, 2026 20:17 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes

adrianjm-dotCMS added 3 commits February 13, 2026 17:04

copilot feedback

948c21c

remove unnecesary class

1794f67

format scss file

cd058a1

nicobytes requested a review from Copilot February 13, 2026 22:02

Copilot started reviewing on behalf of nicobytes February 13, 2026 22:02 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes

Copilot feedback

6b96740

github-actions bot added Area : Backend PR changes Java/Maven backend code Area : Frontend PR changes Angular/TypeScript frontend code labels Feb 19, 2026

nicobytes commented Feb 19, 2026

View reviewed changes

...lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.scss Outdated Show resolved Hide resolved

Refactor tag storage field styles to unify with custom field styles

5891795

adrianjm-dotCMS requested review from KevinDavilaDotCMS, dario-daza, oidacra, rjvelazco and zJaaal February 19, 2026 14:54

Merge branch 'main' into 34450-task-migrate-persona-key-tag-field-to-…

f6224b1

…new-custom-field-api

zJaaal requested changes Feb 19, 2026

View reviewed changes

Merge branch 'main' into 34450-task-migrate-persona-key-tag-field-to-…

bafd465

…new-custom-field-api

adrianjm-dotCMS added 2 commits February 19, 2026 13:37

Refactor tag storage field styles to unify with custom field styles

18e40e4

Merge branch '34450-task-migrate-persona-key-tag-field-to-new-custom-…

99b0247

…field-api' of https://github.com/dotCMS/core into 34450-task-migrate-persona-key-tag-field-to-new-custom-field-api

adrianjm-dotCMS requested a review from zJaaal February 19, 2026 17:39

Conversation

nicobytes commented Feb 12, 2026 • edited by adrianjm-dotCMS Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Migrate Custom Fields to New Edit Mode and Consolidate Shared Styles

Summary

Changes

Custom Field Migrations

1. Personas KeyTag Field (keytag_custom_field)

2. File Browser Field (file_browser_field_render)

3. Tag Storage Field (tag_storage_field_creation)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zJaaal Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

zJaaal Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

adrianjm-dotCMS Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

nicobytes commented Feb 12, 2026 •

edited by adrianjm-dotCMS

Loading

1. Personas KeyTag Field (`keytag_custom_field`)

2. File Browser Field (`file_browser_field_render`)

3. Tag Storage Field (`tag_storage_field_creation`)