Portlet Ids Bookmarklet

The nice thing about Liferay's drag and drop layout is that you (usually) don't have to remember any of the portlet ids. At least, until you do.

If you skim through portal.properties, there's a set of properties all prefixed with default.user.layout which let you control this. However, it wants portlet ids, which Liferay doesn't readily give to you unless you dig through /portal/portal-web, /ext/ext-web, and /plugins/portlets.

So, I wanted to create something which converted a layout, like this into a quick reference for all the different portlet ids, like this, Without digging through the backend and/or mousing over the configuration links.

So, while I'm not familiar enough with Liferay to implement a server-side way to do this, I dug through "view page source" and found that it was pretty straightforward to write a bookmarklet which, when run on a Liferay-based page, gives me the name-to-id mapping for all the portlets currently on the page in a Liferay.Popup.

To use it, convert the script below into a bookmarklet (you can use use this one which turns up in a Google search) and paste the bookmarklet into your address bar. Voila! Instant popup containing the portlet ids.

var portletFinder =
{
    getPortletId :
        function( spanObj )
        {
            var portlet = spanObj;
            while ( portlet && portlet.className != "portlet" )
                portlet = portlet.parentNode;

if ( !portlet )
                return "";

var id = portlet.id.substring( "portlet-wrapper-".length );
            var warIndex = id.indexOf( "_WAR" );
            if ( warIndex != -1 )
                id = id.substring( 0, warIndex );

return id;
        },

getPortletName :
        function( spanObj )
        {
            var tagless = spanObj.innerHTML.replace( /<[^>]+>/g, "" );
            var trimmed = tagless.replace( /^\s+|\s+$/g, "" );
            return trimmed;
        },

getPortletIds :
        function()
        {
            var portletIds = new Array();
            var spans = document.getElementsByTagName( "span" );
            for ( var i = 0; i < spans.length; ++i )
            {
                if ( spans[i].className.indexOf( "portlet-title" ) == 0 )
                {
                    var id = this.getPortletId( spans[i] );
                    var name = this.getPortletName( spans[i] );
                    portletIds.push( name + "\n => " + id );
                }
            }
            return portletIds;
        },

showPortletIds :
        function()
        {
            var popup = Liferay.Popup( {
                modal: true,
                width: 300,
                height: 200,
                title: "Portlet Ids",
                message: "<pre>" + this.getPortletIds().join( "\n" ) + "</pre>"
            } );
            popup.style.overflow = "scroll";
        }
};

portletFinder.showPortletIds();

3 Comments

Please sign in to comment.

Hey Minhchau,

Welcome to the team! This is an awesome little tool. To give some background, this little tool basically scrapes your Liferay Portal page for all the portlet id's using Javascript, instead of having to dig through the backend to figure out what's actually on there (database, portlet.xml, etc).

Minhchau, maybe you could post a few screenshots of this in action?

Menu Display

Blogs

Category Filter

More Blog Entries

How I configured Liferay to use Gmail as my SMTP server

4.3.4 Released