adobe / aem-core-email-components Goto Github PK

The following properties need to be added to
/libs/settings/translation/rules/translation_rules.xml

subject
preheader
plaintext

Allows embedding a Content Fragment in structured or text format.

Requirements:

• Capability to use the Campaign personalization fields in the RTE of the CF Editor.
• Option to embed the CF as single element.
• Disallow the possibility to insert in-between content.
• Avoid further wrapping DIV to be added to the output.

• Implement CF based on core CF component
• Integrate CF Editor plugin for personalization
• Disallow the possibility to insert in-between content.
• Remove wrapping DIVs
• Make sure RTE personalization is working
• Write Selenium test
• Document

Estimation: M (10 Days)

The segmentation component does not load with styles in editor.html. It is probably because the component does not load with its corresponding clientlib

core.wcm.components.tabs.v1

Takes the HTML output of the page and inlines all CSS in as HTML attributes:

• Rewrite the output to move every CSS ruleset to the targeted elements as an HTML style attribute.
  • Properly handle quotes, like: font-family: 'Timmana', "Gill Sans", sans-serif;
  • Accept also browser-specific rules, like: -ms-interpolation-mode: bicubic;
  • Preserve duplicate properties, like: display: inline-block; display: block;
  • Preserve capitalization as-is, like: Margin: 0px;
• Keep the original style element in the HTML as-is in order to:
  • Preserve media queries, web fonts, and animations by not removing from the style element any “@” declaration.
  • Preserve unmatched CSS rules, like the Outlook .ExternalClass class name.
  • Preserve CSS pseudo-selectors, like a:hover or p::before.
• Leave client-specific comments untouched, like:
  <!--[if mso]><style>.hide-mso { display: none; }</style><![endif]-->

• Check the PoC
• Fetch rendered HTML and CSS
• Extend CSS Inliner to meet all requirements
• Make sure not assignable CSS is not removed, but moved to style block in the HTML head
• Write unit tests
• Document how CSS inliner works -> https://github.com/adobe/aem-core-email-components/pull/29
• Fix review findings

Estimation: M (10 days)

https://creativedesigner.pixel.corp.adobe.com/

The current content structure under /content/campaign contains a lot of items which don't add value to our implementation, as they are legacy components. So we should clean up this structure:

• Brand page level under /content/campaign (example page title: "Example Brand", name: "example"). This contains the general configuration like Cloud Config
• Language page level under brand pages (example content: "en"). Make sure this works with language copy & translation process.
• Email pages under languages pages. Email pages can be nested
• Disallow all legacy templates within our structure

• Pushes the content rendered by the email page component to ACC

• The email pages allow to "Approve for Adobe Campaign" the content (could be a workflow), which will then make the page available in Campaign. Further action must then be taken in Campaign to actually send that content out to recipients.

• Check existing workflow, if it needs to be extended

• Check the existing workflow

• Check source code of existing workflow

• Extend, if neccessary

• Make sure the page with all images is published with this workflow

Same as the core title component.

Edit dialog options:

• Text (capability to use the Campaign personalization fields)
• Size

• Implemen title component based on core title component
• Update dialog
• Integrate RTE plugin for personalization
• Write Selenium tests
• Document

Estimation: S (6 Days)

Based on the Core Page component v3

Provide the following edit dialog options:

• Main tab
  • Email subject (jcr:title)
  • Description (jcr:description, text area)
  • Language + language root
  • Tags
  • HTML ID
  • Template settings
• Images
  • Page image
  • Thumbnail
• Cloud configuration
• Permissions
• Remove any page properties not mentioned here

Provides the following "Email Header" component that is included by the page template as a mandatory but editable component:

• Subject
  • RTE with only the Campaign personalization options enabled (no capability to create for e.g. bold text)
  • The value defaulting to the jcr:title defined on the page
• Pre-header
  • RTE with the Campaign personalization fields (no capability to create for e.g. bold text)
  • The value defaulting to the jcr:description defined on the page

Provides the following page policy (aka design dialog) options:

• Main tab
  • Client libraries
• Styles tab

Requirements:

• Extends the base or core page component.
• Functions with Editable Templates.
• Inlines all CSS into the HTML output on a STYLE element that is then further inlined as STYLE attributes on the individual elements by the CSS inliner rewriter.
• Includes no JS from any of the included clientlibs.
• Pre-header adds the entered content at the top of the page body as follows:
  <span style="display: none; …">${page.preheader}</span>
