Collaborative dynamic list

Summary

‘Collaborative Dynamic List’ is a Liferay app that adds real-time collaboration features to Liferay’s ‘Dynamic Data List Display’ App.

Overview

‘Collaborative Dynamic List’ app consist of a hook & portlet which uses Atmosphere Framework in client and server side, to facilitate real time asynchronous message broadcasting which is the key to collaboration.

This application has been tested in these Liferay bundles:

Tomcat 7
Glassfish 3.1
JBoss AS 7.1

And in these browsers:

IE 10
IE 11
Firefox 44+
Safari 9.0.3
Chrome 48

Features

List of users connected to a particular ‘Collaborative Dynamic List’ (users which are currently visiting the page where the ‘Dynamic Data List Display’ is added and a particular list is selected with spreadsheet view enabled) are shown in the top right corner as icons with display picture. If user leaves the page, the list of users is immediately updated.
Cell highlights indicating the modifications by others users along with user name in different colors.
Direct saving of cell values eliminating the need to click on the ‘Save’ button.

Screenshots

Image 1: List of connected users shown in the top right corner with different highlight colors.

Image 2: Real time data broadcasting between multiple users.

Installation and Usage

The steps are as follows:

Obtain the ‘Collaborative Dynamic List’ app from the Liferay Marketplace.
Deploy the hook and portlet in your existing Liferay instance. If you haven't installed Liferay, please download and follow the instructions to do so.
Go to site page where you intend to add ‘Collaborative Dynamic List’ app with the administrator permission in order to add the app to the page.
Select "Add Applications", then search for ‘Dynamic Data List Display’ and click on “Add”.
Select an existing Dynamic Data List (or create a new list first) to be edited in the ‘Dynamic Data List Display’.
Make sure the ‘Editable’ and ‘Spreadsheet View’ options are checked from portlet configuration in the "Optional Configuration" tab.
Reload the page. You can see your display picture on the top right corner of the sheet indicating your presence in the sheet.
Other users who opened the same page gets added to the list of users with a different color (same color is used for cell highlights).
Clicking on any cell, highlights the cell border for all users in real time. Your name also gets displayed for other users.
Double click on any cell to update the cell value. Also the content of the cell gets displayed to other users in real time.
To save the content of the cell just click anywhere outside the cell.
Just owner of the spreadsheet is able to edit the cells, the rest of users only can view, in order to give other users permissions for edit capability, dynamic data list permissions must be set:

Configuration

There's no additional configuration needed to get this application working, except for Glassfish, because by the default comet support is not enabled.

Specific configuration steps for Glassfish 3.1:

In the domain configuration file (typically $GLASSFISH_HOME/domains/domain1/config/domain.xml) the element protocol named "http-listener-1" must be modified. Typically you are going to find this element twice, under element config named "server-config" and "default-config". You can modify both of them, by changing the element http to

domain.xml

...
<network-config>
<protocols>
<protocol name="http-listener-1">
<http websockets-support-enabled="true" default-virtual-server="server" max-connections="250" comet-support-enabled="true">
...

Note:

Collaborative Dynamic List app is designed to work with registered and logged in users only. Please make sure the page is not accessible to guest users.
You might get these warning and error massages when using the app for the first time:

WARN [http-bio-8080-exec-14][AtmosphereFramework:306] Failed using comet support: org.atmosphere.container.Tomcat7AsyncSupportWithWebSocket, error: Tomcat failed to detect this is a Comet application because context.xml is missing or the Http11NioProtocol Connector is not enabled.You must use the atmosphere-native-runtime dependency in order to use native Comet Support_If that's not the case, you can also remove META-INF/context.xml and WEB-INF/lib/atmosphere-compat-tomcat7.jar Is the NIO or APR Connector enabled? [Sanitized]
ERROR [http-bio-8080-exec-14][AtmosphereFramework:113] If you have more than one Connector enabled, make sure they both use the same protocol, e.g NIO/APR or HTTP for all. If not, org.atmosphere.container.BlockingIOCometSupport will be used and cannot be changed.
java.lang.IllegalStateException: Tomcat failed to detect this is a Comet application because context.xml is missing or the Http11NioProtocol Connector is not enabled.You must use the atmosphere-native-runtime dependency in order to use native Comet Support_If that's not the case, you can also remove META-INF/context.xml and WEB-INF/lib/atmosphere-compat-tomcat7.jar [Sanitized]

Don't worry about those, the app functionality is not affected. Those are reported as part of the Atmosphere framework discovery of supported fallback protocols.

