RE: RE: how to use Liferay.Util.openModal

Scarletake Bwi, modified 3 Years ago. Expert Posts: 327 Join Date: 12/20/10 Recent Posts

hi 

i try create a popup window in my portlet, like "sign in"


 

<aui:script position="inline" use="aui-base">
window.showSnmUploadWuFileDialogJS2 = function(id) {
		
		Liferay.Util.openModal(
			{
				title: '<%=descriptionUploadWUFile%>',
				centered: true,
                modal: true,
                height: 650,
				url: '<%=uploadWuURL.toString()%>&<portlet:namespace />targetOrderNumber='+id,
				size: 'md'
			}
		);

		
}
</aui:script>
		<aui:form id="test"  method="post">
			<aui:fieldset >
			<aui:row>
				<aui:col >
						<aui:select name="select"
							id="select"
							label="select" inlineField="false">
							<aui:option value="0" label="0" />
							<aui:option value="1" label="1" />
							<aui:option value="2" label="2" />
							<aui:option value="3" label="3" />
						</aui:select>
				</aui:col>
				<aui:col >
				<aui:select name="select2" id="selectid" label="select2">
							<aui:option value="0" label="Non" selected="false" />
							<aui:option value="1" label="Len" selected="true" />
							<aui:option value="2" label="Gnd" selected="false" />
							<aui:option value="3" label="Ora" selected="false" />

						</aui:select>
				</aui:col>
				</aui:row>

				</aui:fieldset>
	

		</aui:form>

but it shows

All components are close to the frame, no space is left, it looks ugly

how to make it display just like in normal jsp page?

thanks in advance

thumbnail
Scarletake Bwi, modified 3 Years ago. Liferay Master Posts: 593 Join Date: 8/8/14 Recent Posts

Hi ,

This would be because AUI taglib is not loaded in your modal page , you can include aui taglib in your popup jsp and also try opening modal with Liferay.Util.openWindow

 

Liferay.Util.openWindow(
            {
                dialog: {
                    destroyOnHide: true,
                },
                title: 'PopUp Page',
                uri: '<%=popupURL.toString()%>'
            }
        );

 

Scarletake Bwi, modified 3 Years ago. Expert Posts: 327 Join Date: 12/20/10 Recent Posts

hi 

thank you for reply

but i have add

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

in my modal page, and other object such like java.util.List had included.

could you please explain what different between openWindow and openModal?

thumbnail
Scarletake Bwi, modified 3 Years ago. Liferay Master Posts: 593 Join Date: 8/8/14 Recent Posts

Hi ,

Open Window is normally used for rendering a jsp and performing action inside it , Open Modal will open div for html content.

You can refer below link for detail and example

https://www.liferaystack.com/2017/09/aui-popup-and-aui-modal-dialog-in-liferay-7.html 

Scarletake Bwi, modified 3 Years ago. Expert Posts: 327 Join Date: 12/20/10 Recent Posts

hi 

thank you for reply.

i tried, change from openModal to openWindow, and cahnge from url to uri, but doesn't work.

thumbnail
Mohammed Yasin, modified 3 Years ago. Liferay Master Posts: 593 Join Date: 8/8/14 Recent Posts

Hi ,

Can you please share the updated code used for creating AUI pop up.

Scarletake Bwi, modified 3 Years ago. Expert Posts: 327 Join Date: 12/20/10 Recent Posts

hi Mohammed

sure

i create a sample mvc bodule

init.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

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

<liferay-theme:defineObjects />

<portlet:defineObjects />


<%@ page import="com.liferay.portal.kernel.util.ListUtil"%>
<%@ page import="com.liferay.portal.kernel.dao.search.ResultRow"%>
<%@ page import="com.liferay.portal.kernel.dao.search.SearchEntry"%>
<%@ page import="com.liferay.portal.kernel.util.ParamUtil"%>
<%@ page import="com.liferay.portal.kernel.util.WebKeys"%>
<%@ page import="com.liferay.portal.kernel.language.LanguageUtil"%>
<%@ page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>

 

view.jsp

<%@ include file="/init.jsp" %>
<%
String showEditSnmPrefixDialogJS = "JavaScript:showopenModal('" + 99 + "');";

%>
		<aui:form id="test"  method="post">
			<aui:fieldset >
			<aui:row>
				<aui:col width="50">
						<aui:select name="select"
							id="select"
							label="select" inlineField="false">
							<aui:option value="0" label="0" />
							<aui:option value="1" label="1" />
							<aui:option value="2" label="2" />
							<aui:option value="3" label="3" />
						</aui:select>
				</aui:col>
				<aui:col width="50">
				<aui:select name="select2" id="selectid" label="select2">
							<aui:option value="0" label="Non" selected="false" />
							<aui:option value="1" label="Len" selected="true" />
							<aui:option value="2" label="Gnd" selected="false" />
							<aui:option value="3" label="Ora" selected="false" />
						</aui:select>
				</aui:col>
				</aui:row>

				</aui:fieldset>
	

		</aui:form>
<liferay-ui:icon  image="edit" message="test" url="<%=showEditSnmPrefixDialogJS%>" />
	
<portlet:renderURL var="openModal" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
	<portlet:param name="mvcPath" value="/second.jsp"/>
</portlet:renderURL>
<aui:script position="inline" use="aui-base">
window.showopenModal = function(id) {
		
		Liferay.Util.openModal(
			{
				title: 'test',
				centered: true,
                constrain2view: false,
                modal: true,
                height: 650,
				resizable: true,
				url: '<%=openModal.toString()%>&<portlet:namespace />targetPart='+id,
				size: 'md'
			}
		);

		
}
</aui:script>


 

the second.jsp

<%@include file="/init.jsp"%>
<%
	String partNumber = ParamUtil.getString(request, "targetPart");
%>


		<aui:form id="test"  method="post">
			<aui:fieldset >
			<aui:row>
				<aui:col width="50">
						<aui:select name="select"
							id="select"
							label="select" inlineField="false">
							<aui:option value="0" label="0" />
							<aui:option value="1" label="1" />
							<aui:option value="2" label="2" />
							<aui:option value="3" label="3" />
						</aui:select>
				</aui:col>
				<aui:col width="50">
				<aui:select name="select2" id="selectid" label="select2">
							<aui:option value="0" label="Non" selected="false" />
							<aui:option value="1" label="Len" selected="true" />
							<aui:option value="2" label="Gnd" selected="false" />
							<aui:option value="3" label="Ora" selected="false" />

						</aui:select>
				</aui:col>
				</aui:row>

				</aui:fieldset>
	

		</aui:form>

 

thumbnail
Mohammed Yasin, modified 3 Years ago. Liferay Master Posts: 593 Join Date: 8/8/14 Recent Posts

Hi ,

You may need to fix this with css, either you can provide style to that particular jsp or update portal_pop_up.ftl file in your theme.

Ex. you can add below code in your second.jsp or add required CSS in portal_pop_up.flt in theme.

<style>
	.fieldset  {
		padding:3% !important;
	}
</style>	

Scarletake Bwi, modified 3 Years ago. Expert Posts: 327 Join Date: 12/20/10 Recent Posts

hi Mohammed

first, thank you, very, super much.

it's really help.

is there any way to make it shows two columns?

as you can see, in my second.jsp, i put 2 cols in 1 row, but it just show 2 rows. or that is the limitation?