5.3.3.2. Overriding email notification

In eXo Platform, all email notification templates are defined in the social-notification-extension.war package under WEB-INF/notification/templates/. Each of these templates corresponds to a specific notification type. It is obvious that you can change all of them as your desire.

To do this, there are 2 ways as follows:

Modifying the template layout, such as header, body or footer.
Adding or removing notification properties.

This tutorial selects to customize the ActivityMentionPlugin.gtmpl file, which is the template for Mention Notification by email. Note that you can download all the source code used in this section here.

First you need to create a new Maven project with the overall structure:

And now, continue with the detailed steps:

Under pom.xml

Add the following dependencies to the pom.xml file:


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>org.exoplatform</groupId>

    <version>1.0.0</version>

    <artifactId>email-notification-extension</artifactId>

    <name>Email Notification Extension</name>

    <packaging>pom</packaging>

    <description>Email Notification Extension</description>

    <dependencyManagement>

        <dependencies>

            <!-- Import versions from platform project -->

            <dependency>

                <groupId>org.exoplatform.platform</groupId>

                <artifactId>platform</artifactId>

                <version>4.2.x-SNAPSHOT</version>

                <type>pom</type>

                <scope>import</scope>

            </dependency>

        </dependencies>

    </dependencyManagement>

    <modules>

        <module>config</module>

        <module>webapp</module>

    </modules>

</project>

Under config folder

Create a pom.xml and a configuration.xml file as below:

Add the following information to config/pom.xml:


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <parent>

    <groupId>org.exoplatform</groupId>

    <artifactId>email-notification-extension</artifactId>

    <version>1.0.0</version>

  </parent> 

  <modelVersion>4.0.0</modelVersion>

  <artifactId>email-notification-extension-config</artifactId>

  <name>Email Notification Extension Configuration</name>

  <packaging>jar</packaging>

  <description>Email Notification Extension Configuration</description>

</project>

Add the below configuration to conf/configuration.xml:


<?xml version="1.0" encoding="UTF-8"?>

<configuration xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"

xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">

    <external-component-plugins>

        <!-- The full qualified name of the PortalContainerConfig -->

        <target-component>org.exoplatform.container.definition.PortalContainerConfig</target-component>

        <component-plugin>

            <!-- The name of the plugin -->

            <name>Change PortalContainer Definitions</name>

            <!-- The name of the method to call on the PortalContainerConfig in order to register the changes on the PortalContainerDefinitions -->

            <set-method>registerChangePlugin</set-method>

            <!-- The full qualified name of the PortalContainerDefinitionChangePlugin -->

            <type>org.exoplatform.container.definition.PortalContainerDefinitionChangePlugin</type>

            <priority>102</priority>

            <init-params>

                <value-param>

                    <name>apply.default</name>

                    <value>true</value>

                </value-param>

                <object-param>

                    <name>change</name>

                    <object type="org.exoplatform.container.definition.PortalContainerDefinitionChange$AddDependenciesAfter">

                        <!-- The list of name of the dependencies to add -->

                        <field name="dependencies">

                            <collection type="java.util.ArrayList">

                                <value>

                                    <string>email-notification-webapp</string>

                                </value>

                            </collection>

                        </field>

                    </object>

                </object-param>     

            </init-params>

        </component-plugin>

    </external-component-plugins>   

</configuration>

Under webapp folder

In the below steps, you will modify layout, add and remove several properties of this ActivityMentionPlugin template. Note that when you add a new property to a notification template, it is required that you declare it in all Notification_xx.properties files (xx is the language code, fr for French, for instance). In this tutorial, assume that there are only 2 languages available which are English (en) and French (fr).

Create a new Maven project inside webapp folder as follows:
In which, the Notification_en.properties, Notification_fr.properties and ActivityMentionPlugin.gtmpl files are copied from $PLATFORM_HOME/webapps/social-notification-extension.war!/WEB-INF/classes/locale/notification/template and $PLATFORM_HOME/webapps/social-notification-extension.war!/WEB-INF/notification/templates respectively.

Configure the pom.xml file as follows:


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    <parent>

        <groupId>org.exoplatform</groupId>

        <artifactId>email-notification-extension</artifactId>

        <version>1.0.0</version>

    </parent> 

    <modelVersion>4.0.0</modelVersion>

    <artifactId>email-notification-webapp</artifactId>

    <packaging>war</packaging>

    <name>Email Notification Extension Webapp</name>

    <description>Email Notification Extension Webapp</description>

    <build>  

        <finalName>email-notification-webapp</finalName>

    </build>

</project>

Add the following configurations to WEB-INF/web.xml:


