Primefaces 6.1 columnToggler on Liferay 7

[William Gosse, geändert vor 6 Jahren.]

I'm having an issue with the Primefaces 6.1 columnToggler on Liferay 7. I created a portlet with a dataTable that has a columnToggler on it. The toggler seems to be working fine but if I go to another page the toggler dropdown is being rendered in the upper left corner of my portal.

		<h:form id="loanForm" onkeypress="if (event.keyCode == 13) { return false; }">
			<p:datatable id="loansTable" var="loan" reflow="true" value="#{loanView.loans}" widgetvar="loansTableWidgetVar" emptymessage="No records found with given criteria" filteredvalue="#{loanView.filteredLoans}" paginatortemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" paginator="true" rows="50" rowsperpagetemplate="50,100,150,200" sortmode="multiple" rowkey="#{loan.id}" rowindexvar="rowIndex">

				<f:facet name="header">
					<p:toolbar style="border: none; padding: 0; background: none;">
						<f:facet name="left">
							<p:commandbutton id="addLoanButton" style="padding-top: 2px;" onclick="PF('addloanDialogVar').show();" value="Add" icon="ui-icon-plus" title="Add a new loan.">
							</p:commandbutton>
							<p:spacer width="20"></p:spacer>
							<h:outputtext value="Export " />
							<h:commandlink>
								<p:graphicimage name="/images/excel.png" title="Export to Excel" />
								<p:dataexporter type="xls" target="loansTable" fileName="loans" pageOnly="false" />
							</h:commandlink>

							<h:commandlink>
								<p:graphicimage name="/images/csv.png" title="Export to CSV" />
								<p:dataexporter type="csv" target="loansTable" fileName="loans" pageOnly="false" />
							</h:commandlink>
						</f:facet>

						<f:facet name="right">
							<p:inputtext id="globalFilter" onkeyup="PF('loansTableWidgetVar').filter()" style="vertical-align: middle;" placeholder="Search..." />
							<p:spacer width="5"></p:spacer>
							<p:commandbutton id="clearButton" style="padding-top: 2px;" value="Reload" title="Clear search filters and reload page." icon="ui-icon-refresh" actionlistener="#{loanView.loadAllLoans}" update="@form" oncomplete="PF('loansTableWidgetVar').clearFilters(); location.reload();">
							</p:commandbutton>
							<p:spacer width="20"></p:spacer>
[							<p:commandbutton id="loanTableTogglerButton" type="button" value="Columns" style="float:right" icon="ui-icon-calculator">
							</p:commandbutton>
							<p:columntoggler id="loanTableToggler" datasource="loansTable" trigger="loanTableTogglerButton" rendered="#{!empty loanView.loans}" />
					</f:facet>
					</p:toolbar>
				</f:facet>
</p:datatable></h:form>

Here's what the toggler looks like on my data table and when I go to another page:

[Juan Gonzalez, geändert vor 6 Jahren.]

Hi William.

I think we found this (and sent a fix to Primefaces).

As I recall these components are attached to body by default. This means that SPA, when loading another page, won't unload those components properly, because they aren't in the current portlet "div".

I think we fixed this by changing this component attachment to "@this":

If you want to attach to that column header component you should do this in that column toggler:

 appendTo="@this"

The problem here is that Primefaces has some CSS that doesn't let overlays within a datatable column to be shown on overflow. So we opened an issue here: https://github.com/primefaces/primefaces/issues/1967.

You can try what I said before and if you reproduce the latter mentioned problem override these css rules with these changes:

https://github.com/primefaces/primefaces/pull/1968/files

Hope it helps.

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

Hi William,
This issue is basically the same as FACES-2677: SPA navigation removes PrimeFaces CSS files from the DOM when it believes that they are no longer needed, but the PrimeFaces markup is never removed since it is added outside the portlet markup via JavaScript. To fix FACES-2677, we used the appendTo="@this" with p:selectOneMenu to ensure that the markup was rendered within the portlet's markup (so that it would be completely removed by SPA on navigation). Unfortunately, p:columnToggler does not have an appendTo attribute. You may want to request this feature from PrimeFaces, since it may make it into PrimeFaces 6.2 soon. For PrimeFaces 6.1 though, there are a couple of possible workarounds:

The first and best possible workaround is to include a style that hides the leftover toggler markup after you navigate away from your PrimeFaces portlet:

<h:head>
<!-- I haven't tested the styles here, but you can probably mess with it and make it work. -->
<style id="hideColumnTogglerLeftoverMarkupWorkaroundCSS" data-senna-track="permanent">
.ui-columntoggler.ui-widget {
display: none;
}
</style>
</h:head>

Alternatively, you can disable SennaJS navigation when navigating from a page that includes p:columnToggler, but I think that's a sub-optimal solution.

- Kyle

[Juan Gonzalez, geändert vor 6 Jahren.]

Kyle Joseph Stiemann:

Unfortunately, p:columnToggler does not have an appendTo attribute.

Oh I didn't checked this :-). Good catch.

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

Yeah, when I saw that appendTo was missing, I was really bummed out. Hopefully this other workaround is good enough. The appendTo="@this" solution for p:selectOneMenu is much more elegant and simple.

[William Gosse, geändert vor 6 Jahren.]

Thanks so much for this work around Kyle! It did the trick for me. I'm doing a demo for the big wigs today and really wanted this in the mix. You rock!

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

You're welcome Thanks for the kind words and for using Liferay Faces! Hope the demo goes well!

- Kyle

[William Gosse, geändert vor 6 Jahren.]

So one other thing I noticed with the toggler is that it broke the two popup calendar filters that I had for two date columns I had in my datatable. You wouldn't know anything about that by chance. I know it has nothing to do with the fix you gave me yesterday. I can live without these popups but it be nice to know what's going on. Again thanks for all your help.

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

Hi William,
I'm not sure what is causing that issue. I'd recommend trying to reproduce the issue in a plain webapp outside of Liferay. If you can reproduce the issue without Liferay, report the bug to PrimeFaces. If you can't, report the bug to us and we'll take a look at it and try to fix it or provide a workaround.

- Kyle

[William Gosse, geändert vor 6 Jahren.]

I'm pretty sure its a primefaces issue.

[William Gosse, geändert vor 6 Jahren.]

I got date filtering working again with the toggler. Apparently the state of the column toggles needs to be preserved in the managed bean or else sorting and filtering all go to hell. See this for details: https://www.primefaces.org/stateful-column-toggler/

[Gunnar Brinkmann, geändert vor 6 Jahren.]

Kyle Joseph Stiemann:

Hi William,
This issue is basically the same as FACES-2677: SPA navigation removes PrimeFaces CSS files from the DOM when it believes that they are no longer needed, but the PrimeFaces markup is never removed since it is added outside the portlet markup via JavaScript. To fix FACES-2677, we used the appendTo="@this" with p:selectOneMenu to ensure that the markup was rendered within the portlet's markup (so that it would be completely removed by SPA on navigation). Unfortunately, p:columnToggler does not have an appendTo attribute. You may want to request this feature from PrimeFaces, since it may make it into PrimeFaces 6.2 soon. For PrimeFaces 6.1 though, there are a couple of possible workarounds:

The first and best possible workaround is to include a style that hides the leftover toggler markup after you navigate away from your PrimeFaces portlet:

<h:head>
<!-- I haven't tested the styles here, but you can probably mess with it and make it work. -->
<style id="hideColumnTogglerLeftoverMarkupWorkaroundCSS" data-senna-track="permanent">
.ui-columntoggler.ui-widget {
display: none;
}
</style>
</h:head>

Alternatively, you can disable SennaJS navigation when navigating from a page that includes p:columnToggler, but I think that's a sub-optimal solution.

- Kyle

Hello,

we disabled SPA months ago, one reason was "strange behavior" because of "appendTo body"-Components that don't get removed, another reason was the fact, that every full request is transformed to an xhr-Request when using SPA. This is an issue, for example regarding parameter extraction from friendly URLs. If I remember correctly, this has been the main reason for disabling SPA. A datatable renders friendly URLs that don't work with SPA enabled.

Maybe SPA could be deactivated by default for "Portlet Pages" so we don't have to disable it globally?
Or special page layout selections "Portlet Page (with SPA)" and "Portlet Page (without SPA)"?

Just mumbling... :-)

