Expand my Community achievements bar.

Basic JS Looping logic using ACS GUI

Avatar

Level 3

Noticed the following when using the GUI to create a simple LOOP in ACS.

How can one add logic say based of an index of an element?

??data-nl-variant-index="1"??

Just simply put want to add if index paymentType.indexOf('xxxx') 

then write xxxxx, else yyyy

 

Seems like adobe can't do this Out of the Box?

 

<!DOCTYPE html>
<html>
<head>
<meta name="content-version" content="3.3.7">
<meta class="nl-dce-fragment" data-nl-name="EmailUrlBase">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style data-name="default" type="text/css">body{font-family:sans-serif;margin:0 !important;padding:0 !important;background:#FFFFFF;min-width:750px;}td{padding:0;border-collapse:collapse;}th{font-weight:normal;text-align:left;}.acr-fragment,.acr-component{padding:0;}.divider-container{padding:5px 0;font-size:0px;}.text-container p{margin:0;}.image-container{line-height:0;}.acr-tmp-component img,.image-container img{height:auto;}.button-container a{text-decoration:none;color:inherit;}.acr-structure{background-size:auto;background-repeat:no-repeat;}.structure__table{table-layout:fixed;margin:0 auto;border-spacing:0;background-size:auto;background-repeat:no-repeat;mso-table-lspace:0pt !important;mso-table-rspace:0pt !important;}.colspan1,.colspan2,.colspan3,.colspan4,.colspan33,.colspan66{background-size:auto;background-repeat:no-repeat;box-sizing:border-box;}.colspan1{width:100%;}.colspan2{width:50%;}.colspan3{width:75%;}.colspan4{width:25%;}.colspan33{width:33%;}.colspan66{width:66%;}.component-social-container{width:100%;text-align:center;}span.preheader{display:none !important;visibility:hidden;mso-hide:all;opacity:0;}.ExternalClass{width:100%;}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%;}h1,h2,h3,h4,h5{display:block;font-weight:bold;}h1{font-size:24px;margin:19px 0 19px 0;}h2{font-size:24px;margin:20px 0 20px 0;}h3{font-size:19px;margin:19px 0 19px 0;}h4{font-size:16px;margin:21px 0 21px 0;}h5{font-size:13px;margin:22px 0 22px 0;}h6{font-size:11px;margin:25px 0 25px 0;}@media screen and (min-width: 500px){.is-desktop-hidden{display:none !important;}}</style>
<style data-name="media-default-max-width-500px" type="text/css">@media screen and (max-width: 500px){body{width:100% !important;min-width:0px !important;}.structure__table{width:100%;}.colspan1,.colspan2,.colspan3,.colspan4,.colspan33,.colspan66,.colspan-n{display:block !important;min-width:100%;}.container-small-size .colspan1,.container-small-size .colspan2,.container-small-size .colspan3,.container-small-size .colspan4,.container-small-size .colspan33,.container-small-size .colspan66,.container-small-size .colspan-n{display:table-cell !important;width:100% !important;}.is-mobile-hidden{display:none !important;}}</style>
<!--[if gte mso 9]><style acrite-mso-css="true">.image-container div { display: block;}.structure__table td { padding: 0; border: none;}.button-container { border: none !important; padding: 0 !important; margin: 0 !important; line-height: normal !important;}.acr-structure { margin: 0 !important;}.acr-component { margin: 0 !important;}.acr-fragment { margin: 0 !important;}.colspan1, .colspan2, .colspan3, .colspan4, .colspan33, .colspan66 { box-sizing: border-box !important;}</style><![endif]-->
</head>
<body class="">
<div class="acr-container">
<div class="acr-structure acd-loop" data-structure-id="1-1-column" data-structure-name="richtext.structure_1_1_column">
<table class="structure__table" align="center" cellpadding="0" cellspacing="0" border="0" width="750">
<tbody>
<tr class="nl-dce-loop" data-nl-loop-id="1616514803034" data-nl-loop-start="1" data-nl-loop-length="10" data-nl-loop-expr="/context/rtEvent/ctx/paymentsCol">
<th class="colspan1">
<div class="acr-fragment acr-component nl-dce-variant nl-dce-variant-block nl-dce-if nl-dce-multiconditional" data-component-id="text" data-nl-variant-group="1616514981238" data-nl-variant-label="Label 1" data-nl-variant-index="1" data-nl-expr="" data-nl-condition-type="multiple" contenteditable="false">
<div class="text-container" contenteditable="true">
<p>paymentType:&nbsp;<span class="acr-field nl-dce-field" data-nl-expr="DCECURRENTITEM/paymentType" data-nl-type="string" contenteditable="false">Payment Type (paymentType)</span><br></p>
<p>payment: <span class="acr-field nl-dce-field" data-nl-expr="DCECURRENTITEM/paymentName" data-nl-type="string" contenteditable="false">Payment Name (paymentName)</span><br></p>
<p>payment: </p>
</div>
</div>
<div class="acr-fragment acr-component nl-dce-variant nl-dce-variant-block nl-dce-if nl-dce-multiconditional nl-dce-current-variant" data-component-id="text" data-nl-variant-group="1616514981238" data-nl-variant-label="Default" data-nl-variant-index="0" data-nl-expr="" data-nl-condition-type="multiple" data-nl-variant-default="true" contenteditable="false">
<div class="text-container" contenteditable="true">
<p>pType:&nbsp;<span class="acr-field nl-dce-field" data-nl-expr="DCECURRENTITEM/paymentType" data-nl-type="string" contenteditable="false">Payment Type (paymentType)</span><br></p>
<p>pName: <span class="acr-field nl-dce-field" data-nl-expr="DCECURRENTITEM/paymentName" data-nl-type="string" contenteditable="false">Payment Name (paymentName)</span><br></p>
<p>pNbr: <span class="acr-field nl-dce-field" data-nl-expr="DCECURRENTITEM/authNbr" data-nl-type="string" contenteditable="false">Authorization Number (authNbr)</span><br></p>
<p>pRrn: <span class="acr-field nl-dce-field" data-nl-expr="DCECURRENTITEM/rrn" data-nl-type="string" contenteditable="false">RRN (rrn)</span><br></p>
<p>pAmount: <span class="acr-field nl-dce-field" data-nl-expr="DCECURRENTITEM/paymentAmount" data-nl-type="string" contenteditable="false">Payment Amount (paymentAmount)</span></p>
</div>
</div>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

0 Replies