How to set a link to be applied to the whole fragment

Issue

• Sometimes, the need of establishing a link that applies to the whole fragment arises.
• The first idea that might come up is usually to use nested editable fields. However, nested editable fields are not supported.

Environment

• Liferay DXP 7.4+

Resolution

• There would be two alternative ways to achieve this:
  1. Use the container fragment to gather all the elements that correspond to the link, and use the "Link" Container Option to map the container to the convenient URL.
  2. Use the recently created URL configuration type added in LPS-164081 and LPS-164123 available since Update 45. In this case, a new configuration field of type url should be added to the fragment's configuration. Once done this, then the value configured by the user could be referenced as a FreeMarker variable in the href attribute of the anchor which wraps the editable field values:

<div>
    <div class="card">
         <a href="${configuration.myurl}">
            <div class="card-body">
                <div class="upper">
                    <h2 data-lfr-editable-id="title" data-lfr-editable-type="text">Header</h2>
                </div>
                <div>
                    <p data-lfr-editable-id="description" data-lfr-editable-type="text">Description</p>
                </div>
              </div>
           </a>
    </div>
</div>

 

{
    "fieldSets": [
        {
            "fields": [
                {
                    "name": "myurl",
                    "label": "URL",
                    "type": "url"
                }
            ]
        }
    ]
}

Additional Information

• LPS-164081: As a fragment developer, I would like to create fragments that include a "url" configuration type.
• LPS-164123: Add configuration type url
• Fragment Configuration Types Reference: URL Configuration