Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 10
Level 2
antonio_f
Level 2

Likes

5 likes

Total Posts

31 posts

Correct Reply

2 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 2
antonio_f
Level 2

Likes

5 likes

Total Posts

31 posts

Correct Reply

2 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
antonio_f
Level 2

21-01-2020

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

Replies

Avatar

Avatar
Validate 1
Level 2
Sean-McK
Level 2

Likes

8 likes

Total Posts

50 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
Level 2
Sean-McK
Level 2

Likes

8 likes

Total Posts

50 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile
Sean-McK
Level 2

21-01-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.

Avatar

Avatar
Validate 10
Level 2
antonio_f
Level 2

Likes

5 likes

Total Posts

31 posts

Correct Reply

2 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 2
antonio_f
Level 2

Likes

5 likes

Total Posts

31 posts

Correct Reply

2 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
antonio_f
Level 2

22-01-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