AEM 6.4 - Component Creation - HOW TO Create an anchor component | Adobe Higher Education
Skip to main content
A
antonio_f
Level 3
January 21, 2020

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

  • January 21, 2020
  • 2 Antworten
  • 4585 Ansichten

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

Dieses Thema wurde für Antworten geschlossen.

2 Antworten

Sean-McK
Sean-McK
Level 4
January 21, 2020

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.

A
antonio_fAutor
Level 3
January 22, 2020

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

Allgemeine NutzungsbedingungenAccessibility statement

Loading footer...