I work on a liferay 6.2 web site, I have a web content page where I can add articles and some others resources. I want to create function which where available in the pop-in action to copy or move to a selected destination.

But I don't know how to add those actions to my liferay portal.

I want to have my new actions available in the pop in when user click on the "Action" button (circle in red).

Create a Hook

From Liferay's Knowledge base

From your command line terminal, navigate to your Plugins SDK’s hooks folder. To create a hook project, you must execute the create script. Here’s the format to follow in executing the script:

create.[sh|bat] [project-name] "[Hook Display Name]"

On Linux and Mac OS X, you’d enter a command similar to the one in this example:

./create.sh journal-hook "Journal Hook"

On Windows, you’d enter a command similar to the one in this example:

create.bat journal-hook "Journal Hook"

Liferay IDE’s New Project wizard and the create scripts generate hook projects in your Plugin SDK’s hooks folder. The Plugins SDK automatically appends “-hook” to your project name.

You will need to have Apache ANT installed for this to work. Please reference the following documentation if you need to install it.

• https://www.mkyong.com/ant/how-to-install-apache-ant-on-windows/

Once the hook is created open it in your Liferay IDE or Liferay Developers Studio (or Eclipse). You should see something similar to this.

---

Journal JavaServer Page (JSP) hook

If you noticed above I used the word journal in the hook plugin's name. Journal is synonymous with web content in Liferay. Generally you will see Web Content used in written material for users and administrators, and journal used in material for developers.

Your question is rather large and it's really asking three main things.

1. How do we create a hook
2. What page do I override
3. How do I add an additional action in that icon menu
4. How do I create a popup window that spawns when I select my new menu option

Question #1 has already been answered. Question #2 is not explicitly clear from your post, however I am going to assume you are talking about view.jsp of the Journal Content portlet

A few things to note. View.jsp is Liferay's directory index page (akin to Apache's index.html). Liferay's "core" functionality is actually (for the most part) dozens of JSR-286 and JSR-186 portlets.

Question three is finally where we begin to start coding. Under your META-INF folder create a directory called jsp (this is where we put JSP override files by convention). Navigate to your liferay-hook.xml file, clear any existing content, and paste the following xml.

liferay-hook.xml

<hook>
    <custom-jsp-dir>/META-INF/jsp</custom-jsp-dir>
</hook>

If you are in Liferay Developer Studio make sure you are in the source tab as opposed to the Overview tab.

This folder now will now house every jsp file you wish to override. In this example we will only be overriding one file. This directory follows a particular convention over configuration whereby any jsp file you wish to override must exist inside this directory in the same relative location as it exists in the portal itself.

For our particular example, the Journal Content portlet's directory index file exists in the following directory.

META-INF/
      jsp/
        html/
          portlet/
            journal_content/
              + view.jsp

You do not need to create the entire structure yourself. You must only create your jsp folder. After you create that folder, open your liferay-hook.xml again but this time open it in Overview. Execute the following steps

1. Click the green plus sign next to the Custom jsps label.
2. Search for /html/portlet/journal_content/view.jsp
3. Double click on what should be the only item returned from the search
4. Ctrl + s to save

You should see the folder structure and directory index file created. If you switch back to source view, you will notice no new xml has been generated. This is how the convention over configuration works.

Now, in your WEB-INF folder create a new folder called html. Inside that folder create a new jsp called view.jsp. This will be your hooks directory index and it will be your popup window. Your structure should finally look like this.

Your hook plugin is completely configured and all that is left is the coding. In /html/view.jsp enter some boilerplate code.

<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util"%>

<liferay-ui:panel collapsible="false" title="Custom Option">
    <aui:form  name="fm" onSubmit="event.preventDefault();">
        <aui:input name="name" label="Name"></aui:input>
        <aui:button-row>
            <aui:button type="cancel" onClick="closeWindow('journalWindow');"></aui:button>
            <aui:button type="submit"></aui:button>
        </aui:button-row>
    </aui:form>
</liferay-ui:panel>

We just create a simple form which doesn't do anything strictly for show. As you see there is a

