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

Sightly data sly test question

Avatar

Avatar
Validate 25
Level 3
alistairp781078
Level 3

Likes

10 likes

Total Posts

96 posts

Correct Reply

5 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 10
Give Back 5
View profile

Avatar
Validate 25
Level 3
alistairp781078
Level 3

Likes

10 likes

Total Posts

96 posts

Correct Reply

5 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 10
Give Back 5
View profile
alistairp781078
Level 3

12-03-2018

Is it possible to still use code within a containing div even if that containing tag resolves data-sly-test as false?

As an example:

I'm trying to show an image that may or may not have an a tag wrapped around it. I have the following code:

<a data-sly-test="{image.link}" href="{image.link}">

     <img src="${image.path}">

</a>

The image link is optional so some images won't have a link wrapped around them. However, if a link isn't specified, all of the code is removed. Is it possible to keep the <img src> line even if that test in the wrapping a tag is false?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 10
Level 3
Radha_Krishna_N
Level 3

Likes

15 likes

Total Posts

51 posts

Correct Reply

4 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 10
View profile

Avatar
Validate 10
Level 3
Radha_Krishna_N
Level 3

Likes

15 likes

Total Posts

51 posts

Correct Reply

4 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 10
View profile
Radha_Krishna_N
Level 3

12-03-2018

Hi,

If the link is not authored, then data-sly-test="{image.link}" will be false. the content of the anchor tag will not be displayed. AFAIK you should have something like below

<a data-sly-test.noLink="{image.link}" href="{image.link}">

     <img src="${image.path}">

</a>
<img data-sly-test="${!noLink}" src="${image.path}">

Thanks,

Radha Krishna N

Answers (6)

Answers (6)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct Reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct Reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

03-06-2020

Hi @alistairp781078 

 

There is a attribute of HTL called data-sly-unwrap which basically removes the wrapping element if not required. You can set data-sly-unwrap conditionally like

<a data-sly-unwrap="{!image.link}" href="{image.link}">

     <img src="${image.path}">

</a>

 

To read more about this attribute. Read examples here https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html

 

Hop it helps!

Nupur

Avatar

Avatar
Level 1
timw92982900
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
timw92982900
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
timw92982900
Level 1

03-06-2020

There is another option, although it retains an element around your image:

<a data-sly-element="${image.link ? 'a' : 'div'}" href="${image.link}" class="image-block">
    <img src="${image.path}">
</a>

If `image.link` is authored, it outputs <a>, else it outputs <div>.

Con:

  • the div will have an empty 'href' 

Pro:

  • you have a consistent element wrapping your image to help control styling.
  • No redundant code just for an if/else statement. 

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

12-03-2018

That is like saying in Java is there a way to get a statement to work in an If statement as such

if (val1 < val2)

     do something

This will not execute if val2 is less that val1. Same as HTL - if that condition is false - then it will not be included in the page.

Avatar

Avatar
Validate 25
Level 3
alistairp781078
Level 3

Likes

10 likes

Total Posts

96 posts

Correct Reply

5 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 10
Give Back 5
View profile

Avatar
Validate 25
Level 3
alistairp781078
Level 3

Likes

10 likes

Total Posts

96 posts

Correct Reply

5 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 10
Give Back 5
View profile
alistairp781078
Level 3

12-03-2018

Cheers for the advice, Radha. I'll go with that solution.

Avatar

Avatar
Validate 25
Level 3
alistairp781078
Level 3

Likes

10 likes

Total Posts

96 posts

Correct Reply

5 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 10
Give Back 5
View profile

Avatar
Validate 25
Level 3
alistairp781078
Level 3

Likes

10 likes

Total Posts

96 posts

Correct Reply

5 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 10
Give Back 5
View profile
alistairp781078
Level 3

12-03-2018

I'm aware that the content of the containing tag will not show if the test evaluates as false.

What I'm asking is, is there some way of overriding that feature?

<a data-sly-test>

     <img>

<a>

The a tag is an optional feature in the component. I want to add a test on that div, because if a link hasn't been specified by the content editor, I don't want the tag to show up. Regardless, I will always want the img tag to show.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

12-03-2018

Are you asking if this equals false if the image will still show up?

This is answered in the spec:  htl-spec/SPECIFICATION.md at master · Adobe-Marketing-Cloud/htl-spec · GitHub

2.2.5. Test

data-sly-test: 

Keeps, or removes the element depending on the attribute value.

Element: shown if test evaluates to true.

Content of element: shown if test evaluates to true.

Attribute value: optional; evaluated as Boolean (but not type-cased to Boolean when exposed in a variable); evaluates to false if the value is omitted.

Attribute identifier: optional; identifier name to access the result of the test.

Removes the whole element from the markup if the expression evaluates to false.