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:

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

    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.
    });

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: