Open all the regional pages of a particular page on button click | Community
Skip to main content
S
SHIBANI06
Level 4
September 22, 2023
Solved

Open all the regional pages of a particular page on button click

  • September 22, 2023
  • 2 replies
  • 872 views

Hi,

 

I want to implement a feature which would open all the regional pages of a particular page in new tabs on a button click.

For ex: if I am in this page -> /content/your_projetct/us/en_us/homepage.html and click on my customized 'Preview' button it should open homepage of all other regions in view as published mode if it exists for that region in new tabs.

Can someone guide on how this can be achieved?

 

Thank you !!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by A_H_M_Imrul

Hello @shibani06 

 

If the url pattern is same then you can do something similar to this: 

- create a servlet that will take the current page path as param and generate other alternate regional paths  

- create a custom component that will only be visible on author in view as published (wcmmode=disabled)

- the component will render the following markup with the JS from a clientlibs 

 

 

<input id="Button1" type="button" value="button" onclick="fetchAndOpenURLs()" /> <script type="text/javascript"> function fetchAndOpenURLs() { // Send an AJAX request to the servlet to get the generated URLs. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var urls = JSON.parse(xhr.responseText); // Open each URL in a new tab. urls.forEach(function(url) { window.open(url, '_blank'); }); } }; xhr.open('GET', '/your-web-app-context-path/generateURLs', true); xhr.send(); } </script>

 

To perform well you can keep a map of locales in the cache after first invocation:

[ { "us": ["en_us"], "be": ["nl_be", "fr_be"], .. } ]

 

Let me know if that make senses..

 

Thanks

2 replies

A_H_M_Imrul
Community Advisor
A_H_M_ImrulCommunity AdvisorAccepted solution
Community Advisor
September 22, 2023

Hello @shibani06 

 

If the url pattern is same then you can do something similar to this: 

- create a servlet that will take the current page path as param and generate other alternate regional paths  

- create a custom component that will only be visible on author in view as published (wcmmode=disabled)

- the component will render the following markup with the JS from a clientlibs 

 

 

<input id="Button1" type="button" value="button" onclick="fetchAndOpenURLs()" /> <script type="text/javascript"> function fetchAndOpenURLs() { // Send an AJAX request to the servlet to get the generated URLs. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var urls = JSON.parse(xhr.responseText); // Open each URL in a new tab. urls.forEach(function(url) { window.open(url, '_blank'); }); } }; xhr.open('GET', '/your-web-app-context-path/generateURLs', true); xhr.send(); } </script>

 

To perform well you can keep a map of locales in the cache after first invocation:

[ { "us": ["en_us"], "be": ["nl_be", "fr_be"], .. } ]

 

Let me know if that make senses..

 

Thanks

    S
    SHIBANI06Author
    Level 4
    September 22, 2023

    Hi @a_h_m_imrul ,

     

    Thanks for the suggestion.

    I have overlaid the Preview button and added a granite:class to it , so that I can call the js function on click of this button. 
    Let me try out the servlet approach like you suggested.

     

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      September 28, 2023

      @shibani06 Did you find the suggestion from @a_h_m_imrul helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

      Kautuk Sahni
      S
      SHIBANI06Author
      Level 4
      September 28, 2023

      @kautuk_sahni 

      Yes @a_h_m_imrul 's solution was helpful, I followed the servlet approach and used the overlay option to overlay the Preview button and used granite:class to implement the servlet call via AJAX  on click of that button.

      I however am not able to mark it as solution as I do not see an option.

       

      Thank you 

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        September 28, 2023

        @shibani06, it should be visible now. Thank you!!

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...