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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to use data-sly-test to tell the multifield (pathfield) is image or video?

Avatar

Level 2

Dear community,

 

I'm trying to build my own custom carousel which can add multipe assets with multifield (pathfield to indicate the rootPath). 

YuSheng_0-1650730503832.png

 

As the pic shows, I'd like to add both images and videos on my banner, and am now trying data-sly-test to make this happen.

 

YuSheng_1-1650730725271.png

 

Now I can only pick either image or video to add, and have tried some combinations at the end of data-sly-test (line 3 and line 8). Is this a possible way to work it out?

 

I suppose I can make this work by using jQuery contains (say, contains ".mp4") function after rendering then append the video elements afterwards, but still would like to know if I can simply use data-sly-test before get into script.

 

Any ideas would be appreciated!

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

I have tried with below htl code and checking file type  -

 

<div data-sly-test="${'jpg' in department.image}">IMAGE</div>
<div data-sly-test="${'pdf' in department.image}">PDF</div>

Entire htl code -

<sly data-sly-use.companiesModel="com.aem.demo.core.models.CompaniesModel"/>
<sly data-sly-test.empty="${!companiesModel.companies}" />
<div data-sly-test="${wcmmode.edit && empty}" class="cq-placeholder" data-emptytext="${component.title}"></div>
<sly data-sly-test="${!empty}">
  <div>
      <ul data-sly-list.company="${companiesModel.companies}">
        <li>${company.name}
          <ul data-sly-list.department="${company.departments}">
            <li>
               ${department.image}
                <li data-sly-test.image="${department.image}">

                  <div data-sly-test="${'jpg' in department.image}">IMAGE</div>
                  <div data-sly-test="${'pdf' in department.image}">PDF</div>
                </li>  
            </li>
          </ul>
        </li>
      </ul>
  </div>
</sly>

Output is file path and it's type-

DEBAL_DAS_0-1650797241524.png

Author's entries -

DEBAL_DAS_1-1650797351766.pngDEBAL_DAS_2-1650797361223.pngDEBAL_DAS_3-1650797369827.pngDEBAL_DAS_4-1650797379084.png

 

I have just used Image as field name in my sample component. But I can upload any type of files.

 

Sling model -

package com.aem.demo.core.models;

import java.util.List;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

@Model(
adaptables = {Resource.class},
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface CompaniesModel {
@inject
List<Company> getCompanies(); // the name `getCompanies` corresponds to the multifield name="./companies"
/**
* Company model
* has a name and a list of departments
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Company {
@inject
String getName();
@inject
List<Department> getDepartments(); // the name `getDepartments` corresponds to the multifield name="./departments"
}
/**
* Department model
* has a name and a manager
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Department {
@inject
String getImage();

}

}

 

cq:dialog -

<?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"
jcr:primaryType="nt:unstructured"
jcr:title="Companies"
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">
<companies
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new company.">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./companies">
<items jcr:primaryType="nt:unstructured">
<name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Comp. Name"
name="name"/>
<departments
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new department."
fieldLabel="Departments">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./departments">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Image"
name="image"
rootPath="/content/dam/we-retail/en/people"/>
</items>
</field>
</departments>
</items>
</field>
</companies>
</items>
</column>
</items>
</content>
</jcr:root>

 

 

 

 

 

 

 

 

View solution in original post

1 Reply

Avatar

Community Advisor

Hi @YuSheng ,

 

Identifying asset type can be done through sling model. For example like below.

 

       @ValueMapValue
	private String assetPath;

	@SlingObject
	ResourceResolver resourceResolver;

	private Resource resource;
	private Asset asset;

	@PostConstruct
	protected void init() {
		resource = resourceResolver.getResource(assetPath);
		if(resource != null) {
			asset = resource.adaptTo(Asset.class);
		}
	}

	public String getAssetType() {	
		if(asset != null) {
			if(DamUtil.isImage(asset)) {
				return "image";
			} else if (DamUtil.isVideo(asset)){
				return "video";
			}
		}
		return StringUtils.EMPTY;
	}

 

 

Avatar

Level 2

Hi Kishore_Kumar_

 

Thank you for the reply.

Although I don't intend to get into sling model in this case, shall take your reply as reference when I need to identify asset type in sling model next time.

 

Cheers!

Avatar

Correct answer by
Community Advisor

I have tried with below htl code and checking file type  -

 

<div data-sly-test="${'jpg' in department.image}">IMAGE</div>
<div data-sly-test="${'pdf' in department.image}">PDF</div>

Entire htl code -

<sly data-sly-use.companiesModel="com.aem.demo.core.models.CompaniesModel"/>
<sly data-sly-test.empty="${!companiesModel.companies}" />
<div data-sly-test="${wcmmode.edit && empty}" class="cq-placeholder" data-emptytext="${component.title}"></div>
<sly data-sly-test="${!empty}">
  <div>
      <ul data-sly-list.company="${companiesModel.companies}">
        <li>${company.name}
          <ul data-sly-list.department="${company.departments}">
            <li>
               ${department.image}
                <li data-sly-test.image="${department.image}">

                  <div data-sly-test="${'jpg' in department.image}">IMAGE</div>
                  <div data-sly-test="${'pdf' in department.image}">PDF</div>
                </li>  
            </li>
          </ul>
        </li>
      </ul>
  </div>
</sly>

Output is file path and it's type-

DEBAL_DAS_0-1650797241524.png

Author's entries -

DEBAL_DAS_1-1650797351766.pngDEBAL_DAS_2-1650797361223.pngDEBAL_DAS_3-1650797369827.pngDEBAL_DAS_4-1650797379084.png

 

I have just used Image as field name in my sample component. But I can upload any type of files.

 

Sling model -

package com.aem.demo.core.models;

import java.util.List;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

@Model(
adaptables = {Resource.class},
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface CompaniesModel {
@inject
List<Company> getCompanies(); // the name `getCompanies` corresponds to the multifield name="./companies"
/**
* Company model
* has a name and a list of departments
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Company {
@inject
String getName();
@inject
List<Department> getDepartments(); // the name `getDepartments` corresponds to the multifield name="./departments"
}
/**
* Department model
* has a name and a manager
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Department {
@inject
String getImage();

}

}

 

cq:dialog -

<?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"
jcr:primaryType="nt:unstructured"
jcr:title="Companies"
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">
<companies
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new company.">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./companies">
<items jcr:primaryType="nt:unstructured">
<name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Comp. Name"
name="name"/>
<departments
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new department."
fieldLabel="Departments">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./departments">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Image"
name="image"
rootPath="/content/dam/we-retail/en/people"/>
</items>
</field>
</departments>
</items>
</field>
</companies>
</items>
</column>
</items>
</content>
</jcr:root>

 

 

 

 

 

 

 

 

Avatar

Level 2

Hi DEBAL_DAS,

 

It works perfectly now by adopting your approach, thanks a lot!