<?xml version="1.0" encoding="ISO-8859-1" ?>

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

    <display-name>email-notification-webapp</display-name>

    <!-- Resource filter to cache merged javascript and css -->

    <filter>

        <filter-name>ResourceRequestFilter</filter-name>

        <filter-class>org.exoplatform.portal.application.ResourceRequestFilter</filter-class>

    </filter>

    <filter-mapping>

        <filter-name>ResourceRequestFilter</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

    <!-- Listener -->

    <listener>

        <listener-class>org.exoplatform.container.web.PortalContainerConfigOwner</listener-class>

    </listener>

</web-app>

display-name - should be the same as the context name of the portal extension.

Modify the ActivityMentionPlugin.gtmpl file as below:


<table border="0" cellpadding="0" cellspacing="0" width="500" bgcolor="#ffffff" align="center" style="background-color: #ffffff; font-size: 13px;color:#333333;line-height: 18px;font-family: HelveticaNeue, Helvetica, Arial, sans-serif;">

    <tr><!--start header area-->

        <td align="center"  valign="middle" bgcolor="#ffffff" style="background-color: #ffffff;">

            <table  cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" align="center" style="border:1px solid #d8d8d8;">

                <tr>

                    <!-- insert company logo and link-->

                    <td style="width: 20%;margin:0;height:45px;vertical-align:middle;background-color:#efefef;text-align:center">

                        <a href="www.exoplatform.com" target="_blank">

                            <img src="https://www.rosehosting.com/blog/wp-content/uploads/2014/03/exo-platform-vps.png" style="width: 50%">

                        </a>

                    </td>

                    <!--pass a link through a property-->

                    <td style="margin:0;height:45px;vertical-align:middle;background-color:#efefef;font-family:'HelveticaNeue Bold',Helvetica,Arial,sans-serif;color:grey;font-size:14px;text-align:left" height="45" valign="middle">

                        <%=_ctx.appRes("Notification.label.header", FOOTER_LINK)%>

                    </td>

                </tr>

            </table>

        </td>

    </tr><!--end header area-->

    <tr><!--start content area-->

        <td bgcolor="#ffffff" style="background-color: #ffffff;">

            <table cellpadding="0" cellspacing="0" width="100%"  bgcolor="#ffffff" style="background-color: #ffffff; border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;">

                <tr>

                    <td>

                        <table border="0" cellpadding="0" cellspacing="0" width="92%" bgcolor="#ffffff" align="center" style="background-color: #ffffff; color:#333333;line-height:20px;">

                            <tr>

                                <td align="left" bgcolor="#ffffff" style="background-color: #ffffff; padding: 10px 0;">

                                    <p style="margin:20, 20;font-weight:bold;vertical-align:middle; font-family: 'HelveticaNeue Bold', Helvetica, Arial, sans-serif;color:#2f5e92;font-size:18px;">

                                        <!--new property-->

                                        <%=_ctx.appRes("Notification.label.Type")%> <%=_ctx.appRes("Notification.title.ActivityMentionPlugin")%>

                                    </p>

                                    <table border="0" cellpadding="0" cellspacing="0" >

                                        <tr>

                                            <td  valign="top" style="margin-top: 0px;">

                                                <p style="margin: 0 0 10px 0; line-height: 22px; color: #333333; font-size:13px; font-family:'HelveticaNeue bold',verdana,arial,tahoma">

                                                  <%

                                                    String profileUrl = "<strong><a target=\"_blank\" style=\"color: #2f5e92; font-size: 13px; text-decoration: none; font-family: 'HelveticaNeue Bold', Helvetica, Arial, sans-serif\" href=\""+ PROFILE_URL + "\">" + USER + "</a></strong>";

                                                  %>

                                                  <%=_ctx.appRes("Notification.message.ActivityMentionPlugin", profileUrl)%>:

                                                </p>

                                                <!--main content of the mentioned activity-->

                                                <table border="0" cellpadding="0" cellspacing="0" width="460" bgcolor="#ffffff" align="center" style="background-color: #ffffff; font-size: 12px;color:#333333;line-height: 18px; margin-bottom: 15px;">

                                                    <tbody>

                                                        <tr>

                                                            <td align="left" bgcolor="#ffffff" style="background-color: #f9f9f9; padding: 5px 0;">

                                                                $ACTIVITY

                                                            </td>

                                                        </tr>

                                                    </tbody>

                                                </table>

                                            </td>

                                        </tr>

                                    </table>

                                    <!--insert Reply button-->

                                    <p style="margin: 0 0 20px;text-align:center">

                                        <a target="_blank" style="

                                            display: inline-block;

                                            text-decoration: none;

                                            font-size: 11px;

                                            font-family: 'HelveticaNeue Bold', Helvetica, Arial, sans-serif;

                                            color: #ffffff;

                                            text-shadow: 0 -1px 0 rgba(23, 33, 37, .25);

                                            background-color: #567ab6;

                                            background-image: -moz-linear-gradient(top, #638acd, #426393);

                                            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#638acd), to(#426393));

                                            background-image: -webkit-linear-gradient(top, #638acd, #426393);

                                            background-image: -o-linear-gradient(top, #638acd, #426393);

                                            background-image: linear-gradient(to bottom, #638acd, #426393);

                                            background-repeat: repeat-x;

                                            border-radius: 4px;

                                            -moz-border-radius: 4px;

                                            padding: 4px 8px;

                                            height: 11px;

                                            line-height: 11px;

                                            max-height: 11px;

                                            text-align: center;

                                            border: 1px solid #224886;

                                            font-weight: bold;

                                            -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);

                                            -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);

                                            box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);

                                            vertical-align: middle;

                                        " href="$REPLY_ACTION_URL"><%=_ctx.appRes("Notification.label.Reply")%></a>

                                        <!--insert View full discussion button-->

                                        <a target="_blank" style="

                                            display: inline-block;

                                            text-decoration: none;

                                            font-size: 11px;

                                            font-family: HelveticaNeue, Helvetica, Arial, sans-serif,serif;

                                            color: #333333;

                                            background-color: #f1f1f1;

                                            background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);

                                            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));

                                            background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);

                                            background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);

                                            background-image: linear-gradient(to bottom, #ffffff, #f1f1f1);

                                            background-repeat: repeat-x;

                                            border-radius: 4px;

                                            -moz-border-radius: 4px;

                                            padding: 4px 8px;

                                            height: 11px;

                                            line-height: 12px;

                                            max-height: 11px;

                                            text-align: center;

                                            border: 1px solid #c7c7c7;

                                            -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);

                                            -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);

                                            box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);

                                            vertical-align: middle;

                                            margin-left: 3px;

                                        " href="$VIEW_FULL_DISCUSSION_ACTION_URL" target="_blank"><%=_ctx.appRes("Notification.label.ViewFullDiscussion")%></a>

                                    </p>

                                </td>

                            </tr>

                        </table>

                    </td>

                </tr>

            </table>            

        </td>

    </tr><!--end content area-->    