• Within the template editor, authors can configure an email header and/or footer that would be shared among all email pages resulting from this page template. In the template editor, authors can also pre-configure the design configuration of the components, like their style system.
• Provides the following "Email Header" component that is included by the page template as a mandatory but editable component.

• Create template
• Create page component
• Update page dialog
• Provide page policies
• Integrate CSS inliner
• Exclude / Remove JS from result -> Technical documentation
• Include RTE Plugin with personalization fields
• Include Header / Footer
• Include Email Header component

Estimation: M (10 days)

Steps to reproduce:

1. Create a new editable template (that uses the Email Page component)
2. Setup Root Container Policy that allows "Container" component (Email Core)
3. While in "Structure" mode, add a Container component to the template
4. Next, set up a Policy for the "Container" component. Allow Text, Image components in this policy.
5. Unlock the Container component.

Expected Behavior:
The unlocked container component shows the Image and Text component with a button to allow us to set up a policy for these components individually.

Actual Behavior:
The unlocked container component just shows a responsive grid component. Therefore we are unable to setup policies for the individual child components.

Set up the Selenium basics so we can use it for testing all components

• Check how this is done in core components
• Create our own setup
• Write the first basic test

Estimation: S (6 Days)

It looks like the container component does not load the corresponding clientlib when we add the component in the Editable template/page.

I was able to get around it by manually adding the clientlib in the Page Policy for Editable template, but I feel it would be best if the clientlib gets loaded automatically when the page loads without needing template author to add it manually.

Acceptance criteria:

• Based on the core tab component to create different containers for each segment and it's content
• Only one container is displayed at a time. Authors can navigate to different segment via tab's toolbar
• In the dialog, additional segments (tabs) can be added
• Provide input field for an editor to express the condition
• Render the ACC markup with condition
• When in WCMMode = diabled || preview, just render all tabs; do not provide any JS
• Write Selenium tests
• Documentation

Example for ACC markup:
<% if ( recipient.age > 35 ) { %>Insert content here<% } %>

Setup two AEM 6.5 instances - one for author, one for publish.

• RTE with capability to use the Campaign personalization fields

• Within the RTE, authors can pick Campaign variables, which will include a corresponding placeholder at the location of the cursor. This should be made available for the RTE of components, like the text component, but also for the RTE available for editing Content Fragments. Campaign will then replace these placeholders with the value of that variable when sending out the emails.

• Check existing implementation of the RTE Plugin and match to our requirements

• Check if changes in ACC are reflecting in AEM

• Check how to best integrate it into RTE and especially CF RTE, so we can use the existing RTE Plugin with the email core components

I have a CSS file that looks something like this

p{
color: red;
}

.cmp-text--regular p{
font-size: 20px; 
color: darkgrey; 
}

Expected Behaviour

The expected behavior for the CSS inliner would be to create style attribute

<div class="cmp-text--regular">
<p style="font-size:20px; color: darkgrey;">This should be dark grey</p>
</div>

Actual Behaviour

<div class="cmp-text--regular">
<p style="font-size:20px; color: red;">This should be dark grey</p>
</div>

Notice that the font color is red instead of darkgrey.

The AEM - Campaign integration must allow the following authoring flow:

• In AEM, authors can create a free-formed hierarchic structure of folders and email pages under /content/campaign to prepare the content of the various emails.
• Each email page is a page with the resource type of page provided within this repository of components. Customers could however create extensions of this page component which would potentially have a different resource type.
• Within the template editor, authors can configure an email header and/or footer that would be shared among all email pages resulting from this page template. In the template editor, authors can also pre-configure the design configuration of the components, like their style system.
• Within the RTE, authors can pick Campaign variables, which will include a corresponding placeholder at the location of the cursor. This should be made available for the RTE of components, like the text component, but also for the RTE available for editing Content Fragments. Campaign will then replace these placeholders with the value of that variable when sending out the emails.
• Within the segmentation component, authors can pick Campaign segments and map them to Experience Fragment variations. The component will then generate corresponding conditional blocks that Campaign will then resolve when sending out the emails.
• The email pages allow to "Publish to Campaign" the content (could be a workflow), which will then make the page available in Campaign. Further action must then be taken in Campaign to actually send that content out to recipients.

