Validate if the user entered URL incorrectly in a field in Composite Multifield. Dialog of Core Image component extended to add a new tab Overlay Links for adding text overlays with links, on image....
1) Extend the Image component cq:dialog (/apps/eaem-composite-mf-field-validate/components/image/cq:dialog) to add Overlay Links tab; pageLink node has validator set validation="urls.validation" in below xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Image"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[core.wcm.components.image.v3.editor,core.wcm.components.commons.editor.dialog.pageimagethumbnail.v1]"
helpPath="https://www.adobe.com/go/aem_cmp_image_v3"
trackingFeature="core-components:image:v3">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
granite:class="cmp-image__editor">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<links
jcr:primaryType="nt:unstructured"
jcr:title="Overlay Links"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<linksList
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<multi
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
class="full-width"
composite="{Boolean}true"
fieldDescription="Click the '+' to add a new image overlay text and url."
fieldLabel="Overlay Links list"
fieldName="List of Links"
name="linksList">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
name="./linksList">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<linkText
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Link Text"
name="./linkText"/>
<pageLink
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Link Path"
validation="urls.validation"
name="./pageLink"
rootPath="/content"/>
</items>
</column>
</items>
</field>
</multi>
</items>
</linksList>
</items>
</column>
</items>
</columns>
</items>
</links>
</items>
</tabs>
</items>
</content>
</jcr:root>
2) Add a clientlib /apps/eaem-composite-mf-field-validate/clientlibs/clientlib-mf-validate with dependencies=[eaem.lodash] and categories=[cq.authoring.dialog.all] to add the necessary url validation logic...
(function ($, $document) {
$document.on("foundation-contentloaded", () => {
const registry = $(window).adaptTo("foundation-registry");
registry.register("foundation.validation.validator", {
selector: '[data-foundation-validation=urls.validation]',
validate: validateURL
});
});
const validateURL = (el) => {
let errorMessage = '',
url = el.value;
try {
if(!url.startsWith("/content")){
new URL(url);
}
} catch (err) {
errorMessage = 'URL must follow the format “https://www.example.com”';
}
return errorMessage;
}
}(jQuery, jQuery(document)));
No comments:
Post a Comment