</table>

	You can replace with your company logo and link here.
	A message at header. This property will be declared in the `Notification_xx.properties` files later.
	A new label before the title of the mentioned activity, which will be declared in the `Notification_xx.properties` files later.
	A message corresponding to the mentioned activity.
	The detailed content of the mentioned activity.
	A Reply button, helping user to quickly make answer on the mentioned activity stream.
	A View full discussion button, helping user to jump directly to the mentioned activity stream.

In this script, we have added 2 new properties (Notification.label.header and Notification.label.Type) and remove several ones (for example, Notification.label.footer) in comparison with the old script in the social-notification-extension.war package. The next steps will declare the new ones in two property files.

Declare Notification.label.header and Notification.label.Type as 2 new properties as follows:

In Notification_en.properties:

Notification.label.Type=Notification type:
Notification.label.header=You has been successfully subscribed to our newsletter. <br/>To unsubscribe, <a target="_blank" style="margin:30px 0 10px 0; color: #2f5e92;text-decoration: none;font-size:13px;font-family:HelveticaNeue,arial,tahoma,serif" href="{0}">click here</a>.

In Notification_fr.properties:

Notification.label.Type=Type de notification:
Notification.label.header=Vous avez \u00E9t\u00E9 abonn\u00E9 \u00E0 notre bulletin avec succès.<br/> Pour d\u00E9sinscription <a target="_blank" style="margin:30px 0 10px 0; color: #2f5e92;text-decoration: none;font-size:13px;font-family:HelveticaNeue,arial,tahoma,serif" href="{0}">cliquez ici</a>.

Testing

Go up to the parent project's folder and build it with the command: mvn clean install.
Copy the generated jar and war files into the corresponding deployment folders where you unpacked the eXo Platform installation.
Follow this guide to configure email service for eXo Platform.
Start eXo Platform and create 2 new users: john and marry, with real emails. Notice that you need to turn on the email notification, not only on john and marry sides but also on the administrator side as stated here.
Log in as marry user and post an activity that mentions john, for example.
Now, log in john's email account, you will see a new notification email with layout as follows:
- if john user is in English language:
- if john user is in French language:
By comparing with the below old template, you will see changes between them: