[Solved] Results.attr("data-conditional", ""); meaning when using conditional in templates?

OL Connect Professional Designer
1

Just a curiosity to better understand Connect and its internals, when creating a dynamic element using the built-in utility and then clicking Expand the code shown is like

if (record.fields.ExtraData == "") {
	results.attr("data-conditional", "");
	results.hide();
} else {
	results.show();
}
  • What is the use of the newly added attribute data-conditional?
  • Is there a reason why it is added only in the results.hide() scope?

Very often we directly write such code ourself and I noticed some teammates omitting the results.attr("data-conditional", "");, the reason: “it seems to do noting”.
But since the automatic form does add it I suspect it actually serves to something and I’d like to learn.

2

By my knowledge this is not needed, it should work just fine without it. I’ll check with our developers what the origin of this is.

1 Like
3

This is basically only needed whe dealing with conditional content within email sections. Using it ensures that content hidden with display: none; is properly excluded from the output (by the OL Connect Merge Engine), preventing it from being inadvertently shown by email clients that do not support this CSS property for hiding content.

2 Likes
4

Thanks for getting back with updates! So it is actually needed after all when dealing with emails.

I’ve also found another use in complex templates: when there are a lot of conditional elements, we can target all the conditionals and kinda apply an “override” of all of them when developing, disabling the script before submitting to production.
In the Design pane the conditionals are all shown but when using the Preview pane rules are applied and some are hidden (as expected) but it can be desirable to see them instead for other purposes.

msedge_32amnkiOmK
msedge_32amnkiOmK1033Ă—570 29.9 KB

This is might be more convenient rather than going back and forth to the datamapper to change the source data to accommodate all the possible scenarios of the conditionals.

If there is a better built-in way to achieve this, let me know.

5

Think you could do that with CSS styles. The html element has a class reflecting the view mode. In preview mode it has class .PREVIEW. I think the following should work:

.PREVIEW [data-conditional] {
display: block !important;
}

or give the conditional elements a custom class, something like this:

.PREVIEW .myConditionals {
display: block !important;
}

1 Like
6

That’s definitively a better approach, without the risks of forgetting to disable the script snippet!