We need a way to reliably externalize all URLs which are renderd in a resulting email page. The functionality provided by AEM will not work for us due to various reasons:

• Which URL to use in a multi domain setup?
• Domains used for marketing emails often differ from the ones used for websites

Therefore the following should be implemented:

• A sling:mapping needs to be created . The mapping needs to have an attribute: email = true
  • An example of such a mapping is provided with this project
• A Context Aware Configuration is created on our Email Page
  • An editor can select the mapping to use in a dropdown. All mappings with email = true are provided in that dropdown
• All email pages which have that configuration use the selected mapping while rendering to externalize all links, images, ...

• Extend the CF Editor to include the personalization plugin
• Document findings

Make sure the functionalities and features from the old page component will also work with the new page component:

• Show status on top of the page (see /libs/mcm/campaign/components/status/status.jsp).

• Check /libs/mcm/campaign/components/campaign_newsletterpage (especially head.html and body.html) for code regarding segments and the context hub.

• Add status bar on top of the page.

• Remove html tags that are not needed for mails.

We are seeing multiple javascript errors in the console when we open a page in editor.html

Here are the various messages.

Uncaught ReferenceError: jQuery is not defined
    at coralui3.a57ddee782c0237838911717d38b6c48.js:143:102
    at coralui3.a57ddee782c0237838911717d38b6c48.js:143:111

core.c6bcb965f66f03e351688258c27f4a73.js:174 Uncaught ReferenceError: Granite is not defined
    at core.c6bcb965f66f03e351688258c27f4a73.js:174:14

Uncaught TypeError: document.registerElement is not a function
    at l (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:59063)
    at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:8:12303)
    at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
    at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:8:8277)
    at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
    at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:115636)
    at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
    at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:115528)
    at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
    at components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:451

foundation.dbab132ac3fac1cd5ba16a6f69e26fa9.js:40 Uncaught TypeError: $ is not a function
    at foundation.dbab132ac3fac1cd5ba16a6f69e26fa9.js:40:5
    at foundation.dbab132ac3fac1cd5ba16a6f69e26fa9.js:114:3

clientlibs.6bfe24e774d5f8b27d81ade05ca8766d.js:345 Uncaught ReferenceError: CQ is not defined
    at clientlibs.6bfe24e774d5f8b27d81ade05ca8766d.js:345:4

shared.d39a59051372bc8334750c33de87aac3.js:408 Uncaught TypeError: Cannot read properties of undefined (reading 'removeParameters')
    at new <anonymous> (shared.d39a59051372bc8334750c33de87aac3.js:408:40)
    at shared.d39a59051372bc8334750c33de87aac3.js:59:18

Same as the core text component.

• Capability to use the Campaign personalization fields in the RTE.

• Extend core text component
• Integrate RTE personalization plugin
• Write Selenium test
• Document -> Technical documentation

Estimation: S (6 Days)

Not able to edit Text (or any component) to container component.

Steps to reproduce.

1. Create an editable template
2. Set policy for Root layout container. Allow Email Core Container component in the policy.
3. While in "Structure", add "Container" component.
4. Set a policy for the Container component. Allow Text, Image, Segmentation component etc to the policy
5. Unlock Container component
6. Switch to "Initial Content" mode in the template. You should be able to see the Container component.
7. Click "+" button, add "Text" component
8. Notice that - when you click on the text component, it does not load the toolbar at all, preventing us from editing the component.

Currently, there is no way for us to provide a default option when using the Segmentation component.

In the Targeting Mode, there is an option to specify the default rendition of a component.

• Check with @gabrielwalt regarding using AEM native APIs
• Add styling to status section
• Check that text output makes sense

Each email page is a page with the resource type of page provided within this repository of components. Customers could however create extensions of this page component which would potentially have a different resource type.

• Check if ACC preview works
• Document findings in Wiki so users / developers know how to set it up and what to do when creating their own page component

Make use of the classes to inline css style:

• Verify that https://github.com/adobe/aem-core-email-components/issues/2 requirements are still met:

Rewrite the output to move every CSS ruleset to the targeted elements as an HTML style attribute.
Properly handle quotes, like: font-family: 'Timmana', "Gill Sans", sans-serif;
Accept also browser-specific rules, like: -ms-interpolation-mode: bicubic;
Preserve duplicate properties, like: display: inline-block; display: block;
Preserve capitalization as-is, like: Margin: 0px;
Keep the original style element in the HTML as-is in order to:
Preserve media queries, web fonts, and animations by not removing from the style element any “@” declaration.
Preserve unmatched CSS rules, like the Outlook .ExternalClass class name.
Preserve CSS pseudo-selectors, like a:hover or p::before.
Leave client-specific comments untouched, like:

