how to use Liferay.Util.openModal

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

2022-04-22T09:36:51Z

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?

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

2022-04-22T08:29:30Z

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>

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

2022-04-22T01:41:01Z

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>

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

2022-04-20T19:08:52Z

Hi ,

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

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

2022-04-20T15:17:43Z

thank you for reply.

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

RE: how to use Liferay.Util.openModal

2022-04-22T09:30:31Z

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

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

2022-04-20T14:00:27Z

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?

RE: how to use Liferay.Util.openModal

2022-04-22T09:30:29Z

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()%>'
            }
        );

how to use Liferay.Util.openModal

2022-04-20T03:07:34Z

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