create new component AEM AEM
Structure AEM Component
/letter/contribution-verification
+ contribution-verification.html
+ .content.xml
+ _cq_dialog
+ _cq_dialog/.content.xml
There are some notes in here:
> .content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Component"
jcr:title="Contribution Verification Component"
componentGroup="Flagtick - Letter"/>
Note: componentGroup will wrap number of components that involves into specific feature.
Beside, you can custom cq:dialog and HTML for this component.
> HTML Template:
<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-use.model="com.flagtick.core.models.ContributionLetterModel">
...
</sly>
Note: You can try to reference com.flagtick.core.models.impl.ContributionLetterModelImpl and com.flagtick.core.models.ContributionLetterModel in core folder.
+ ContributionLetterModel.java
package com.flagtick.core.models;
public interface ContributionLetterModel {
String getRegistrationPage();
}
+ ContributionLetterModelImpl.java
package com.flagtick.core.models.impl;
@Model(adaptables = SlingHttpServletRequest.class,
adapters = VerificationFormModel.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class ContributionLetterModelImpl implements ContributionLetterModel {
@ValueMapValue
private String registrationPage;
@SlingObject
private ResourceResolver resolver;
@Override
public String getRegistrationPage() {
return resolver.map(LinkUtils.sanitizeLink(registrationPage));
}
}
> Div Parent:
<div class="flagtick-contribution-verification-letter"
data-cmp-is="ContributionVerificationLetter"
data-resource="${resource.path}"
data-editmode="${wcmmode.edit ? 'true' : ''}"
data-registration-page=${model.registrationPage}>
--->
</div>
> Full Content For Div
<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-use.model="com.flagtick.core.models.ContributionLetterModel">
<div class="flagtick-contribution-letter"
data-cmp-is="ContributionVerificationLetter"
data-resource="${resource.path}"
data-editmode="${wcmmode.edit ? 'true' : ''}"
data-registration-page=${model.registrationPage}>
<img src="${model.pathLogo}" alt="FLAGTICK Letter Logo">
<br><br><br><br><br>
<p>June 23, 2022</p>
<br><br><br><br><br>
<p class="sender-column">
Baker Bruice<br>
1924 Australia.<br>
El Lorence, CA 11943-0894
</p><br>
<p class="sender-column">Dear Ms. Bedi:</p><br>
<p>We received your request to verify your FLAGTICK Member contribution account balance.
As of October 21, 2020, it was $28,122.60.</p><br>
<p>You can only withdraw your contributions if you terminate employment, and you cannot borrow from the account. Employer-paid contributions are not refundable. If you are vested
and withdraw your Member contributions after terminating employment, you will forfeit
your lifetime retirement benefit.
</p><br>
<p>If you have questions, please contact FLAGTICK’s Member Service Center at 111.222.3333.</p><br>
<p>Sincerely,</p>
<img src="${model.signature}" alt="FLAGTICK Letter Logo">
<p>Flagtick Group</p>
<p>CEO Luis</p><br><br><br><br><br>
</div>
</sly>
> Cq:Dialog
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<pathLogo
jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="Path of the image."
fieldLabel="Logo for Letter"
name="./pathLogo"
value="/content/dam/flagtick/logos/Logo.png"
required="{Boolean}true"
rootPath="/content/dam/flagtick"/>
<signature
jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="Signature"
fieldLabel="Signature for Letter"
name="./signature"
value="/content/dam/flagtick/letter/Signature.png"
required="{Boolean}true"
rootPath="/content/dam/flagtick"/>
</items>
</column>
</items>
</content>
</jcr:root>
> Writing CSS for Parent.
<root
jcr:lastModified="{Date}2021-11-02T12:23:56.062-06:00"
jcr:lastModifiedBy="admin"
jcr:primaryType="nt:unstructured"
sling:resourceType="flagtick/components/content/container"
id="letter-container"
layout="responsiveGrid">
<container
jcr:lastModified="{Date}2021-12-01T16:02:42.032-03:00"
jcr:lastModifiedBy="admin"
jcr:primaryType="nt:unstructured"
sling:resourceType="flagtick/components/content/container"
layout="responsiveGrid">
<contribution-verification
jcr:lastModified="{Date}2021-12-01T16:16:00.128-03:00"
jcr:lastModifiedBy="admin"
jcr:primaryType="nt:unstructured"
sling:resourceType="flagtick/components/content/letter/contribution-verification"
enableUserNameTitle="true"
textIsRich="true"
editable="{Boolean}true"/>
</container>
</root>
Using id="letter-container" to write CSS for this page template.
> contribution-letter.pcss
.flagtick-contribution-letter {
.sender-column {
text-align: left;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
p,
ul,
ol,
dl,
address {
font-size: 1.1em;
}
p,
li,
dd,
dt,
address {
line-height: 1.5;
}
img {
max-width: 296px;
}
}
To be continue...
24