• Adjust code to make it use both external CSS files and style elements

• Create a style element with all not matching definitions and write it to the html

• If there are competitive definitions, make sure to only use the definition with a higher priority (specificity).

• How we can manage overlapping selectors (e.g. border and border-bottom)? TEST AND RE-ASSEST.

• Check the PoC

• Fetch rendered HTML and CSS

• Extend CSS Styles Inliner to meet all requirements

• Make sure that all not matching CSS selectors are inserted in the <style> block in the HTML head at the end of processing

• Write unit tests

• Add context-aware configuration to select the CSS style merging mode to be used

• Write technical documentation -> https://github.com/adobe/aem-core-email-components/wiki/Integrate-CSS-Styles-Inliner-code-from-EL-project:-Technical-documentation

Estimation: XS (3 days)

In AEM, authors can create a free-formed hierarchic structure of folders and email pages under /content/campaign to prepare the content of the various emails.

The nested structure could be composed only of email page components, meaning that the email component would also be used to create nodes that only intend to serve as a folder. That way, if there are inherited properties, they can be set on the parent email component that serves as folder.

• Check: Is the hierarchy limited by AEM or ACC?
• Check: Does the UI / API / ... currently available in ACC support deeper hierarchy?
• Update hierarchy from flat to deep in AEM
• Check if we can mirror the same hierarchy in ACC with the sync process
• If not possible to have deeper hierarchy, check if there are other ways to improve UX

Add all nested media query rules inside other selectors to the style tag.

https://creativedesigner.pixel.corp.adobe.com/

A maven project similar to the wcm-core-components needs to be created for our AEM artifacts.

Let's start with the following settings (for development):

    <parent>
        <groupId>com.adobe.cq</groupId>
        <artifactId>core.wcm.components.parent</artifactId>
        <version>2.17.15-SNAPSHOT</version>
        <relativePath>parent/pom.xml</relativePath>
    </parent>

    <artifactId>core.email.components.reactor</artifactId>
    <packaging>pom</packaging>
    <version>2.17.15-SNAPSHOT</version>

    <name>Adobe Experience Manager Core Email Components Reactor</name>

• Copy existing structure from core components
• Rename project
• Update pom files
• Remove stuff not needed in our context
• Make sure initial build is working
• Update readme.md with infos on the project & how to run a build

Estimation: S (6 days)

• Set up local ACC and AEM instances
• Connect local ACC and AEM instances
• Understand how the connection works, it's requirements and limitations
• Check the source code of the AEM ACC connector
• Document findings

Estimation: S (6 days)

Open questions:

• How can we access the source code of the AEM ACC connector? --> Check comments

Simple image element.

Provides the following edit dialog options:

• Asset tab
• Metadata tab
  • Image is decorative (when checked, adds role="presentation" to the img element)
  • Alternate text (with an option to get it from DAM)
  • Link (adds <a href>)
  • Width (in pixels)
  • Scale image to available width (when checked, adds style="width: 100%;")
  • HTML ID

Provides the same page policy (aka design dialog) options as the core image component, minus the smart and lazy loading options with responsive resizing.

• Provide default width in design dialog, which will be used if editors don't provide an explicit width

Requirements:

• The image must not require any JavaScript on the publish instance.
• It must allow specifying a width in pixels and it will compute the corresponding height in pixel for the HTML output.

• Implement image component based on core image component
• Update dialog options
• Update design dialog
• Update rendering of the image
• Make sure the src URL is absolute
• Make sure no JS is required
• Compute height based on width
• Write Selenium tests
• Document -> https://github.com/adobe/aem-core-email-components/wiki/Image-component:-Technical-documentation
• Check what are best practices for image size / scaling in emails

Open questions:

• How to compute the absolut src URL? Especially in multi domain setups?

Estimation: L (15 days)

The current version Email Page component has a metadata property that allows us to specify "Allowed Templates". I know that the WCM Page component also has a field that allows you to specify the /conf folder to associate the allowed Editable templates.

Is there a plan to add that option to the Email Page component? or should we continue to use "Allowed Templates" fields to associates editable templates.

