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

Adding .html extension to page selected

Avatar

Level 5

Is there a way to add the .html extension to the page selected from a granite/ui/components/foundation/form/pathbrowser?

Thank you in advance.

-Dean Anderson

1 Accepted Solution

Avatar

Correct answer by
Level 9

@Dean,

You can achieve it. However, That is something difficult and not a ideal solution. Here are the things you need to do to populate URL's with ".html":

  1. Add a listener at the pathBrowser field to get the JSON response with ".html" appended in the URI
  2. Write a servlet to return a JSON response contains entries of URI's with ".html"'s.
  3. Write a extjs code in the listener (line-1) to iterate and set the uril's one by one (if there are multiple).

If you want to save, you still have to write so much code (listener on 'ok' button etc).

--Jitendra

View solution in original post

11 Replies

Avatar

Level 9

Hey Dean,

You can. That would be wrong if you get ".html" extension on every URI provided in the pathBrowser field. That's the reason, it has been avoided. In order to get ".html", you can write a small piece of code which determines whether the provided URI is an internal page or not and also checked that URI is a CQ page or not. if it is an internal page, append ".html" extension to that URI.

Here is the piece of code (Groovy) which could help you.

 static String resolveURI(ResourceResolver resolver, String url) {
        resolver.getResource(url)?.adaptTo(Page.class) != null ? url + ".html" : url
    }

The Second option could be, Change the pathBrowser plugin but as I said, that would add ".html" to every URI.

--

jitendra

Avatar

Level 10

I guess the simplest solution is you can take care of this at development side in JSP or Sightly file. Below code shows using JSTL in JSP

  1. <c:choose>
  2. <c:when test="${(fn:startsWith(listLink,'/content/dam')) || (fn:contains(listLink,'.'))}">
  3. <c:set var="listLink" value="${listLink}"/>
  4. </c:when>
  5. <c:otherwise>
  6. <c:set var="listLink" value="${listLink}.html"/>
  7. </c:otherwise>
  8. </c:choose>

Avatar

Administrator

Hi 

Apart from what mentioned above, please have a look the stackoverflow answer.

//

The pathfield xtype has a config option called linkpattern. This allows you to configure the widget to automatically add an extension in case the browsefield is used to select the link. If a user types the text , the extension is not added. Use this option to add '.html' and all internal links will have .html appended (assuming the content authors always use the pathfield's browse option to select the link [which they should be doing ] ). This way the backend code doesn't have to be responsible for checking if link is external or internal and appending the extension.

property : "linkPattern" , value : "{0}.html" (String)

Reference : http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.form.PathField

Link:- http://stackoverflow.com/questions/29792000/how-to-avoid-hardcoding-html-extension-across-all-the-li...

I hope this would help you.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 10

Hi kautuk,

Don't you think so we need to take care of selecting an .pdf or .image apart from page.

If user select page, it will work fine, but if pdf is selected, then also it will add .html extension .

Correct me if I am wrong..

Thanks

Avatar

Level 9

Best option (As my previous post) to go would backend code which could be moved to Util class.

--

jitendra

Avatar

Administrator

Hi Praveen

 

This is a Good catch. But that could also be filtered out using "maskRe" or "regex" Property .

As mentioned by you in one of the recent thread post :-  http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

Please correct me if i am wrong somewhere. I would really relish improving AEM skills :).

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 5

This is what I'd like to do, but I'm not sure how to implement such a thing.

My current cq:dialog is pointing to a pathbrowser.  I'd like to have some back-end code (utility) that would run when the user selects the path.  Either when they return from the pathbrowser dialog it would be populated with .html (if appropriate) or prior to saving to jcr:content.  Another option would be when they get the content, have something that triggers a utility to determine whether or not to add .html

Is any of that possible?

Thanks again in advance for your assistance.

-Dean

Avatar

Correct answer by
Level 9

@Dean,

You can achieve it. However, That is something difficult and not a ideal solution. Here are the things you need to do to populate URL's with ".html":

  1. Add a listener at the pathBrowser field to get the JSON response with ".html" appended in the URI
  2. Write a servlet to return a JSON response contains entries of URI's with ".html"'s.
  3. Write a extjs code in the listener (line-1) to iterate and set the uril's one by one (if there are multiple).

If you want to save, you still have to write so much code (listener on 'ok' button etc).

--Jitendra

Avatar

Level 5

All,

Thank you so much for your suggestion and help.

I was able to get this resolved by using some javascript.

Thanks Again.

-Dean

Avatar

Level 2

Hi @deana66659071 ,

Can you please elaborate on how you did this solution. If possible can you please provide source code if there is no issue.

 

Thanks,

Manikanta

Avatar

Level 10

I just used this solution - in case anyone comes across this again:

<div class="card" style="width:280px" style="padding-top:20px;">

  <img class="card-img-top" src=${properties.path} alt="Card image cap">

  <div class="card-body">

    <h5 class="card-title">${properties.heading}</h5>

    <p class="card-text">${properties.description}</p>

   <a href="${properties.page}.html" class="btn btn-primary">${properties.button}</a>

  </div>

</div>

That works fine!