« Back

Open Document Library popup in custom portlet

General Blogs July 11, 2013 By priti parmar

Step 1 : create document library URL in your jsp

    <% long dlScopeGroupId = themeDisplay.getScopeGroupId();

          LiferayPortletURL documentLibURL = PortletURLFactoryUtil.create(request,          

          PortletKeys.JOURNAL, themeDisplay.getPlid(), PortletRequest.RENDER_PHASE);




          documentLibURL.setParameter("groupId", String.valueOf(dlScopeGroupId));



Step 2: Create a div or html content

         <input type="hidden" name="<portlet:namespace/>documentLibraryInput" 

               id="<portlet:namespace/>documentLibraryInput" />

         <div class="profile-image">

          <img class="journal-image" hspace="0" id="<portlet:namespace/>article-image" src=""   

           style="width:82px;height:83px" vspace="0" />


<div class="image-data">


<a style="text-decoration: none;cursor: pointer;"

onclick="javaScript:<portlet:namespace/>showImages()" >

Select a thumbnail image





Step 3: Create javascript Function

<script charset="utf-8" type="text/javascript">

function <portlet:namespace/>showImages()


AUI().ready('aui-dialog','aui-dialog-iframe','aui-overlay-manager','liferay-portlet-url', function(A) {

var url = '<%= documentLibURL %>';

window.myDialog = new A.Dialog(


title: '',

width: 1050,

draggable: true,

modal: true,

xy: [150, 50],






uri: url,

iframeCssClass: 'dialog-iframe'








Step 4 : after completion of step 3 on click of Select a thumbnail image Document Library popup will be open, now after choosing an image from poprup we need to keep those values in parameters of jsp

<script charset="utf-8" type="text/javascript">

function _15_selectDocumentLibrary(url) {

document.getElementById("<portlet:namespace/>documentLibraryInput").value = url;

var pic1 = document.getElementById("<portlet:namespace/>article-image");

pic1.src = url;

var iframe = document.getElementById('documentDetails');




Threaded Replies Author Date
Thanks for the share. It would be nice to see a... Blake Smith July 12, 2013 2:46 PM

Thanks for the share. It would be nice to see a demo or some screen shots.
Posted on 7/12/13 2:46 PM.