Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Enforce SEO Friendly Page Name

Avatar

Level 10

Hi Community Members, 
In alignment with SEO best practices, our objective is to enforce specific constraints on the "Name" field within Page Properties. We intend to restrict authors to utilizing lowercase letters, numbers, and dashes exclusively.

Additionally, our goal is to prevent the inclusion of consecutive dashes within this field. This restriction applies to both automatically generated names and names manually entered for pages. How can we go about achieving this requirement?

1 Accepted Solution

Avatar

Correct answer by
Level 10

I found an implementation using validation property to enforce the validation.

<pagename jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Name"
  name="pageName"
  validation="seo.pagename"/>
(function($, Coral) {
  "use strict";
  var registry = $(window).adaptTo("foundation-registry");
  registry.register("foundation.validation.validator", {
    selector: "[data-validation=seo.pagename]",
    validate: function(element) {
      let value = $(element).val();
      // validate name here 
      if(!valid) {
        return "Error Message";
      }  
    }
  });
})(jQuery, Coral);

 

View solution in original post

4 Replies

Avatar

Level 5

I am assuming this theory but feel free to point out if there is an issue with my thought process. Hypothetically speaking. This may not be so straight forward but probably may require multiple customizations. Today no matter we create pages using Ui or backend, we may end up going with page manager api. Perhaps to enforce the custom requirements we have, may be we can add a wrapper on top of page manager where custom page manager wraps the actual page manager instance so before we  try creating a page it can probably do the required validation and then act accordingly. But the catch is if you are calling the code directly probably this is straight forward, but if you want your code to get picked up just by doing adapt to call on page manager may be a custom adaptable/adapter implementation is necessary with appropriate ranking set. But if we go through this approach we have to figure out a way to get our custom page manager and then pick the actual internal implementation of page manager, which I can't think of right out of the box. But sounds like doable. But if we manage to get the api viable regardless of the interface we use rules can be enforced. 

Avatar

Correct answer by
Level 10

I found an implementation using validation property to enforce the validation.

<pagename jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Name"
  name="pageName"
  validation="seo.pagename"/>
(function($, Coral) {
  "use strict";
  var registry = $(window).adaptTo("foundation-registry");
  registry.register("foundation.validation.validator", {
    selector: "[data-validation=seo.pagename]",
    validate: function(element) {
      let value = $(element).val();
      // validate name here 
      if(!valid) {
        return "Error Message";
      }  
    }
  });
})(jQuery, Coral);

 

Avatar

Community Advisor

If the scope is limited to the page name only, I think you could just add a JS validation function that can check the rules you need prior to creating or renaming a page.

 

See more about validation here (just make sure to target the proper clientlibs group):

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/touch-ui-dialog-regex-vali... 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-validation-for-dial... 



Esteban Bustamante

Avatar

Level 5

Was about to say the same. If the intention is just clientside, a custom clientlib doing validation is good. But since the post mentioned about pages created programmatically as well, I suggested the back end approach