Add custom action dropdown beside Edit and preview buttons in aem page.

Avatar

Avatar

yellar5366253

Avatar

yellar5366253

yellar5366253

06-03-2020

Hi EveryOne,

 

 I want to add a custom action dropdown ViewAs  like edit   in aem page , when the author  clicked on ViewAs dropdown will open and that dropdown showing group names like groupone and grouptwo and groupthree upto groupfive, if author select the groupone in viewas dropdown   and browser url  is 

 

<hostname>:portnumber/content/myproject/test02.html?groupName=groupone

Ex : localhost:4502/content/myproject/test02.html?groupName=groupone

 

Please let us know  any pointers .Urgent requirement.

Replies

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840
Arun_Patidar
MVP

06-03-2020

Hi,

That popover is created using javascript. 

Your idea is achievable but I am not able to guide you because of unclear requirement.

The group part is not clear, what do you mean by selecting groups from dropdown, where this groups comes from?

 

Anyways, there is a implementation I did to open page as preview, please check

https://aemlab.blogspot.com/2019/07/aem-add-view-button-to-view-pages.html

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

06-03-2020

Instead of tinkering with the AEM platform, you can as a test, try tinkering with the basePage template. Within your basePage template, you can add HTML and CSS like so:

 

<sly data-sly-test="${wcmmode.edit}">
 <style text="text/css">
   .extra-author-buttons { position: absolute; top: 50px; left; 50px; background-color: red; }
 </script>
 <div class="extra-author-buttons">
   <a href="${currentPage.path + '?groupName=groupone'">View Group One</a>
   <a href="${currentPage.path + '?groupName=grouptwo'">View Group Two</a>
 </div>
</sly>

 

Hope this helps.