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

[SHIBANI06]

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 !!

[A_H_M_Imrul · Accepted solution]

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

[SHIBANI06]

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]

@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.

[SHIBANI06]

@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]

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