How to have Parallel Text in the Email notification Templates
2023-11-29 18:9:35 Author: blogs.sap.com(查看原文) 阅读量:9 收藏

Hello Developers!!!

I hope you’re doing well.

This blog is all about to have Parallel Text in the Email notifications. I.e.; when you are sending the email notifications certain text should be facing opposite to each other like text in different languages.

Requirement:

There is a specific email notification where we needed the template to accommodate two different languages and they should be parallel to each other. The two languages to be used are English and Arabic.

Resolution:

In order to do this we require a custom HTML template.

The below screenshot will help you identify how the output was expected.

Template%20Expectation

Template Expectation

Note: The text used in the template is used just to show the functionality

When I was using CSS to align a <div> element to achieve the requirement, it was not working well in C4C email notification. the div positioning wasn’t working well.

That’s when I have used a table <table> element in HTML template to show the text in parallel. The HTML code to achieve this is as below;

<!DOCTYPE html>
<html>
  <head>
    <title>Notification</title>
  </head>
  <body>
    <div class="img1">
      <img src="data:image/jpeg==" alt="my logo">
    </div class="img1">
    <table style="width:100%; border:1px; color:#F44D23  ; font-family:verdana; font-weight: bold;">
      <tr>
        <td>Dear Customer,</td>
        <td dir="rtl" style="padding:5px;">عزيزي العميل،</td>
      </tr>
      <tr>
        <td>Thank you for your interest with SAP.</td>
        <td dir="rtl" style="padding:5px;">شكرًا لك على اهتمامك بشركة SAP.</td>
      </tr>
      <tr>
        <td>We have received your request for the Demo of the product.</td>
        <td dir="rtl" style="padding:5px;">لقد تلقينا طلبك للحصول على العرض التوضيحي للمنتج.</td>
      </tr>
      <tr>
        <td>Your request ID is #LEADID#...
      </td>
        <td dir="rtl" style="padding:5px;">معرف الطلب الخاص بك هو #LEADID#...
      </td>
      </tr>
      <tr>
        <td>Please note that our dedicated team will reach you out to</td>
        <td dir="rtl" style="padding:5px;">يرجى ملاحظة أن فريقنا المخصص سيتواصل معك</td>
      </tr>
      <tr>
        <td>schedule a call to explain the capabilities of the system.</td>
        <td dir="rtl" style="padding:5px;">لتحديد موعد اتصال لشرح إمكانيات النظام.</td>
      </tr>
      <tr>
        <td>Thank You & Have a Good Day </td>
        <td dir="rtl" style="padding:5px;">شكرا لكم ويوم جيد</td>
      </tr>
    </table>
  </body>
  </head>
</html>

Once you save this you may add the html file to the email template with necessary conditions.

Below image will show you where to add the email template.

Workflow%20Enhancement%20with%20Template

Workflow Enhancement with Template

Then you can Save & Activate it.

Outcome:

Once the above changes were done removing the <div>, the expected outcome was achieved.

I.e.; text was facing each other as expected.

Template%20Output

Template Output.

Hope you enjoyed the blog. We have a lot more coming, so do like and follow for more such content.

Bye bye!! 🙂

Ananthu R Biju

Senior C4C Consultant


文章来源: https://blogs.sap.com/2023/11/29/how-to-have-parallel-text-in-the-email-notification-templates/
如有侵权请联系:admin#unsafe.sh