Visual Preview in Liferay DXP: Custom Portlet

General Blogs December 8, 2017 By Sandeep Sapra

Liferay provide OOTB features for Preview of Documents (PDF,  Word, Image), Media (Audio and Video) in Document and Media Portlet.  The same is available after installing following components

  • ImageMagick -  To convert into images for preview
  • Ghostscript  - Dependency of ImageMagick
  • Xuggler  - For Audio and Video.  Has to be included as jar file in case not available in DXP
  • Open Office - This is required for Word document

Post installation , their path needs be added and enabled in Liferay ( Server Administration --> External Services).  If we need to develop this in custom portlet , here is the solution for the same.

Custom Portlet Solution:

1. Create Portlet and write custom code to check what type of file it is ( Doc or Video etc.)

For PDF and Images

boolean hasPDFImages = PDFProcessorUtil.hasImages(fileVersion);

For Audio : 

boolean hasAudio = AudioProcessorUtil.hasAudio(fileVersion);

2. Generate preview URL for different file types

For Audio: 

previewFileURLs[j] = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString + "&type=" + PropsUtil.getArray(PropsKeys.DL_FILE_ENTRY_PREVIEW_AUDIO_CONTAINERS)[j]);
 
For PDF and Image

previewFileURLs[0] = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString)

3. Use preview URLs on JSP  ( used angular js in our case)

For Audio:

<div class="lfr-preview-audio" id="<portlet:namespace />previewFile{{$index}}">
<div class="lfr-preview-audio-content" id="<portlet:namespace />previewFileContent{{$index}}"></div>
</div>
 
4.  Generating preview when action is taken 
For Audio
AUI().use("aui-audio","liferay-preview", function(A){
new A.Audio({
contentBox:"#<portlet:namespace />previewFileContent"+index,
fixedAttributes:{allowfullscreen:"true",wmode:"opaque"},
oggUrl:"http://localhost:8080/documents/20143/0/SampleAudio_0.4mb.mp3/844cc37b-5130-7097-feda-48b48eeea76a?version\x3d1.0\x26audioPreview\x3d1\x26type\x3dogg",
url:refFileURLStr.url
}).render();
});
 
Screenshots:
For PDF:
 
For Audio:
 
For Video:

Liferay Theme Generator

General Blogs December 7, 2017 By Sandeep Sapra

Liferay Theme generator tool is an easy way to create themes in Liferay v6.2 and 7. You would not need SDK for this but remember that there are some prequisities in terms of installation and configuration of few components before you can actually create theme and deploy to your Liferay.

Sharing this quick and short article on to highlight what are those key components to be installed.

High Level Steps required for configuration:

  1.  Install NodeJS  ( Download the NodeJS from official site). Make sure to download 64bit or 32 bith as per your system conifguration.  
  2. Set the proxy settings using the npm config command in case internet access is available through proxy. Command:  npm config set proxy http://username:password@proxyHost:proxyPort
  3. Set Node JS to the PATH Environment Variable
  4. Install the gulp using command:  npm install –g gulp
  5. Install Yo using command: npm install –g yo
  6. Post this, Install liferay theme generator using the command :  npm install -g generator-liferay-theme
  7. Create a folder (let us say theme-generator). This is required so that you can create themes under this folder.
  8. Run following command to generate theme : yo liferay-theme.   It will ask you name, id of theme and version of Liferay for which you want to create the theme.
  9. Before running step 8 you may need additonal components like Python and Visual Studio C++ (2008+) in case they are not there on your system as a pre-requisities.Install Python and Visual Studio by downloading from their official site.
  10. It is recommended to install Ruby , Saas and Compass to have better quick aroundtime for creating the theme
  11. Install Ruby from their official site
  12. Install Saas using command: gem install sass
  13. Install Compass using command: gem install compass

Theme for Liferay 6.2: Here are few screenshots of creating theme and then deploying the same on Liferay v6.2

Step 1. Run command yo liferay-theme and enter the name,id and select version. Please note that you will need provide the Liferay 6.2 Tomcat path

Step 2. Use gulp build command to build the theme

Step 3: Use gulp deploy command to deploy the same directly to the Liferay v6.2.  Once this process is successfull, you will see the theme war file being directly copied to the deploy folder and then automatically getting deployed for you.

Liferay DXP and Analytics

General Blogs November 24, 2017 By Sandeep Sapra

Liferay Integration with Analytics

1) With Google Analytics

Set up an account with Google Analytics: https://analytics.google.com/

This will create a Tracking Id

 

Configure the Tracking ID In liferay Configuration --> Site Settings --> Analytics

A Tracking Code will be generated which can then pasted in JavaScript of the Liferay Pages which needs the tracking. JavaScript code can be added under Configure section of Public or Private Page

Once down different analytics information start getting records on the Google Analytics 

Page Views Graph

 

Page View Statistics

 


2) With Piwik

For the Installation of Piwik ,

a) First Download XAMPP.  This bundle will have Apache , PHP , MySQL etc. Install the XAMPP

b) Also download piwik from https://piwik.org/download/ .    

Once the XAMPP set up is completed and apache and mySQL Services are running.  Copy the unzipped piwik folder to the htdocs ( so evntually it will be \xampp\htdocs\piwik)

You can now browse piwik using http://ip/piwik and can start the installation.

 

During the process set the piwik admin user and complete the installation.

 

Piwik will generate a tracking code which will be used to be configured in Liferay

 

Paste the Tracking code under Configuration  --> Site Settings --> Analytics --> Piwik

 

Once done , browse different pages and you will notice analytics on piwik dashboard.

Dashboard 1

 

Dashboard 2

Servlet Configuration in Liferay DXP portlet

General Blogs November 17, 2017 By Sandeep Sapra

Description: For Servlet configuration in Liferay DXP portlet,  we will need to make necessary changes to the configuration files. Start with making a plugin custom portlet and add a servlet to this portlet, then do following configurations
 
Step 1:  Make sure bnd file has web context path (bnd.bnd)
Bundle-Name: hello-world-service
Bundle-SymbolicName: HelloWorldService
Bundle-Version: 1.0.0
Web-ContextPath: /myContext
 
Step 2:  Make sure gradle file has servlet dependency added. (build.gradle)
dependencies {
......
compileOnly group: "javax.servlet", name: "javax.servlet-api", version: "3.0.1"
....
}
 
Step 3:  web.xml  should have servlet mapping. You may have to create web.xml if it does not exist at the following path:  \hello-world-service\src\main\resources\WEB-INF
 
<servlet-mapping>
<servlet-name>helloWorldServlet</servlet-name>
<url-pattern>/MyServlet</url-pattern>
</servlet-mapping>
 
 
URL to Access:  http://localhost:8080/o/myContext/MyServlet
 
  

SSO in Liferay DXP using SAML

General Blogs September 29, 2017 By Sandeep Sapra

Introduction

Liferay Digital Experience Platform (DXP) provides feature to integrate with Corporate Single Sign on Server (SSO). SAML can be used to establish the same.  This article laid down the general steps required for the SSO configuration, where in Liferay DXP which will act as Service Provider and will establish SSO with Identity Server. Below steps are described with the self-signed certificate but based on the requirement signed certificate from certified authority can also be used.

Pre-requisites

1.       Single Sign On (SSO) Server – Identity Server

2.       Liferay DXP Set up in place

a.       Installation of Java and JDK

b.      Installation and configuration of Database (e.g. MySQL/ MS SQL/Postgres etc.)

c.       Set Environment Variable

Implementation Steps

1) Liferay DXP SAML Plugin: We will need Liferay DXP SAML Plugin which is available in the marketplace. Download SAML Plugin (lkpg format) from the marketplace and deploy SAML Plugin in Liferay.

URL to Download:  https://web.liferay.com/marketplace/-/mp/application/15188711

2) Generate Keystore :  Create keystore with keytool command that is available with JDK. We can either used self-signed certificate.

Run the following command: keytool -genkeypair -keyalg RSA -alias liferayselfsigned -keystore keystore.jks -storepass pass1234 -validity  360  -keysize  2048

This will generate keystore.jks file. Make sure you create the file under the directory which is accessible by Liferay.

3) Export Liferay Server Certificate

Once the keystore.jks file is generated, we need to export the Liferay certificate.  This certificate is generated so it can be imported in SSO Server and with this SSO Server and Liferay DXP server will have a handshake.

Run the following command to export the certificate: keytool –exportcert –alias liferayselfsigned –file exportasialiferaycertificate.cer –keystore keystore.jks

4) Import Identity Provider/Single Sign On Server Certificate

Identity server will be required to be imported in Liferay.

Run the following command to import the certificate: keytool -importcert -alias ssoselfsigned -file sso-certificate.cer -keystore keystore.jks

After running the above command the existing keystore.jks will be updated with SSO Server Certificate.

5) Metadata Configuration

Identity Server will have to generate a metadata XML file. This metadata file needs to be store on the VM where we have Liferay DXP Installed. Place the XML file at a location which is accessible by Liferay DXP Server. (Metadata file name for e.g.:  metadata.xml)

6) SAML Configuration in Liferay

Now we need to configure the SAML Plugin. We can configure the same using the configuration in portal-ext.properties (which is placed at /liferay-dxp/tomcat-8.0.32/webapps/ROOT/WEB-INF/classes)

Following are the configurations required in portal-ext.properties:

saml.enabled=true

saml.role=sp

saml.entity.id=liferayselfsigned

saml.metadata.paths=/home/saml/metadata.xml

# Keystore #

saml.keystore.type=jks

saml.keystore.path=/home//saml/keystore.jks

saml.keystore.password=password

saml.keystore.credential.password[liferayselfsigned]=pass1234

# # Service Provider #

saml.sp.default.idp.entity.id=entityid

saml.sp.sign.authn.request=true

saml.sp.assertion.signature.required=false

saml.sp.clock.skew=3000

saml.sp.session.keepalive.url=http://[host:port]/portal/saml/idp/keepalive

saml.sp.user.attribute.mappings=screenName=uid\nemailAddress=mail\nfirstName=firstName\nlastName=lastName

7) Restart: Restart the Liferay once to make all the changes are reflected and perform the SSO testing.

 

Checklist/ Considerations for SSO Integration:       

  1. User Provisioning: User provisioning is required in Liferay DXP before performing any testing for SSO Integration
  2. Accessibility:  Make sure Liferay DXP and SSO Server should be able to access each other.
  3. Information required for  SSO Server/Identity Server:  

           a) Liferay Exported Certificate as demonstrated in Installation Steps  

           b) Liferay SAML Consumer Assertion URL : http://server:port/c/portal/saml/acs.  This is required to be                              configured on the Identity Server end.

      4.  Information required for Liferay DXP Server: When configuration is required on Liferay 7 server then SAML metadata file will from the Identity Server.  It should be made sure that entityID="entityId" given in the metadata file is what which will be configured in the Liferay portal-ext.properties file.

Showing 5 results.