Regards,
Gunnar

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

Hey Gunnar,

... we disabled SPA months ago, one reason was "strange behavior" because of "appendTo body"-Components that don't get removed,...

Yeah, that's an incompatibility between the design of PrimeFaces (which is designed first and foremost for webapps) and SennaJS/Liferay/Portlets. Maybe PrimeFaces would be willing to change the default appendTo setting when a portlet environment is detected. However, some components are missing appendTo support anyway, so really these issues need to be brought to their attention.

... another reason was the fact, that every full request is transformed to an xhr-Request when using SPA. This is an issue, for example regarding parameter extraction from friendly URLs. If I remember correctly, this has been the main reason for disabling SPA. A datatable renders friendly URLs that don't work with SPA enabled.

Could you create a bug report with a simple reproducer for that issue Gunnar?

Maybe SPA could be deactivated by default for "Portlet Pages" so we don't have to disable it globally?
Or special page layout selections "Portlet Page (with SPA)" and "Portlet Page (without SPA)"?

You can disable SennaJS on a per-portlet basis. Would that fit your requirements? I don't know of any way to disable SennaJS on a per-page basis, but there might be some way to do that too.

- Kyle

[William Gosse, geändert vor 5 Jahren.]

This issue has been corrected with the latest release of the lifefaces bridge:

https://community.liferay.com/blogs/-/blogs/liferay-faces-released-with-liferay-portal-7-1-support-?_com_liferay_blogs_web_portlet_BlogsPortlet_redirect=https%3A%2F%2Fcommunity.liferay.com%3A443%2Fblogs%3Fp_p_id%3Dcom_liferay_blogs_web_portlet_BlogsPortlet%26p_p_lifecycle%3D0%26p_p_state%3Dnormal%26p_p_mode%3Dview%26_com_liferay_blogs_web_portlet_BlogsPortlet_cur%3D1%26_com_liferay_blogs_web_portlet_BlogsPortlet_delta%3D10

[William Gosse, geändert vor 5 Jahren.]

This issue has been corrected with the latest release of the lifefaces bridge:

https://community.liferay.com/blogs/-/blogs/liferay-faces-released-with-liferay-portal-7-1-support-?_com_liferay_blogs_web_portlet_BlogsPortlet_redirect=https%3A%2F%2Fcommunity.liferay.com%3A443%2Fblogs%3Fp_p_id%3Dcom_liferay_blogs_web_portlet_BlogsPortlet%26p_p_lifecycle%3D0%26p_p_state%3Dnormal%26p_p_mode%3Dview%26_com_liferay_blogs_web_portlet_BlogsPortlet_cur%3D1%26_com_liferay_blogs_web_portlet_BlogsPortlet_delta%3D10