Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

AEM 6.4 - Component Creation - HOW TO Create an anchor component

Avatar

Level 3

Dear all,

as a newbie I wish to create an anchor component that an author can drag onto a page and configure its text and url via dialog box.

The component is made of an usual  html anchor tag like <a href="${author_URL}"> ${author_TEXT}</a>.

The component contents ( author_URL & author_TEXT) should be validated in the author dialog using regex expressions.

Any help and/or suggestions and/or sample will be very appreciated.

Thanks 

BR,

Antonio

2 Replies

Avatar

Level 5

Hey Antonio,

 

I think you have 2 different things going on here. 

 

1) The actual component, that is easy:

public interface Anchor {
public String getLinkText();

public String getLinkUrl();
}

 

@Model(adaptables = SlingHttpServletRequest.class,
adapters = Anchor.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class AnchorImpl extends BaseComponent implements Anchor {
@ValueMapValue
private String linkText;

@ValueMapValue
private String linkUrl;

public String getLinkText() {
return linkText;
}

public String getLinkUrl() {
return linkUrl;
}


}

 

<div data-sly-use.model="models.Anchor"
data-sly-use.template="core/wcm/components/commons/v1/templates.html"
class="cmp-anchor"
data-sly-test.test="${!wcmmode.edit}"
id="${model.linkUrl}"></div>

<sly data-sly-call="${template.placeholder @ isEmpty=!test, classAppend='cmp-anchor'}"></sly>

 

<?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"
xmlns:granite="http://www.adobe.com/jcr/granite/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">
<linkText
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Title"
name="./linkText"/>
<linkUrl
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="ID"
name="./linkUrl"/>
</items>
</column>
</items>
</content>
</jcr:root>

 

 

2) The validation....you can create a javascript call on save of your dialog box to check to make sure the anchor is there. 

 

Another way, but haven't done it, you can create a data source to pull all components that have an ID inside the <body> tags and only give the author a drop down to select the elements.

Avatar

Level 3

Hi,

first of all thank you for replay.

As newbie I was looking for an easy way since at the moment I'm unable to understand the sample you sent me.

In my short AEM knowledge I would like to create a such UI component via crxde IDE if possible.

 

Best regards,

Antonio