If you really want to get rid of those you can do that by changing the file WEB-INF/web.xml from this:

<servlet>
       <servlet-name>collaborative-spreadsheet</servlet-name>
       ...
       <init-param>
           <param-name>org.atmosphere.useNative</param-name>
           <param-value>true</param-value>
       </init-param>
       ...
</servlet>

to this:

<servlet>
  <servlet-name>collaborative-spreadsheet</servlet-name>
       ...
       <init-param>
           <param-name>org.atmosphere.useNative</param-name>
           <param-value>false</param-value>
       </init-param>
       ...
</servlet>

Known Issues

Collaborative Dynamic List app does not work properly in IE10 browser (list of users doesn't get updated) unless the 'org.atmosphere.useNative' param value is set to 'false' in WEB-INF/web.xml file.
(Procedure explained above under Note: section - 'getting rid of warning and error massages' ).
In some servers after the WAR is deployed and the Collaborative Dynamic List is added to a page the custom CSS is not served to the browser causing missing icons & layout issues. This problem is caused by the internal cache used by Liferay that generates a single css file to improve performance, if Liferay is started in development mode or the cache is disabled the problem is solved. In production environment it will be required to clear the server temp files and in some cases even restart the server.

If the Collaborative Dynamic List is not displayed correctly (image below), add the following parameters at the end of the URL ?js_fast_load=0&css_fast_load=0&strip=0 and refresh the page. The issue should be fixed. After that, you can remove the parameters off the URL.

Liferay 7

[AUGUST 28, 2017 UPDATE] Please deploy the 2 plugins first and see if it works without configuration, tested with LR 7 CE GA 4 and LR 7 DXP SP 4, it worked by just deploying the 2 plugins

On LR 7, websockets seems will become out of the box, but prior to version CE GA 4, following configuration is required to make the spreadsheet work:

Overwrite the system packages from Liferay root folder via portal-ext.properties file:

portal-ext.properties

module.framework.system.packages.extra=\
        com.ibm.crypto.provider,\
        com.ibm.db2.jcc,\
        com.microsoft.sqlserver.jdbc,\
        com.mysql.jdbc,\
        com.p6spy.engine.spy,\
        com.sun.security.auth.module,\
        com.sybase.jdbc4.jdbc,\
        oracle.jdbc,\
        org.postgresql,\
        org.apache.naming.java,\
        org.hsqldb.jdbc,\
        org.mariadb.jdbc,\
        sun.misc,\
        sun.net.util,\
        sun.security.provider,\
        javax.websocket;version="1.1.0",\
        javax.websocket.server;version="1.1.0"

Also we should install/paste inside Liferay root /osgi/modules the jar for com.liferay:com.liferay.com.liferay.websocket.whiteboard:1.0.0 , first generating the jar by compiling the code from here https://github.com/cgoncas/liferay-portal/tree/WEBSOCKET_LIFERAY_SUPPORT/modules/apps/foundation/websocket (gradle install)

or

Donwload the jar form the next location:

https://search.maven.org/#search%7Cga%7C1%7Cliferay.websocket.whiteboard

Portlet Settings/Preferences

"Use Secured Websocket (SSL) ?" : If this option is checked, connection url will begin with "wss://" (secure protocol) instead of "ws://"
"Use Custom Websocket Base Path?": If this option is checked, the "Custom Websocket Base Path" field value will be used in the connection url. If no checked, by default connection url looks like, ws://SERVER_NAME:SERVER_PORT/o/collaboration-whiteboard but if checked, while this checkbox checked, connection url will look like ws://SERVER_NAME:SERVER_PORT/ws2/o/collaboration-whiteboard . This setting is useful when running liferay/tomcat behind a proxy or apache server, when using apache server additional configuration needs to be set, like setting up proxy_wstunnel_module and create a proxy pass like ProxyPass /ws2 ws://localhost:8080/ this way for example a connection made to ws://SERVER_NAME:SERVER_PORT/ws2/o/collaboration-whiteboard will try to request the localhost

Code repository

The latest source code is located at the following location: https://github.com/rivetlogic/liferay-collaborative-dynamic-list

Contact Us

We welcome feature/bug reports concerning the ‘Collaborative Dynamic List’ app. Discussion helps to clarify the ways the app can be used and also helps define directions for future development. Please post your concerns at http://issues.rivetlogic.com/browse/LRA

Change Log

1.0.0

Initial Release.

Child pages