How to pass the data in AEM? Syntax Error! | Community
Skip to main content
A
Ameen_Dev
Level 4
July 2, 2022
Solved

How to pass the data in AEM? Syntax Error!

  • July 2, 2022
  • 3 replies
  • 1344 views

Actually, I am trying to pass the data in order to make the modal popup work. Here I am getting the modal popup through experience fragments. 

 

First I created a template to show the modal popup. And I am passing the modal ID to match the experience fragment modal ID.  The code is given below

 

 

 

<template data-sly-template.mainbutton="${ @ properties}"> <sly> <div data-sly-test="${properties.modalFragmentPath}" class="${properties.modalBehavior == 'fullOverlay' ? 'fullscreen-overlay-wrap overlay-modal' : ''}" id="${properties.modalId}"> <sly data-sly-resource="${properties.modalFragmentPath}"></sly> </div> </sly> </template>

 

 

 

 

Second I am calling the created template on the main HTML to show the modal popup. And the code is given below.

 

 

 

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"></sly> <sly data-sly-set.totalItems="${0}"></sly> <sly data-sly-list.child="${resource.listChildren}"> <sly data-sly-list.itemchildren="${child.listChildren}"> <sly data-sly-set.totalItems="${itemchildrenList.count}"></sly> </sly> </sly> <div class="slider-module-wrap ${properties.bgType == 'withBackground' ? 'has-bg' : ''}"> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-6"> <div class="card-left"> <div class="slider-wrap desktop"> <div class="slider-content"> <div class="input-wrap"> <input type="range" class="range-input" name="packageInputName" id="packageInputId" step="1" value="" min="1" max="${totalItems}" oninput="packageOutputId.value = packageInputId.value"> </div> </div> <ul class="range-data"> <sly data-sly-list.slider="${resource.getChildren}"> <li data-sly-repeat.item="${slider.getChildren}"> <span class="more-info-link" data-more-info="#" data-label="${item.modalId}"></span> </li> </sly> </ul> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="card-right"> <div class="data-card-wrapper"> <div id="data-card-inner" class="data-card-inner"> <div class="data-card-body"> <div class="package-wrap third"> <div class="more-info-wrap"> <a id="more-info" class="overlay-link" href="#" data-label="overlay"> <div class="more-title">More Info</div> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <sly data-sly-use.mainbtntemplate="/apps/components/nwt-smb/common/dialog/moreinfobutton/moreinfobutton.html" data-sly-call="${mainbtntemplate.mainbutton @ properties=item}"> </sly> <sly data-sly-call="${templates.placeholder @ isEmpty = wcmmode.edit}" />

 

 

 

 

Now, the problem is I am not able to pass the data perfectly to make the popup work. The issue is from the template which I created. Modal ID is not showing on the experience fragment. I don't know where I made the mistake. 

 

I would really appreciate it If someone helps me to solve this.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Manu_Mathew_

@ameen_dev  looks like the "item" variable used has lost its scope, you will need to find a way to use it in correct scope, or pass the list var and iterate inside the template.

3 replies

P
pradeepmoolemane
Level 3
July 3, 2022

Hi @ameen_dev 

 

Can you please try changing item (data-label attribute value which marked in bold in below snippet) to properties ?

 

<template data-sly-template.mainbutton="${ @ properties}">
<sly>
<span class="more-info-link" data-more-info="#" data-label="${item.modalId}">
</span>
<div data-sly-test="${properties.modalFragmentPath}" class="${properties.modalBehavior == 'fullOverlay' ? 'fullscreen-overlay-wrap overlay-modal' : ''}"
id="${properties.modalId}">
<sly data-sly-resource="${properties.modalFragmentPath}">
</sly>
</div>
</sly>
</template>

    A
    Ameen_DevAuthor
    Level 4
    July 3, 2022

    My apology, there will not be a span class inside template. I have edited the code. And by the way, I have tried that method too. It's not working.

      B_Sravan
      Community Advisor
      B_SravanCommunity Advisor
      Community Advisor
      July 3, 2022

      Seems like your input value to the template i.e is not within the scope of sly.
      can you paste your code as a snippet? (so that I can copy and take look on my IDE) also please use relative path while calling you template and make use of sling models to list out the children of your resource to maintain best practices.

      I have an example, 
      component html:

      <sly data-sly-use.tiles="com.someprojecr.core.models.ArticleTile"
           data-sly-use.templates="core/wcm/components/commons/v1/templates.html">
          <sly data-sly-test.tileType="${tiles.tileType=='singletile'}" data-sly-use.singleTile="templates/single-tile.html">
              <div data-sly-call="${singleTile.singleTile @ tileData=tiles}"></div>
          </sly>
      </sly>
      <sly data-sly-call="${templates.placeholder @ isEmpty = !tiles.articleTiles && !tiles.tileType, classAppend='cmp-article-tiles', emptyTextAppend='Please check Article Tiles Configurations'}"></sly>

       Template:

      <template data-sly-template.crosslink="${ @ tileData}">
          <div class="article-listing crosslink-tile" data-sly-list="${tileData.articleTiles}">
              <div class="cmp-article-listing" >
                  <div class="cmp-article-listing__content">
                      <div class="cmp-article-listing__category" data-sly-test="${item.artCategory}">${item.artCategory}</div>
                      <h2 class="cmp-article-listing__title" data-sly-test="${item.artTitle}"><a href="${item.artPath @context ='uri'}">${item.artTitle @context='html'}</a></h2>
                      <div class="cmp-article-listing__description" data-sly-test="${item.artDescription}">
                          <p>${item.artDescription @context ='html'}</p>
                      </div>
                      <div class="cmp-article-listing__time" data-sly-test="${item.artTime}">${item.artTime @context ='html'}</div>
                  </div>
              </div>
          </div>
      </template>

       

        Manu_Mathew_
        Community Advisor
        Manu_Mathew_Community AdvisorAccepted solution
        Community Advisor
        July 3, 2022

        @ameen_dev  looks like the "item" variable used has lost its scope, you will need to find a way to use it in correct scope, or pass the list var and iterate inside the template.

          A
          Ameen_DevAuthor
          Level 4
          July 6, 2022

          Thanks @manu_mathew_!

           

          Actually, I didn't iterate inside the template but in the main HTML and included the template in the right place. Thanks for giving me the light.

            Terms & ConditionsAccessibility statement

            Loading footer...