How can I open a pop up of my JSF portlet's edit mode?

Question

When opening the configuration mode of a Liferay portlet it opens in a pop up dialog:

How can I get my JSF portlet to open a similar pop up but for edit mod

Answer 1

In Liferay 6.2+:

For the most part, you can open edit mode of a JSF portlet the same way for both JSF and JSP portlets: via the client-side JS Liferay.Util.Window.getWindow() method. To create the dialog, you will need to get a render URL for the portlet in edit mode and pop up state via portlet:renderURL:

<portlet:renderURL var="popUpEditModeURL" escapeXml="false"
    portletMode="edit" windowState="pop_up" />

Then use the URL in the Liferay.Util.Window.getWindow() method:

<h:outputScript>
    AUI().use('liferay-util-window', function(A) {
        var popUp = Liferay.Util.Window.getWindow({
            dialog: {
                centered: true,
                constrain2view: true,
                resizable: false
            }
        }).plug(A.Plugin.DialogIframe, {
            autoLoad: true,
            iframeCssClass: 'dialog-iframe',
            uri:'#{popUpEditModeURL}'
        }).render();

        // call `popUp.show();` to show the dialog.
    });
</h:outputScript>

Then call popUp.show() whenever you want to show the portlet in edit mode.

Alternatively, you could use a Liferay Faces Alloy's dialog (or any other component suite's dialog) with an iframe inside it to show edit mode in a dialog:

<alloy:dialog height="95%" width="95%" clientKey="dialog">
    <iframe height="100%" width="100%" src="${popUpEditModeURL}" />
</alloy:dialog>

However, this method may not produce exactly the same effect as using Liferay.Util.Window.getWindow().

Full disclosure: I am one of the developers of Liferay Faces Alloy.