Automatically convert content field values to URL-compatible strings when creating a URL-mapped content URL

[john-thomas-dotcms]

Parent Issue

No response

User Story

As a content architect, I want to be able to create a URL Pattern field without creating a separate URL Title field, so I can easily manage my URL-mapped content without relying on Velocity code.

Description

Currently, the URL Pattern field allows you to add the values of fields in the content type to generate the URL that the URL-mapped content will use. However, the URL Pattern takes the values from the fields literally, without making sure that they contain values compatible with URLs. So, almost all customers which use URL mapped content use a URL Title custom field which converts the value of some other field(s) (such as the Title field) into a URL-compatible string, and then they place the value of the URL Title field into the URL Pattern instead of placing the Title field into the URL Pattern directly.

We will change the behavior of the URL Pattern field, so the field values in it are automatically converted into URL-compatible values. This will allow customers to remove URL Title fields from their content and replace patterns that currently look like this:

/path/{urlTitle}

with patterns that look like this:

/path/{title}

Core Requirements

The way this conversion is done depends on the type of field put into the URL Pattern:

• Text: Perform conversion which exactly matches the conversion performed by the current URLTitle.vtl code.
• Textarea: Perform the same conversion as Text fields, but the value will be truncated at one of the following (whichever results in a shorter value):
  • The first line break.
  • 256 characters.
• WYSIWYG: Strip the HTML tags, then perform the same conversion as Textarea fields.
• Radio and Select: Use the key (the value before the pipe (|) character) of the selected value.
• Checkbox and Multi-Select: Concatenate the keys of all selected values, separating them with a dash (-).
  • Values will appear in the URL in the same order they appear in the field configuration in the dotCMS back-end.
• Tag: Convert each tag (the same way as Text fields), and concatenate them, separating them with a dash (-).
  • Values will appear in the URL in the same order the tags appear in the Tag field in the dotCMS back-end.
• Category: Replace each selected Category with the Category key, and concatenate them, separating them with a dash (-).
  • Values will appear in the URL in the same order the Categories appear in the Category list in the dotCMS back-end.
  • If a Category has no key assigned, the name of the Category will be converted (the same way as Text fields).
• Binary: Convert the file name (the same as Text fields).
• Date, Time, Date & Time:
  • Date values will be converted to text in the format YYYYMMDD.
  • Time values will be converted to text in the format hhmmss.
  • Date & Time values will be converted to text in the format YYYYMMDDhhmmss.

Additional Requirements:

• The length of the converted value for each field should not exceed 64 characters.
  • Fields which concatenate values (e.g. Checkbox, Multiselect, Tag, Category, and Relationship): 64 characters per value, 256 characters total.
  • All other fields: 256 characters
  • If any value would convert to longer than the limit, it will be truncated.
• The total length of the converted URL (including the text in the URL Pattern and all converted values) should not exceed 2048 characters.
  • If any URL would exceed 2048 characters, it will be truncated.

Out of Scope:

• The following field types are not supported:
  • Constant
  • File and Image
  • Relationship
  • Key/Value

Acceptance Criteria

1. On the starter site, all URL titles generated using the new method match the values in the existing URL Title fields.
2. The field values for each field type are converted according to the descriptions above. Examples:

• Text:
  • Field value: This is a Title
  • URL value: this-is-a-title
• Textarea (including Custom field, Hidden field, JSON):
  • Field value:
    This is line 1
This is line 2
  • URL Value: this-is-line-1
• WYSIWYG:
  • Field value:
    <h1>This is line 1</h1>
<p>This is line 2</p>
  • URL Value: this-is-line-1
• Radio and Select:
  • Field config:
    key1|Value 1
key2|Value 2
key3|Value 3
  • Field value: Value 2 selected
  • URL value: key2
• Checkbox and Multiselect:
  • Field config:
    key1|Value 1
key2|Value 2
key3|Value 3
  • Field value: Value 1 and Value 3 selected
  • URL value: key1-key3
• Tag:
  • Field value: [This is tag 1] [This is tag 2]
  • URL value: this-is-tag-1-this-is-tag-2
• Category:
  • Field value: Categories named Category 1, Category 3 and Category 5 are selected
  • Category 1 has a key of cat1, Category 3 has a key of cat3 and Category 5 has no key assigned
  • URL value: cat1-cat3-category-5
• Binary:
  • Field value: An image with the file name dotcms-logo-large-high-res.jpg
  • URL value: dotcms-logo-large-high-res-jpg
• Date and Time:
  • Field value: January 6, 2023 at 4:03:21 pm
  • URL value: 20230106160321

3. URLs generated from Custom Fields are generated from the value of the field, not the code in the field.

Proposed Objective

User Experience

Proposed Priority

Priority 3 - Average

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

https://dotcms.slack.com/archives/CQMHM7PNJ/p1740067609847969

Assumptions & Initiation Needs

This epic should be broken down into vertical slices based on the types of fields supported.

1. Text
2. Multiline text (Textarea, WYSIWYG, Custom field, Hidden field)
3. Date and Time
4. Selection (Radio, Select, Checkbox, Multiselect)
5. Taxonomy (Tag, Category)
6. File (Binary)

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response