style: update SCSS and VTL files for improved layout and functionality#34535
Open
style: update SCSS and VTL files for improved layout and functionality#34535
Conversation
- Modified SCSS for native field component to include additional button class. - Added Prettier configuration for VTL files to enforce HTML parsing. - Refactored JavaScript in VTL files for cache TTL and redirect custom fields to enhance readability and maintainability. - Updated OG preview VTL files to improve structure and styling consistency. - Enhanced text count VTL files for better character counting functionality and UI presentation. - Adjusted template custom field VTL files to streamline parsing logic. These changes aim to improve the overall user experience and maintainability of the codebase.
- Updated multiple VTL files to improve consistency in parsing logic for new and old custom fields. - Ensured proper indentation and formatting for better readability. - Changes applied to cache TTL, OG preview, redirect, template, text count, and title custom field VTL files. These modifications enhance maintainability and readability across the codebase.
- Deleted the `.prettierrc.json` file from the project as it is no longer needed for VTL file formatting. - This change simplifies the project structure and removes unnecessary configuration files.
Contributor
Author
|
QA notes: 
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR modernizes several dotCMS Velocity custom-field templates used in HTML Page editing (both legacy Dojo and the newer DotCustomFieldApi-based edit mode), improves UI behavior (notably redirect clearing), and adds local formatting tooling for .vtl files. It also updates Angular styling rules so custom buttons in these fields are styled consistently.
Changes:
- Refactors/normalizes JS + HTML/CSS formatting across multiple
*_new.vtland*_old.vtlcustom field templates. - Enhances the redirect custom field UX by adding a dedicated “clear redirect” button in the new edit mode template.
- Adds a local Prettier override for
.vtlfiles and adjustsnative-fieldSCSS button selector exclusions to accommodate new custom buttons.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/title_custom_field_old.vtl | Reformats legacy Dojo-based title field JS and markup. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/title_custom_field_new.vtl | Updates new edit-mode title field wiring via DotCustomFieldApi. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/title_custom_field.vtl | Wrapper template selecting legacy vs new edit mode include. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/text_count_old.vtl | Reformats legacy text count UI and DotCustomFieldApi change handling. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/text_count_new.vtl | Reformats new edit-mode text count logic and markup. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/text_count.vtl | Wrapper template selecting legacy vs new edit mode include. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field_old.vtl | Refactors legacy template selector logic (Dojo + REST calls) for readability. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field_new.vtl | Maintains/expands custom dropdown template selector logic and styling in new edit mode. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field.vtl | Wrapper template selecting legacy vs new edit mode include. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/redirect_custom_field_old.vtl | Reformats legacy redirect field (Dojo FileBrowserDialog). |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/redirect_custom_field_new.vtl | Adds clear button + refactors new redirect field modal handling. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/redirect_custom_field.vtl | Wrapper template selecting legacy vs new edit mode include. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_old.vtl | Reformats legacy OG preview (Dojo dialog). |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_new.vtl | Updates new OG preview UI using <dialog> and DotCustomFieldApi. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview.vtl | Wrapper template selecting legacy vs new edit mode include. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field_old.vtl | Reformats legacy cache TTL textbox wiring (Dojo). |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field_new.vtl | Refactors new cache TTL field binding via DotCustomFieldApi. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field.vtl | Wrapper template selecting legacy vs new edit mode include. |
| dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/.prettierrc.json | Adds local Prettier override to format .vtl as HTML. |
| core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.scss | Excludes .custom-button from generic button styling to support the new redirect clear button. |
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_new.vtl
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field_new.vtl
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_new.vtl
Outdated
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_new.vtl
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/title_custom_field_old.vtl
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/text_count_old.vtl
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/text_count_new.vtl
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field_new.vtl
Show resolved
Hide resolved
dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_old.vtl
Show resolved
Hide resolved
- Updated the OG preview close button in the VTL file to include an `aria-label` for improved accessibility. - This change ensures that screen readers can properly identify the button's function, enhancing the user experience for visually impaired users.
dario-daza
approved these changes
Feb 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request updates several custom field templates in the DotCMS Velocity assets, focusing on improving code consistency, readability, and user experience. The main changes include significant refactoring of JavaScript and HTML for modern syntax, improved UI elements, and the addition of a Prettier configuration for formatting
.vtlfiles.Code and UI Modernization
*_new.vtland*_old.vtlfiles forcachettl,og_preview,redirect, andtemplatecustom fields to use consistent double quotes, modern syntax, and improved formatting for better readability and maintainability. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]Conditional Parsing Simplification
.vtlfiles (cachettl_custom_field.vtl,og_preview.vtl,redirect_custom_field.vtl,template_custom_field.vtl) by reducing Velocity syntax complexity, making the templates easier to maintain. [1] [2] [3] [4]Styling Consistency
og_preview_new.vtland updated selector innative-field.component.scssto ensure consistent styling and proper targeting of custom buttons. [1] [2] [3]Tooling and Formatting
.prettierrc.json) to ensure consistent formatting of.vtlfiles using the HTML parser, supporting future maintainability.Minor Cleanups
These changes collectively modernize the codebase, enhance user experience, and streamline template maintenance.
This PR fixes: #32651