Scrum Portlet based on PrimeFaces now available for Liferay 7

[6年前 に Marcel Trotzek によって更新されました。]

Hi everyone!

It has been some time since our last update, but our JSF Scrum Portlet is now finally available for Liferay 7 CE and DXP as well. Thank you all for your valuable feedback over the last two years! It is still amazing to see how many teams are using the portlet in their Scrum projects.

In addition to this migration, we have also done an upgrade to JSF 2.2 and PrimeFaces 6.1. Thanks once again to Neil and his team for making this possible with Liferay Faces!

Take a look at the new version and make sure to let us know what you think about it: https://web.liferay.com/marketplace/-/mp/application/74571359

[6年前 に Neil Griffin によって更新されました。]

Congratulations to you and your team Marcel -- the Scrum Portlet looks great!

[6年前 に Kyle Joseph Stiemann によって更新されました。]

Congratulations, Marcel! If you are interested, I'm sure folks would love to see a blog post detailing how you were able to accomplished many of these features and technological integrations:

• Sprint reports in PDF and Excel format
• Fully customizable drag & drop Scrum board
• Always up-to-date thanks to Ajax Push
• Based on JSF 2.2 and PrimeFaces 6.1

I would also be interested in hearing hear about any pitfalls that you ran into while developing this portlet and how you solved them.

Thanks for using Liferay Faces!
- Kyle

[6年前 に Marcel Trotzek によって更新されました。]

Thank you for the kind words, Neil and Kyle!

The mentioned features and integrations were actually kind of straight forward, but I will try to find time to document some of them in a blog post.

PDF and Excel exports simply utilize iText (the last LGPL version) and Apache POI respectively. The Ajax Push integration is now completely based on Liferay Whiteboard WebSockets instead of using Atmosphere, which currently makes it impossible to release the plugin for GA3 and is unfortunately still a hassle with GA4, since Whiteboard still has to be deployed manually - but that's already documented pretty well. Our Scrum board is mostly based on pure jQuery (UI) code.

Concerning PrimeFaces 6.1, I was actually pretty amazed how easily I could exchange our old version without seriously breaking anything. I already discussed with Neil that my only issues directly related to Liferay Faces were due to FACES-3090, making the PrimeFaces editor component and some other JavaScript libraries unusable until I upgraded to the latest snapshots. Most of the rest was just a typical migration of a Liferay 6 portlet with lots of small changes.

I had the strange impression that Senna has some more problems with my JSF portlet than normally: Especially the back link in edit mode of the portlet only worked for me with Senna turned off and simply reloaded the edit view otherwise. I did not yet have the time to reproduce this with a sample portlet, though. It also seems like GA4 made things worse in this case: When using Senna to navigate to a page with my portlet, no CSS resources are loaded - even those directly from within PrimeFaces. In contrast to the JavaScript references (that are always rendered with data-senna-track="permanent"), they do not have any data-senna-track attribute at all.

[6年前 に Kyle Joseph Stiemann によって更新されました。]

That's interesting, thanks Marcel! I'd love to hear more technical details about how you integrated with Liferay Whiteboard WebSockets (and I'm sure it would help other Liferay developers who are trying to do the same).

On your SennaJS issue, do you think that you could provide a couple simple xhtml files that reproduce the problem? We are in the middle of a bugfix sprint in preparation for a release, so I'd like to see if we can fix that issue before releasing.

Thanks,
- Kyle

[6年前 に Marcel Trotzek によって更新されました。]

Hi Kyle,

I was at least able to reproduce a few of the JavaScript issues with the attached sample portlet. Just for testing purpose, it includes three JS and CSS files with different data-senna-track attributes that should set the background color of the six contained divs as specified. Beneath I have added a p:editor and p:schedule component that are broken for me when following these steps on Liferay 7 CE GA4 running on Tomcat:

1. Add "Prime Test" portlet to an empty portal page
2. Refresh the page and verify that no JS errors are thrown and the divs have the specified background colors
3. The value of the p:editor component is not rendered and all toolbar icons (except print and source) are disabled
4. Navigate to another page via Senna
5. Navigate back to the page with "Prime Test" on it
6. The p:editor component now works properly

7. Navigate to the edit view of "Prime Test" by opening the portlet preferences
8. Use the back link in the edit view
9. Both p:editor and p:schedule throw JS errors and are not rendered at all

I hope that these steps are reproducible for you.

By first adding the CSS and JS references to this portlet, I at least recognized a pretty logical source for problems when working with Senna and custom JS: When using any initialization code in referenced scripts that fires on $().ready() or similar, this obviously only gets fired once if Senna is enabled and not when navigating to the same portal page again later, since JS files are handled with data-senna-track="permanent" by default. That knowledge actually fixed at least one of my problems.

[6年前 に Kyle Joseph Stiemann によって更新されました。]

Thanks for the excellent reproducer and notes Marcel!

It seems that the design of p:editor isn't compatible with SennaJS and it seems to have issues in a portlet environment even with SennaJS turned off (FACES-3177). I'm not sure there's any simple fix that we can do, but PrimeFaces has deprecated p:editor in favor of p:textEditor anyway. I tested p:textEditor and it works correctly with or without SennaJS. Would it be possible for you to switch to p:textEditor instead? You could also try portal:inputRichText which is the Liferay Faces Portal rich text editor. It has many of the same features as p:editor, plus plain text min and max validation etc. If p:textEditor is too simple for your use case, portal:inputRichText may be a better replacement.

As you observed, p:schedule fails with SennaJS due to FACES-3175. I included a friendly-url workaround that you can try in the issue. As you observed, p:schedule fails with SennaJS due to the schedule.js file not being reloaded on SennaJS navigation. The problem here is that the $.fullCalendar() function gets removed for some reason. Since that was the only issue, I came up with a simple workaround for the issue using SennaJS events:

<h:outputScript target="body">
$(function() {
Liferay.on('beforeNavigate', function() {
window.pf_schedule_fullCalendar = $.fullCalendar;
});

Liferay.on('endNavigate', function() {

if (!$.fullCalendar) {
$.fullCalendar = window.pf_schedule_fullCalendar;
}
});
});
</h:outputScript>

The solution was to save off the original function before SennaJS navigates and reapply the function to jQuery after navigating.

Please let me know if these solutions/workarounds will work for you.

- Kyle

[6年前 に Marcel Trotzek によって更新されました。]

Thank you for digging into the problem and providing this clever workaround. It indeed fixes my issues with the schedule component and surely a few others as well. I did not even recognize that jQuery got loaded twice in this case.

I should actually have noticed that p:editor got deprecated by now and will take a look at p:textEditor instead. Thanks for the hint! That means I'll have to give the commentbox component another update to use the new editor as well, but I'm sure this will work out perfectly.