Question
Last activity: 27 Oct 2015 7:50 EDT
Corr Emails do not take Skin formatting for included sections(7.1.8)
Issue: When a section is included in a correspondence rule, the formatting defined in the skin (eg a dynamic layout with "inline grid triple") is not formed and instead, all items are displayed in a list in the generated email.
Here is an example section which is included in a correspondence rule.
When the email delivered it looks like below:
The styles are not retaining in the generated email due to the absence of all the related CSS files.
I suggested to the customer to configure the correspondence rule instead of creating a separate section rule but they need to add repeat grid for that they need to use section.
Then suggested the below mentioned support article:
Issue: When a section is included in a correspondence rule, the formatting defined in the skin (eg a dynamic layout with "inline grid triple") is not formed and instead, all items are displayed in a list in the generated email.
Here is an example section which is included in a correspondence rule.
When the email delivered it looks like below:
The styles are not retaining in the generated email due to the absence of all the related CSS files.
I suggested to the customer to configure the correspondence rule instead of creating a separate section rule but they need to add repeat grid for that they need to use section.
Then suggested the below mentioned support article:
Which says:
ROOT CAUSE
The skin rules ( css ) related to section will not be present in the email. All email client like outlook dont support css files& block external links.
RESOLUTION
Since the email doesn't carry css files, the styles can be given in a non-auto generated section and include this section in the correspondence.
Since the email doesn't carry css files, the styles can be given in a non-auto generated section and include this section in the correspondence.
The customer wants to know how would we provide the styles such as a dynamic layout style? Could you provide an example of how we would pull it from the skin?
Accepted Solution
Pegasystems Inc.
US
Outlook on Windows is not able to handle the complex CSS auto generated by the skin rule form - this has been an issue for all the Outlook version - developers are dealing with this issue by using some custom CSS for outlook - see http://templates.mailchimp.com/development/css/outlook-conditional-css/ - Issues related to CSS support with Outlook should be directed to Microsoft.
so the short answer to your 2 questions
1/ yes - use non-auto-generated section - limit HTML and CSS descriptor to basic support like a table for example
2/ no - likely only the invalid/unsupported css selector is skipped but skip one selector can dramatically affect how the page looks like (especially if you are using a grid layout)
Pegasystems Inc.
US
on the skin rule form, go to the "included styles" tab and expand the section called "Advanced". Click on the link called "Add Pega 5 and 6 stylesheets"
this will enabled auto-generation of the CSS into a rule-file-text when saving the skin - You can then grab the content of the CSS and save it into an non auto generated section using the <style> tag.
If you want to send only a subset of the CSS (just for your inline grid triple for example) - if you click on the Action button in the skin rule form and select the previous menu item, you will get
the auto-generated CSS for the skin - you can then find the format that you are interested in using search and only copy the css settings for a specific format into your non auto-section
Hi Richard,
I have included the whole skin rule as a non-autogenerated section within an existing section wrapped in <Style> tag. This is seems working (partially but not exactly) for when viewing the attachment through PRPC but the same email does not have any formatting when received in outlook. When I save the source code of the outlook email as a html file (please see the attachment "OutLookSource.html") and open in browser then it displaying similarly as the work object attachment.
Here is the section:
attachment email:
Outlook email:
Please suggest on the above mentioned behaviour.
Hi Richard,
I have included the whole skin rule as a non-autogenerated section within an existing section wrapped in <Style> tag. This is seems working (partially but not exactly) for when viewing the attachment through PRPC but the same email does not have any formatting when received in outlook. When I save the source code of the outlook email as a html file (please see the attachment "OutLookSource.html") and open in browser then it displaying similarly as the work object attachment.
Here is the section:
attachment email:
Outlook email:
Please suggest on the above mentioned behaviour.
Am I missing something? Do we need to mention all the style in-line only?
Pegasystems Inc.
US
I've never looked into html/css support in email clients before, but this chart seems to explain why your example works in Apple Mail and not Outlook. Looking at Outlook's support for selectors, it's clear that most of our CSS for Dynamic Layouts - as well as many other components - will not work in Outlook, even if included correctly.
Interestingly, your example does work in Outlook for Mac. They're using a WebView instead of their own renderer.
Pegasystems Inc.
IN
We have discussed this issue with Nimbus and it is not a supported scenario.
Best option would be the solution suggested by Richard.
Maybe I am missing something, but what is the difference between what Richard suggested (including the styles from the css file directly in the section) and the setup that Sanjay showed here?
Pegasystems Inc.
US
I think that the summary is that if you want to include the whole CSS as an external css file, it will likely not work in Outlook due to the limited number of CSS descriptors supported by Outlook.
The best approach would be to extract the bare minimum of CSS needed to generate the inline grid triple layout and include it as an inline CSS.
see attached an updated version of the outlook source with the minimum set of inline css style for the inline grid triple
When you say "limited number of CSS descriptors supported by Outlook." Do you mean outlook has a limitation on the *amount* of descriptors allowed?
So if I define 500 different "Inline Grid XXX" formats, only a certain amount would be viable?
Pegasystems Inc.
US
I don't know if outlook has a limitation on the number of selectors (Ie8 and IE9 does - so may be outlook at one too). I am referring to the different types of CSS selectors allowed in the CSS3 spec - not all the selectors are supported - see this chart - so taking the whole CSS file generated by the rule-portal skin might cause some css parsing for outlook due to its limited support of CSS3 and a better strategy for this use case might be to reduce the number of descriptors to the ones supported by outlook.
Including the <style> from the attachment provided, as a non-autogenerated section within an autogenerated section referencing those styles did not work in our case.
Even just dragging the HTML into outlook from the attachment yielded the single list format as opposed to an inline grid triple.
Am I missing something with the configuration? Could we have a screenshare with my developer?
Pegasystems Inc.
US
it worked for me by sending the html that I attached in gmail and sending them by into my outlook mailbox - opening it with outlook showed the 3 columns - to insert HTML into gmail, you can look at the following video (this is not straightforward) How to Create a HTML Email in Gmail - YouTube
Hi Richard,
I have tried by inserting the attached HTML code while composing and sent the email from Gmail to outlook. While composing the email, it's showing in two column but in sent item of gmail and in outlook it's showing in single column.
In Gmail (compose):
In Gmail (Sent item):
In OutLook:
The contact of the SR, Robert Ammon, is looking for a way how we can show the similar layout in generated email in outlook not in gmail. I am also not able do that successfully.
If you want to have a look on my setting then here is the details:
Hi Richard,
I have tried by inserting the attached HTML code while composing and sent the email from Gmail to outlook. While composing the email, it's showing in two column but in sent item of gmail and in outlook it's showing in single column.
In Gmail (compose):
In Gmail (Sent item):
In OutLook:
The contact of the SR, Robert Ammon, is looking for a way how we can show the similar layout in generated email in outlook not in gmail. I am also not able do that successfully.
If you want to have a look on my setting then here is the details:
http://sra3818-v718-1:7370/v71ml8
UID: sanjay, Password: rules
Email Correspondence rule: "Test" of class "Org1-SRApp718-Work-SR1"
Please let me know if I am missing something.
More specifically, I am looking for the steps to send email correspondence from PRPC that uses styles pulled from the skin rule and included directly with the following setup:
With the following requirements:
- PRPC is used to send the notification
- Microsoft Outlook is used to display the section "correctly"
- Within the limits of what Outlook can do CSS, not expecting a MS change!
- Existing autogenerated section rule can be used as long as the skin CSS is included as part of a non-autogenerated section
- Updating to a completely non-autogenerated section would defeat the purpose of having a consistent style across the application
Thank you for working through this with us.
Hi,
The customer wants to get confirmation on below two points are correct or not:
1. To use a section embedded in an email that uses any component of css, the entire section has to be non-autogenerated. (I have tried as mentioned in the reply above on Sep 30, 2015 and it didn't worked for me)
2. A CSS class defines any item that outlook cannot handle (such as word-spacing) would cause the entire css class to be invalid, even if there were valid descriptors.
Though we could not confirm the second point because it depends on Outlook, what it supports and what not. We need to test it.
Please provide your comments on the above two points so that I can proceed with the related SR.
Accepted Solution
Pegasystems Inc.
US
Outlook on Windows is not able to handle the complex CSS auto generated by the skin rule form - this has been an issue for all the Outlook version - developers are dealing with this issue by using some custom CSS for outlook - see http://templates.mailchimp.com/development/css/outlook-conditional-css/ - Issues related to CSS support with Outlook should be directed to Microsoft.
so the short answer to your 2 questions
1/ yes - use non-auto-generated section - limit HTML and CSS descriptor to basic support like a table for example
2/ no - likely only the invalid/unsupported css selector is skipped but skip one selector can dramatically affect how the page looks like (especially if you are using a grid layout)