- SAP Managed Tags:
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.
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.
In order to do this we require a custom HTML template.
The below screenshot will help you identify how the output was expected.
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;
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.
Then you can Save & Activate it.
Once the above changes were done removing the <div>, the expected outcome was achieved.
I.e.; text was facing each other as expected.
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
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 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 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 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