closeWindow(string)

function that we will define on our other page. Now, open the ../journal_content/view.jsp page. Directly below

<%@ include file="/html/portlet/journal_content/init.jsp" %>

add the following code

<liferay-portlet:renderURL var="customActionURL"  windowState="<%=LiferayWindowState.POP_UP.toString()%>">
    <portlet:param name="mvcPath" value="/html/view.jsp" />
</liferay-portlet:renderURL>

<aui:script use="aui-base, liferay-util-window, aui-io-plugin-deprecated">
    var A = AUI();
    A.one('#<portlet:namespace/>customAction').on('click', function(event){
    var custom_popup= Liferay.Util.Window.getWindow({
        dialog: {
            centered: true,
            constrain2view: true,
            modal: true,
            resizable: false,
            width: 475
        }
     }).plug(A.Plugin.DialogIframe, {
         autoLoad: true,
         iframeCssClass: 'dialog-iframe',
         uri:'<%=customActionURL.toString()%>'
     }).render();

     login_popup.show();
     login_popup.titleNode.html("Custom Action");
});


Liferay.provide(window, 'closeWindow', function(id) {
    var dialog = Liferay.Util.getWindow(id);
    dialog.destroy(); 
}, ['aui-base','aui-dialog','aui-dialog-iframe']);
</aui:script>

The code is pretty self explanatory but I will give a brief overview. The first few lines we create a url to our view.jsp page. We give it a variable name customActionURL to be referernced later, specify it is a popup window (so it doesn't show the portal theme's header inside the window, and we send an mvcPath parameter with out destination.

<liferay-portlet:renderURL var="customActionURL"  windowState="<%=LiferayWindowState.POP_UP.toString()%>">
    <portlet:param name="mvcPath" value="/html/view.jsp" />
</liferay-portlet:renderURL>

We then create an event listener for our yet to be created customAction icon. When clicked it will launch a new popup window with our renderURL destination. Finally, we create a a closeWindow function which closes the popup.

Lastly, we need to actually add the new icon item in the list. Locate the following piece of code.

<div class="lfr-icon-actions">
    <c:if test="<%= showEditArticleIcon %>">
        <liferay-portlet:renderURL portletName="<%= PortletKeys.JOURNAL %>" var="editURL" windowState="<%= WindowState.MAXIMIZED.toString() %>">
            <portlet:param name="struts_action" value="/journal/edit_article" />
            <portlet:param name="redirect" value="<%= currentURL %>" />
            <portlet:param name="groupId" value="<%= String.valueOf(latestArticle.getGroupId()) %>" />
            <portlet:param name="folderId" value="<%= String.valueOf(latestArticle.getFolderId()) %>" />
            <portlet:param name="articleId" value="<%= latestArticle.getArticleId() %>" />
            <portlet:param name="version" value="<%= String.valueOf(latestArticle.getVersion()) %>" />
        </liferay-portlet:renderURL>

        <liferay-ui:icon
            cssClass="lfr-icon-action lfr-icon-action-edit"
            image="edit"
            label="<%= true %>"
            message="edit"
            url="<%= editURL %>"
        />
    </c:if>

Directly underneath this code write the following.

<liferay-ui:icon iconCssClass="icon-link" message="Custom Action" id="customAction" />

if the parent window is redirecting you might need to add the following attribute

<liferay-ui:icon iconCssClass="icon-link" message="Custom Action" id="customAction" url="event.preventDefault()" />

---

Build and Run

Building and deploying hooks is a painless process. This directions cannot be exact because they are dependent on your application server.

These instructions are also dependent on your build tool. Liferay supports ANT, IVY, Maven, and Gradle. I am assuming you are using ANT.

Inside your IDE locate your hook's build.xml file. This is your ANT build script. Simply drag and drop that file into your ANT perspective.

Now double click on the all target.

You can also run this on the command line by navigating to your hooks folder in the system explorer and running

ant all

Once finished simply start your embedded Tomcat (or which servlet container you use).

Hope this helped. Please let me know any questions, comments, concerns, etc. I also would be very grateful for feedback!