Since the Email Page component is proxied from the Web Page component, it uses the "Layout Container" component from Web Core components as the "Root" container.

Are we planning to update this so that instead of using Web component, the Email Page will use the email container component as the "Root" container?

CaConfig removal, and options addition to page properties

• Style merger mode and HTML sanitizing mode addition to EmailPage page properties
• CaConfig removal

A call-to-action link.

Edit dialog options:

• Text (capability to use the Campaign personalization fields)
• Link (capability to use the Campaign personalization fields)

• Implement button component based on core button component
• Update dialog
• Integrate RTE plugin for personalization
• Write Selenium tests
• Document

Estimation: S (6 Days)

In general, the HTML markup for the components is not email-friendly (as of release 0.4.0). Since they are derived from Web Core components, there is a heavy usage of

Always call the style inliner servlet when the page is displayed in "wcmmode=disabled", so that the page is transferred to ACC without external styles and JS.

The conditions added by the Segmentation Item component look correct in the UI but when running the actual delivery, Adobe Campaign Classic throws a compilation error.

The condition entered on Segmentation Item component
targetData.firstName == "Priyank"

But when ACC receives the HTML, the condition looks like this (see below), which causes compilation error on the Campaign side.
if (targetData.firstName == "Priyank")

When I compare the conditions in the existing campaigns, the condition looks like -
if (targetData.firstName == "Priyank")

A combination of title, text, image and call-to-action.

Requirements:

• Capability to display the image as a background image or as a regular image.
• Capability to use the Campaign personalization fields in the RTE for the description.

• Implement teaser component based on core teaser component
• Update rendering so it uses email core components instead of core components
• Implement background image option
• Check: use image from linked page's properties if no image is defined in teaser
• Write Selenium tests
• Document

Estimation: M (10 Days)

Removing the arrow icons from the component menu as well as Layout mode to remove redundancies since you have since incorporated this as part of the Container component dialog for column layout.

Allows embedding an Experience Fragment in the email.

Requirements:

• Limits to the maximum the number of DIV inserted in the output by the XF component.
• This also requires an XF Page component that is adapted for email.

• Implement XF component based on core XF component
• Implement XF page component based on core XF page component
• Remove wrapper DIVs
• Write Selenium tests
• Document

Estimation: M (10 Days)

Provides a simplified responsive grid behavior that is made out of 6 columns.

Provides the following edit dialog options:

• Main tab
  • Layout that is limited to following column split-up:
    • full-width (1)
    • half | half (3-3)
    • one-third | two-third (2-4)
    • two-third | one-third (4-2)
    • third | third | third (2-2-2)
  • Background color
  • Background image
  • HTML ID

Provides the following page policy (aka design dialog) options:

• Allowed components
• Default components
• Responsive
  • Maximal page width in pixels (defaults to 640px)
  • Breakpoint below which the layout is made linear (defaults to 480px)
• Background
• Styles

Requirements:

• All components on the page must be placed inside a grid to ensure consistent rendering on email clients.
• The grid is not allowed of being nested.
• The grid has a fixed number of 6 columns and a limited number of ways to distribute them into 2 or 3 columns (see edit dialog options).

The grid would not allow being nested and would have the following breakpoints:

• Above the maximal width configured in the policy (e.g., above 640px): The content doesn't further extend and is centered in the middle of the viewport.
• Between the maximal width and the breakpoint width (e.g.: between 640px and 480px): The layout is stretched down to the viewport width.
• Below the breakpoint width (e.g., below 480px): The layout breaks into a linear representation where the columns displayed one after the other vertically, and the content continues to be stretched down.

This typically is achieved with the following markup for an example one-third two-third ratio:

<!-- In the page head: -->
<style>
    @media screen and (max-width: 640px) {
        .layout {
            width: 100% !important;
        }
    }
    @media screen and (max-width: 480px) {
        .layout-column {
            display: block !important;
            width: 100% !important;
        }
    }
</style>

<!-- In the page body: -->
<center>
    <table class="layout" width="640" border="0" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
            <td width="33.33%" class="layout-column">
                One Third
            </td>
            <td width="66.67%" class="layout-column">
                Two Third
            </td>
        </tr>
    </table>
</center>

• Extend core container component
• Implement dialog
• Implement design dialog
• Implement columns with different options
• Implement Selenium tests
• Write documentation

Estimation: S (6 Days)